Conversor de códigos de color
Los colores en desarrollo web se pueden especificar en múltiples formatos: hex, RGB, HSL y colores con nombre. Esta herramienta convierte entre todos los formatos, muestra una vista previa visual, calcula ratios de contraste para accesibilidad y genera paletas de colores complementarios.
Especificaciones
Casos de uso comunes
- Convertir colores hex proporcionados por el diseñador a HSL para una manipulación más fácil
- Verificar si el color del texto cumple los estándares de accesibilidad WCAG
- Generar paletas de colores para diseño de interfaces
- Depurar valores de color CSS que no se renderizan como se esperaba
- Encontrar el equivalente hex de los colores con nombre de CSS
Funcionalidades
- Analizar hex (#RGB, #RRGGBB, #RRGGBBAA), RGB, RGBA, HSL, HSLA y colores con nombre
- Convertir entre todos los formatos de color instantáneamente
- Salida HEX8 (hex de 8 dígitos con alfa)
- Vista previa visual del color con alternancia de fondo oscuro/claro
- Vista previa de texto de muestra sobre fondos blanco y negro
- Calcular ratio de contraste WCAG contra negro y blanco
- Clasificación de color claro/oscuro
- Generar paletas de colores complementarios, análogos, triádicos, tetrádicos y monocromáticos
- Mostrar luminancia y recomendaciones de accesibilidad
Ejemplos
Consejos
- HSL suele ser más fácil de manejar: H es el color, S es la intensidad, L es el brillo.
- Para texto accesible, apunte a un ratio de contraste de al menos 4.5:1 (WCAG AA).
- El formato hex de 8 dígitos (#RRGGBBAA) incluye transparencia alfa.
- CSS4 introduce nuevos espacios de color como oklch() para mejor uniformidad perceptual.
Comprender Conversor de códigos de color
Los valores de color CSS definen colores para el estilizado web usando varios sistemas de notación. El más común es hexadecimal (#RRGGBB), donde cada par de dígitos hex representa los canales rojo, verde y azul desde 00 (0) hasta FF (255). La forma abreviada #RGB duplica cada dígito (#F00 equivale a #FF0000). La forma de 8 dígitos #RRGGBBAA agrega un canal de transparencia alfa.
Las notaciones funcionales proporcionan una especificación de color más intuitiva. RGB (rgb(255, 0, 0)) especifica canales como enteros 0-255 o porcentajes. HSL (hsl(0, 100%, 50%)) usa tono (rueda de color de 0-360 grados), saturación (0-100%) y luminosidad (0-100%), que muchos diseñadores encuentran más intuitivo para crear paletas de colores y ajustar colores. Tanto RGB como HSL soportan transparencia alfa con rgba() y hsla() o la sintaxis moderna rgb(255 0 0 / 50%).
La accesibilidad del color es una preocupación crítica en el desarrollo web. WCAG 2.1 define ratios de contraste mínimos: 4.5:1 para texto normal (Nivel AA), 3:1 para texto grande, y 7:1 para contraste mejorado (Nivel AAA). Un contraste insuficiente hace que el texto sea difícil o imposible de leer para usuarios con baja visión o deficiencias de visión del color.
CSS también soporta 148 colores con nombre (como rebeccapurple, cornflowerblue, tomato), la palabra clave currentColor, y espacios de color más nuevos como HWB (tono-blancura-negrura), LAB, LCH y OKLCH que proporcionan manipulación de color perceptualmente uniforme. Los espacios más nuevos son particularmente útiles para generar paletas de colores armoniosas y degradados suaves.
Hex (#FF0000) y RGB (rgb(255,0,0)) ambos especifican valores de canal rojo, verde y azul — hex usa base 16 mientras que RGB usa enteros decimales. HSL (hsl(0,100%,50%)) representa el color usando tono (el color en sí en una rueda de 0-360 grados), saturación (intensidad) y luminosidad (brillo), que muchos desarrolladores encuentran más intuitivo para crear variaciones. Los tres formatos pueden representar los mismos colores, pero HSL hace sencillo producir variantes más claras, más oscuras o más apagadas ajustando un solo valor.
El canal alfa controla la transparencia en una escala de 0 (completamente transparente) a 1 (completamente opaco). En notación hex, el alfa se agrega como dos dígitos adicionales — #FF000080 representa rojo 50% transparente (80 hex = 128 decimal). En notación funcional, la sintaxis es rgba(255,0,0,0.5) o la forma moderna rgb(255 0 0 / 50%). La transparencia alfa es esencial para superposiciones, marcas de agua y elementos de interfaz en capas. Para cumplimiento WCAG, el Nivel AA requiere un ratio de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande (18px+ negrita o 24px+ regular), mientras que el Nivel AAA requiere 7:1 para texto normal y 4.5:1 para texto grande. Los elementos no textuales como iconos, bordes y controles de formulario necesitan al menos 3:1 de contraste contra colores adyacentes.
LAB y OKLCH son espacios de color perceptualmente uniformes donde cambios numéricos iguales producen diferencias de color visualmente iguales, haciéndolos superiores para generar paletas y degradados suaves. OKLCH (Luminosidad, Croma, Tono) es particularmente útil en CSS porque ajustar la luminosidad produce resultados naturales y predecibles. Ambos son soportados en CSS moderno con las funciones oklch() y lab().