Selector de Color HEX, RGB y HSL

Elige cualquier color con el selector visual o escribe su código HEX. Obtendrás al instante sus equivalencias en RGB, HSL, HSV y CMYK, listas para copiar en tu CSS, en tu programa de diseño o para enviar a la imprenta. El selector también mide el contraste del color con texto blanco y negro según las pautas de accesibilidad WCAG. Genera una escala de tonos del más claro al más oscuro y, en Chrome y Edge, incluye un gotero para tomar colores de cualquier parte de la pantalla.

Cómo usar

1. 1

   Haz clic en el recuadro de color para abrir el selector, o escribe un código HEX

2. 2

   Copia el formato que necesites: HEX, RGB, HSL, HSV o CMYK

3. 3

   Revisa las muestras de contraste con texto blanco y negro y sus niveles AA y AAA

4. 4

   Haz clic en un tono de la escala para usarlo como nuevo color

Beneficios

• Cinco formatos de color con botón para copiar
• Contraste WCAG 2.x con texto blanco y negro
• Indicadores AA, AA grande y AAA
• Escala de nueve tonos del mismo color
• Gotero para tomar colores de la pantalla (Chrome y Edge)
• Acepta HEX de 3, 4, 6 y 8 dígitos

Formatos de color: cuándo usar cada uno

HEX y RGB describen el mismo color como cantidades de rojo, verde y azul, de 0 a 255; HEX es el formato más usado en diseño web y RGB en CSS cuando necesitas transparencia con rgba(). HSL describe el color por tono, saturación y luminosidad, y facilita crear variantes más claras u oscuras cambiando solo la luminosidad. HSV, similar a HSL, es el modelo de muchos selectores de programas de diseño. CMYK, cian, magenta, amarillo y negro, es el modelo de la impresión.

Contraste y accesibilidad

La relación de contraste compara la luminancia relativa de dos colores y va de 1:1 (iguales) a 21:1 (negro sobre blanco). Las pautas WCAG exigen al menos 4.5:1 para texto normal y 3:1 para texto grande (18 puntos o 14 en negrita) en el nivel AA, y 7:1 y 4.5:1 en el nivel AAA. Un buen contraste no solo ayuda a personas con baja visión: facilita leer en el celular a pleno sol. Por ejemplo, el gris #777777 sobre blanco da 4.48:1 y no alcanza el nivel AA para texto normal.

Escalas de tonos

La escala mantiene el tono y la saturación del color y varía la luminosidad del 95% al 15%. Es la base de los sistemas de diseño modernos, que definen cada color en varias intensidades, como del 50 al 900, para usarlas en fondos suaves, bordes, estados de hover y textos. Haz clic en cualquier tono para convertirlo en el color activo y ver sus códigos y su contraste.

CMYK para imprimir

La conversión a CMYK que muestra la herramienta es matemática y sirve como referencia. En impresión profesional, el resultado depende del perfil de color, del papel y de la máquina, y los colores muy saturados de pantalla, como algunos azules y verdes brillantes, no pueden reproducirse con tinta. Si tu diseño va a imprenta, pide una prueba de color o trabaja con guías Pantone.