Acerca de: Convertidor de colores
Pega un color en cualquier formato CSS común (#1d4ed8, #fff, #1d4ed8cc, rgb(29, 78, 216), rgba(…) o hsl(224, 76%, 48%)) o elige uno con el selector de color, y míralo convertido a HEX, RGB, HSL, HSV/HSB y CMYK al mismo tiempo, cada uno con su botón para copiar.
El convertidor también calcula la relación de contraste del color sobre fondos blanco y negro, y te dice si cumple los niveles de accesibilidad WCAG AA y AAA para texto normal y grande. Una fila de tintes y sombras te ayuda a crear estados hover y paletas a partir del mismo color base.
Cómo usar: Convertidor de colores
- Escribe o pega un color en «Valor del color (HEX, RGB o HSL)», o usa «O elige un color».
- Copia el formato que necesites de la lista «Formatos».
- Revisa las tarjetas de «Contraste» para saber si un texto de este color cumple WCAG AA o AAA sobre blanco o negro.
- Haz clic en cualquier muestra de «Tintes y sombras» para cargar esa variante más clara u oscura.
Preguntas frecuentes
¿Cómo convierto HEX a RGB?
Divide los seis dígitos hexadecimales en tres pares y convierte cada par de base 16 a un número de 0 a 255. Por ejemplo, #1d4ed8 es 1d = 29, 4e = 78 y d8 = 216, o sea rgb(29, 78, 216). El convertidor lo hace por ti mientras escribes.
¿Qué diferencia hay entre HSL y HSV (HSB)?
Los dos describen un color por su tono y saturación. HSL agrega la luminosidad, donde 100% siempre es blanco; HSV (también llamado HSB) agrega el valor o brillo, donde 100% es la versión más intensa del color. CSS usa HSL, mientras que herramientas de diseño como Photoshop y Figma muestran HSB.
¿Qué relación de contraste necesito para que el texto sea accesible?
El nivel AA de WCAG 2 exige al menos 4.5:1 para texto normal y 3:1 para texto grande (24 px, o unos 18.66 px en negrita). El nivel AAA exige 7:1 y 4.5:1.
¿Los valores CMYK son exactos para imprimir?
No. Usan la conversión matemática estándar sin un perfil de color de impresora, lo que sirve como punto de partida. Para colores de impresión precisos, haz la conversión en tu programa de diseño con el perfil que te recomiende tu imprenta.