Selector de colores

Cómo usar el selector de colores

1. Haz clic en la muestra que hay bajo Elige un color para abrir el selector de color de tu navegador y elige un color. También puedes escribir o pegar un valor en el campo Código de color: un código HEX como #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) o un nombre CSS como tomato.
2. La vista previa grande se actualiza al instante, con el código HEX escrito en negro o en blanco, según cuál se lea mejor sobre ese fondo.
3. En Códigos de color, copia el formato que necesites con el botón Copiar de al lado: HEX, RGB, HSL, HSV o CMYK.
4. Pulsa Color aleatorio si buscas inspiración, o Tomar de la pantalla (en los navegadores que lo admiten, como Chrome y Edge) para capturar cualquier píxel de tu pantalla, incluso de otras ventanas.

Todo ocurre en tu navegador: no se envía ningún color ni ninguna imagen a ninguna parte.

Qué significa cada código de color

• HEX es la notación hexadecimal de seis dígitos que se usa en HTML y CSS. Cada par de dígitos es un canal (rojo, verde, azul) de 00 a FF, así que #1E90FF significa rojo 30, verde 144, azul 255.
• RGB expresa esos mismos tres canales con números decimales de 0 a 255. Es lo que esperan la mayoría de los programas de diseño y las bibliotecas de programación.
• HSL describe un color por su tono (un ángulo de 0° a 360° en la rueda de color), su saturación y su luminosidad. Es práctico para aclarar u oscurecer un color cambiando un solo número.
• HSV (también llamado HSB) usa tono, saturación y valor (brillo). Es el modelo en el que se basan los cuadros de color de Photoshop, Figma y muchos otros editores.
• CMYK expresa el color como porcentajes de tinta cian, magenta, amarilla y negra.

Sobre los valores CMYK

Los códigos CMYK son una conversión simple: K = 1 − max(R, G, B), después C = (1 − R − K) / (1 − K), y lo mismo para M e Y. Es la fórmula estándar de los manuales, pero no usa ningún perfil ICC. La impresión real depende de la máquina, el papel y las tintas, así que la imprenta convertirá tus colores con su propio perfil y el resultado puede variar. Usa estas cifras como punto de partida, no como prueba de impresión.

Cómo leer las relaciones de contraste

Bajo el código HEX, la vista previa muestra el Contraste sobre blanco y el Contraste sobre negro, calculados con la fórmula de luminancia relativa de WCAG 2. Para texto normal hace falta una relación de 4,5:1 o más en el nivel AA, y de 3:1 para texto grande y elementos de interfaz. Si tu color solo llega a 3:1 sobre blanco, resérvalo para títulos grandes o iconos y usa un tono más oscuro para el texto.

Consejos

• Puedes pegar códigos hexadecimales sin la #: 1e90ff también funciona, igual que las formas cortas como f60.
• Se aceptan valores con transparencia, como rgb(0 0 0 / 50%); el selector muestra el color opaco.
• El cuadro de color del navegador cambia de un sistema a otro. Si necesitas un valor preciso, escribirlo en el campo Código de color siempre es exacto.