Herramientas de Color
Herramientas para elegir colores y convertir entre formatos. Todo el procesamiento ocurre en tu navegador.
Elige, convierte y comprueba un color
Introduce un valor HEX, RGB, HSL, HSV u OKLCH para ver el mismo color en todos los formatos disponibles. Ajusta visualmente el tono, la saturación, el brillo y la transparencia, y copia la notación exacta para CSS, programas de diseño o guías de estilo.
El panel de contraste calcula las proporciones WCAG sobre blanco y negro e indica si la combinación pasa para texto normal o grande. La escala de luminosidad permite convertir un solo color en una paleta coherente para una interfaz.
El mismo color, escrito de varias formas
Hex y rgb() son los valores de canal que la pantalla activa directamente. hsl() y hsv() reorganizan eso en tono, saturación y luminosidad o brillo, lo que resulta más fácil de razonar cuando construyes variaciones de un color en lugar de elegir uno. oklch() describe el mismo color en un espacio pensado para ajustarse a la percepción.
No se pierde nada al pasar de uno a otro dentro de la gama sRGB, así que el formato que hay que usar es el que espere el destino: hex en la mayoría de herramientas de diseño, hsl u oklch en una propiedad personalizada de CSS, y cmyk solo como indicación aproximada, ya que una conversión real de imprenta depende de la tinta, el papel y el perfil.
Por qué una paleta construida en HSL se ve desigual
La luminosidad de HSL es una media geométrica de los canales, no una medida de lo claro que parece un color. El amarillo y el azul están los dos al cincuenta por ciento, y uno de ellos es casi blanco a la vista. Cualquier escala construida manteniendo ese número fijo sale descompensada y acaba corregida a mano, color a color.
OKLCH lo resuelve por construcción: pasos iguales de luminosidad se ven como pasos iguales. Mantenla constante entre tonos y la fila se lee de verdad como una sola familia, y eso es lo que lo convierte en el espacio adecuado para generar tintes, sombras e interpolaciones sin el gris turbio que aparece a mitad de una mezcla en RGB.
El contraste es primero un requisito y después un criterio
Las relaciones que se muestran frente a blanco y negro siguen la fórmula de WCAG 2, con los umbrales habituales: 4,5:1 para texto de lectura, 3:1 para texto grande y componentes de interfaz, 7:1 para AAA. Cumplirlos no es opcional en la mayoría de sitios que contratan software, y es el trabajo de accesibilidad más barato que existe.
Aun así, el número no es la respuesta completa. La fórmula sobrestima el contraste del texto claro sobre fondo oscuro y no sabe nada del grosor de la fuente, así que un trazo muy fino que aprueba puede seguir costando de leer. Cumple la relación y después mira el resultado al tamaño y el grosor con los que vas a publicarlo.