Convierte entre códigos de color HEX, RGB y HSL, y empaqueta el resultado en fragmentos fáciles de copiar y compartir.
Revisión de color de acento UI se normaliza en HEX, RGB, HSL y fragmentos de tokens fáciles de copiar.
Usa texto blanco sobre esta muestra para obtener el mejor contraste en texto pequeño.
:root {
--brand-accent: #7C3AED;
--brand-accent-rgb: 124 58 237;
}
{
"color": {
"accent": {
"value": "#7C3AED",
"rgb": "124 58 237",
"hsl": "hsl(262, 83%, 58%)"
}
}
}
background-color: #7C3AED; color: #FFFFFF;
Los colores en la web pueden representarse en múltiples formatos. HEX utiliza notación hexadecimal (#RRGGBB), RGB especifica componentes rojo, verde y azul (0-255), y HSL utiliza matiz (0-360), saturación y luminosidad (0-100%). Cada formato tiene ventajas para diferentes casos de uso, como el trabajo de diseño o la manipulación programática del color.
Los colores HEX codifican valores RGB en hexadecimal (16-255 por canal). RGB especifica directamente la intensidad del color (0-255). HSL separa el color (matiz) de la intensidad (saturación/luminosidad), lo que lo hace más intuitivo para crear variaciones de color. Todos los formatos pueden representar los mismos 16,7 millones de colores.
HSL es mejor cuando necesitas crear variaciones de color (más claro, más oscuro, más/menos saturado), ya que puedes ajustar un solo componente. RGB es mejor para mezclar colores y cuando se trabaja con procesamiento de imágenes.
La abreviatura HEX utiliza 3 dígitos en lugar de 6 (#RGB en lugar de #RRGGBB). Cada dígito se duplica: #F00 se convierte en #FF0000 (rojo). Solo funciona cuando cada par tiene dígitos idénticos.