Selector de colores y conversor de HEX, RGB y más

El selector de imagen de la página de inicio parte de una foto: cargas una imagen y muestreas píxeles de ella. Esta página parte de un valor de color. Úsala cuando ya conozcas el hexadecimal —de un manual de marca, una captura o un compañero— y necesites las conversiones, variaciones, comprobaciones de accesibilidad y fragmentos de código que lo acompañan.

Hexadecimal de tres, cuatro, seis u ocho dígitos, con o sin el signo #; rgb() y rgba() con comas o espacios; hsl() y hsla(); y cualquiera de las 148 palabras clave de color CSS, como rebeccapurple o cornflowerblue. Si algo no se puede interpretar, el color actual se queda como estaba en lugar de reiniciarse.

HSL no es perceptualmente uniforme: dos colores con la misma luminosidad HSL pueden parecer muy distintos en brillo, y por eso las paletas generadas con HSL salen irregulares. OKLCH lo corrige, y todos los navegadores actuales lo admiten. Las variaciones, las armonías y el color accesible sugerido de esta página se calculan en OKLCH precisamente por eso.

Es la fórmula estándar sin calibrar, que es la que usan la mayoría de las herramientas web, y sirve para hacerse una idea. No es una conversión con gestión de color: un trabajo de imprenta real necesita un perfil ICC de la máquina y el papel concretos. Toma el valor CMYK de aquí como punto de partida para dárselo a tu imprenta, no como especificación final.

Es la distancia CIEDE2000 entre dos colores, una medida de lo distintos que se ven. Por debajo de 1, nadie ve la diferencia. Alrededor de 2, un observador atento la ve con los colores uno al lado del otro. Por encima de 10, parecen colores distintos. Refleja lo que ve una persona mucho mejor que comparar valores RGB.

Con la fórmula de WCAG 2.1: la luminancia relativa de cada color en luz lineal y luego (más claro + 0,05) / (más oscuro + 0,05). El nivel AA exige 4,5:1 para texto normal y 3:1 para texto grande o componentes de interfaz; el AAA exige 7:1 y 4,5:1. La relación ignora el tono por completo, y por eso dos colores pueden parecer muy distintos y aun así no cumplir.

No. La página incluye los cálculos de color en JavaScript y los ejecuta todos en tu navegador. No hay ninguna llamada a una API cuando cambias el color, no se registra nada y, una vez cargada, la página funciona sin conexión.

Sí. Un valor de color no está protegido por derechos de autor y nada de lo que hay aquí lleva licencia. Puedes usar las escalas, armonías y fragmentos de código generados en cualquier proyecto. Eso sí, un color concreto puede formar parte de una imagen comercial registrada cuando se combina con un logotipo o una categoría de producto determinados, así que copiar el color de marca exacto de un competidor es una cuestión legal más que técnica.

Pega el código HEX en el campo de arriba de esta página. Se convierte al instante a RGB, HSL, HSV, CMYK, OKLCH y otros 28 formatos, y cada valor se copia con un clic. Los seis dígitos HEX son tres parejas, rojo, verde y azul, que van de 00 a FF, es decir, de 0 a 255 en RGB.

Para el texto normal, el nivel AA de WCAG pide al menos 4,5:1 entre el texto y el fondo, y el nivel AAA pide 7:1. El texto grande (24 px, o unos 19 px en negrita) necesita 3:1 para AA. Pon tus dos colores en el comprobador de contraste de esta página para ver la relación y qué niveles cumplen.

Usa el simulador de daltonismo de esta página. Muestra tu color como lo ven las personas con protanopía, deuteranopía, tritanopía y acromatopsia, y enumera colores cercanos que para ellas se verían iguales. Si dos estados se distinguen solo por rojo frente a verde, añade también una forma, un icono o una etiqueta.