Las utilidades de paletas y degradados generan valores listos para copiar en tu hoja de estilos, con formatos consistentes entre herramientas.
HEX, RGB y HSL: cuándo usar cada uno
Los tres describen el mismo color, así que puedes pasar de uno a otro sin perder nada. De hexadecimal a RGB se convierte a mano: cada par es un canal y su valor decimal va de 0 a 255 (FF son 255). El RGB cuesta más de leer, mientras que en HSL basta subir la luminosidad para aclarar un color sin cambiarle el tono, que es justo lo que necesitas para construir una escala.
Formato
Cómo se lee
Cuándo conviene
HEX
#1a2b3c: tres pares en hexadecimal (rojo, verde, azul)
Copiar y pegar en el CSS, que es el formato que espera una hoja de estilos
RGB
rgb(26 43 60): cada canal va de 0 a 255
Cuando el valor viene de un programa o necesitas transparencia (alfa)
HSL
hsl(210 40% 17%): tono, saturación y luminosidad
Para crear variantes: cambia la luminosidad y el tono se mantiene
Contraste y accesibilidad: qué mínimo necesitas
Texto normal: contraste mínimo de 4,5:1 (nivel AA de las WCAG).
Texto grande —24 px, o 18,66 px en negrita—: basta 3:1.
El contraste se calcula con la luminancia relativa de los dos colores, no con su diferencia de tono: un azul y un verde pueden ser indistinguibles entre sí, y el gris claro sobre blanco es el fallo más frecuente.
Un texto decorativo o que forma parte de un logotipo queda fuera del requisito; si transmite información, no.
Preguntas frecuentes
¿Qué contraste necesito para cumplir la accesibilidad?
Para texto normal, 4,5:1 (nivel AA de las WCAG 2.2). Para texto grande —24 px o 18,66 px en negrita— basta 3:1. Comprueba el par exacto con el <a href="/comprobar-contraste/">comprobador de contraste</a> antes de publicar.
¿Cómo paso un color de HEX a RGB a mano?
Divide el código en tres pares y convierte cada par de hexadecimal a decimal: #FF8000 es rojo 255, verde 128 y azul 0. El <a href="/convertidor-de-color/">convertidor de color</a> lo hace en los dos sentidos y también con HSL y HSV.
¿Puedo sacar la paleta de una foto?
Sí: el <a href="/extractor-de-colores/">extractor de colores</a> lee la imagen en tu navegador y devuelve los tonos dominantes; con el <a href="/selector-de-color-de-imagen/">selector de color de imagen</a> copias el valor exacto de un píxel concreto.
Fuentes
Valores contrastados con las fuentes que se citan abajo. Los que dependen de normativa o de
un país pueden cambiar: comprueba siempre el valor vigente en tu caso.