Convierte entre códigos de color HEX, RGB y HSL, y empaqueta el resultado en fragmentos fáciles de copiar y compartir.
Entrega de token de marca se normaliza en HEX, RGB, HSL y fragmentos de tokens fáciles de copiar.
Usa texto oscuro sobre esta muestra para obtener el mejor contraste en texto pequeño.
:root {
--brand-accent: #0EA5E9;
--brand-accent-rgb: 14 165 233;
}
{
"color": {
"accent": {
"value": "#0EA5E9",
"rgb": "14 165 233",
"hsl": "hsl(199, 89%, 48%)"
}
}
}
background-color: #0EA5E9; color: #111827;
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.