Herramientas de color y diseño

HEX (#RRGGBB) codifica los tres canales de color (rojo, verde, azul) en hexadecimal; RGB expresa esos mismos tres canales en números de 0 a 255; HSL describe el color por matiz (el tono en la rueda de color, 0-360°), saturación e luminosidad, un formato más intuitivo para aclarar, oscurecer o desaturar un color en CSS. Son tres representaciones del mismo modelo de color subyacente, no espacios de color independientes: convertir entre ellas no cambia qué color es, solo cómo se escribe.

Convertir HEX a RGB

Convertir RGB a HEX

Convertir HEX a HSL

Convertir HSL a HEX

El HEX admitido aquí es de 3 o 6 dígitos (#RGB o #RRGGBB); no hay soporte para HEX de 8 dígitos con canal de transparencia. Convertir HEX a HSL y de vuelta a HEX no siempre devuelve exactamente el mismo código: el matiz, la saturación y la luminosidad se redondean a números enteros al mostrarlos, y ese redondeo intermedio puede desplazar el HEX final respecto al original -- no es un fallo, es una consecuencia de mostrar valores redondeados en un paso intermedio; el desplazamiento no está acotado a una unidad por canal, así que conviene comprobar el resultado en vez de asumir que siempre es mínimo. Al convertir RGB a HEX, cada canal también se redondea antes de pasarlo a hexadecimal.

Ninguna de las herramientas de conversión de esta categoría admite un canal alfa (transparencia) en el HEX de entrada o salida: si necesitas trabajar con transparencia, tendrás que añadir el valor alfa aparte al usar el resultado en CSS (por ejemplo, con rgba() o el cuarto/octavo dígito de un HEX de 4 u 8 caracteres que no genera esta herramienta).

HEX es compacto y habitual en diseño gráfico y en código; RGB es útil cuando necesitas trabajar con los tres canales numéricos por separado; HSL es el más práctico cuando quieres ajustar manualmente un color -- subir la luminosidad para aclararlo, bajar la saturación para desaturarlo -- porque esos ajustes corresponden directamente a uno de sus tres valores, algo que no es igual de directo en HEX o RGB. El selector de color te deja elegir un color visualmente y obtener al instante su valor en los tres formatos.

Selector de color

El verificador de contraste calcula el ratio de contraste entre dos colores según la fórmula de luminancia relativa de WCAG 2.x, y lo compara con los umbrales estándar de las pautas WCAG (AA texto normal desde 4,5:1, AA texto grande desde 3:1, AAA texto normal desde 7:1, AAA texto grande desde 4,5:1). Que dos colores "se vean distintos" no es lo mismo que superar estos umbrales: dos colores pueden ser visualmente diferentes y aun así no ofrecer contraste suficiente para ser accesibles, por eso esta herramienta calcula el ratio numérico en vez de basarse en una impresión visual. El generador de paletas crea colores armónicos rotando el matiz del color base en pasos iguales, manteniendo la misma saturación y luminosidad -- genera una paleta con relación de color entre sí, no verifica si esos colores tienen contraste suficiente entre ellos para texto y fondo: para eso hace falta el verificador de contraste por separado. El generador de gradientes CSS, el de sombras (box-shadow) y el de bordes redondeados (border-radius) no convierten colores: construyen directamente el código CSS a partir de los valores que elijas (colores, ángulo, desenfoque, radio), con vista previa en directo.

Comprobar contraste de color (WCAG)

Generador de paletas de colores

Generador de gradientes CSS

Generador de sombras CSS

Generador de esquinas redondeadas

Las 10 herramientas de esta categoría calculan en tu navegador: ningún color, paleta ni valor de contraste se envía a un servidor. Ten en cuenta el redondeo al encadenar varias conversiones (por ejemplo HEX a HSL y de vuelta a HEX) y la ausencia de canal alfa en el HEX que manejan estas herramientas.