Selector de colores y conversor de códigos

Qué significan los códigos HEX, RGB y HSL

Cualquier color en una pantalla es una mezcla de luz roja, verde y azul. RGB expresa esa mezcla tal cual: rgb(29, 78, 216) quiere decir poco rojo, algo de verde y mucho azul, con cada canal de 0 a 255. HEX son esos mismos tres números en base 16: 29, 78 y 216 pasan a ser 1d, 4e y d8, y el código queda #1d4ed8. Un código corto como #777 equivale a #777777, y uno de ocho dígitos agrega un cuarto par para la opacidad.

HSL describe el mismo color de una forma más fácil de ajustar a mano: el matiz como un ángulo en la rueda de color (0 es rojo, 120 verde, 240 azul), la saturación como qué tan vivo se ve y la luminosidad, de negro a blanco. hsl(224, 76%, 48%) es el mismo azul de antes. HSV, que Photoshop y muchas apps de diseño llaman HSB, usa el brillo en lugar de la luminosidad, así que un color puro queda en 100% y no en 50%.

OKLCH es el formato más reciente de CSS. Su luminosidad se mide como la percibe el ojo, de modo que dos colores con la misma luminosidad OKLCH se ven igual de claros, algo que con HSL no pasa. Es útil en sistemas de diseño, donde quieres que toda una paleta avance de claro a oscuro en pasos parejos.

Qué formato usar en cada caso

• HEX para CSS, programas de diseño y manuales de marca. Es corto y casi todas las apps lo aceptan.
• RGB o rgba() cuando necesitas transparencia en código antiguo o cuando un programa pide tres números.
• HSL para retocar un color a mano: subir la luminosidad para el estado hover o bajar la saturación para una versión apagada.
• HSV/HSB para que coincida con los números del selector de Photoshop, Figma o editores parecidos.
• OKLCH para paletas y temas en CSS moderno.
• CMYK solo como referencia aproximada para impresión, como se explica abajo.

Por qué el color en pantalla y en papel no es igual

La pantalla suma luz: rojo, verde y azul al máximo dan blanco. La impresora resta luz con tintas cian, magenta, amarilla y negra (la K) sobre un papel que ya es blanco. Muchos colores brillantes de pantalla, sobre todo azules y verdes muy saturados, no se pueden imprimir tal cual. Las cifras CMYK de esta herramienta salen de una fórmula básica que no sabe nada de tu papel ni de la máquina, así que una imprenta que trabaja con un perfil de color real puede usar valores distintos. Para un trabajo importante, pide una prueba de color antes del tiraje.

Nociones básicas de contraste y accesibilidad

Cuesta leer un texto cuyo brillo se parece demasiado al del fondo, sobre todo en el celular a pleno sol o para personas con baja visión. Las pautas WCAG lo miden como una relación de contraste que va de 1:1 (sin diferencia) a 21:1 (negro sobre blanco). El gris #777777 sobre blanco da 4.47:1, apenas por debajo del 4.5:1 que el nivel AA exige para el texto normal, aunque sí cumple para títulos grandes. El verificador nunca redondea hacia arriba, así que un 4.49 no cumple. Además, el color no debe ser la única señal: acompaña los rojos y verdes de estado con palabras o íconos.

Tonos claros, oscuros y colores que combinan

Los tonos claros mezclan el color con blanco y los oscuros con negro en pasos iguales, y así obtienes al instante variantes para hover, bordes y fondos. El complementario está en el lado opuesto de la rueda y resalta mucho; los análogos están a 30° a cada lado y juntos combinan de forma más suave. Si quieres ver un color ocupando toda la pantalla, prueba la pantalla blanca con un color personalizado. Y si estás preparando imágenes para un sitio con esta paleta, puedes comprimir imágenes para que pesen menos.