Qué hace: Selector de color HEX y RGB

Selecciona un color con el selector visual o escribe su código, y obtén al instante sus valores en HEX, RGB y HSL, listos para copiar en CSS o en tu programa de diseño.

Además verás si el color sirve como fondo para texto blanco o negro según los niveles de contraste AA y AAA de las pautas de accesibilidad WCAG.

Cómo usarla

Elige un color con el selector o escribe un código HEX.
Ajusta, si quieres, los canales RGB o los valores HSL.
Copia el formato que necesites.

Ejemplos

Color de marca a CSS

#8E73FF equivale a rgb(142, 115, 255) y hsl(252, 100%, 73%).

Aclarar un color

Sube la luminosidad en HSL manteniendo el tono y la saturación para obtener una variante más clara del mismo color.

Límites, fórmulas y supuestos

HEX admite 3, 4, 6 u 8 dígitos; los de 4 y 8 incluyen transparencia (alfa).
Los valores HSL se redondean a enteros, por lo que convertir HEX → HSL → HEX puede variar en una unidad.
WCAG 2.x exige un contraste mínimo de 4,5:1 para texto normal (AA) y de 7:1 para el nivel AAA.

Preguntas frecuentes

¿Qué diferencia hay entre RGB y HSL?

RGB indica cuánto rojo, verde y azul tiene un color; HSL lo describe por tono, saturación y luminosidad, más intuitivo para crear variantes.

¿Por qué mi código HEX no es válido?

Debe tener 3, 4, 6 u 8 caracteres de 0 a 9 y de A a F. Letras como G o O no existen en hexadecimal.

¿Qué significa AA?

Es el nivel de conformidad de accesibilidad que suelen exigir las normativas: texto legible para la mayoría de personas con baja visión.

Guías relacionadas

Cómo crear un código QR que se escanee siempre

Tamaño, contraste, margen, corrección de errores y tipos de contenido: la lista de comprobación antes de imprimir un QR.

Colores accesibles: el contraste WCAG explicado

Qué significan 4,5:1, AA y AAA, cómo comprobarlo y cómo construir una paleta legible para todo el mundo.

Contraste como fondo de texto