Conversor de HEX a RGB
#3b82f6 se convierte en rgb(59, 130, 246). Cada par de digitos hex se asigna directamente a un canal RGB: 3b es el canal rojo (59), 82 es el verde (130) y f6 es el azul (246). Ambos formatos representan el mismo color. Solo son representaciones diferentes de los mismos valores subyacentes.
Mapeo de Hex a RGB
Un código de color hex son seis digitos hexadecimales divididos en tres pares. Hexadecimal es un sistema en base 16 que usa digitos 0-9 y letras a-f. Cada par representa un valor de canal de 0 (hex 00) a 255 (hex ff).
Para #3b82f6:
| Par | Canal | Base 16 | Base 10 |
|---|---|---|---|
3b | Rojo | 0x3b | 59 |
82 | Verde | 0x82 | 130 |
f6 | Azul | 0xf6 | 246 |
Notación Abreviada Hex
Los colores hex de 3 digitos son un atajo para los de 6 digitos. Cada digito se duplica: #rgb se expande a #rrggbb.
#f00 -> #ff0000 -> rgb(255, 0, 0)
#0f0 -> #00ff00 -> rgb(0, 255, 0)
#abc -> #aabbcc -> rgb(170, 187, 204)Canales Alfa: Hex de 8 Digitos y rgba()
El hex estándar de 6 digitos no tiene opacidad. Hay dos opciones para transparencia:
La primera es rgba() en CSS: rgba(59, 130, 246, 0.5) agrega 50% de opacidad.
La segunda es hex de 8 digitos: #3b82f680. Los últimos dos digitos son el canal alfa, nuevamente de 00 a ff.
Funciones de Color CSS
/* HEX */
color: #3b82f6;
/* RGB */
color: rgb(59 130 246); /* sintaxis moderna */
color: rgba(59, 130, 246, 0.5); /* con alfa */
/* HSL */
color: hsl(217 91% 60%);Para colores estaticos, HEX es compacto. Usa rgb() cuando construyas colores desde propiedades personalizadas CSS. Usa hsl() cuando necesites ajustar brillo o saturación sin cambiar el tono.