Acerca de RGB ↔ hexadecimal
En CSS usas rgb(r,g,b); en diseño, #RRGGBB. Pega cualquiera y sincroniza canales R/G/B con hex.
Cada canal es 0–255 (un byte). Hex usa dos dígitos por canal en sRGB opaco (sin alpha aquí).
Qué puedes hacer
Canales 0–255
R, G y B son independientes. Sin gamut amplio declarado, se asume sRGB.
Pares #RRGGBB
255→FF, 128→80. #F80 expande a #FF8800 en CSS. Mayúsculas/minúsculas no cambian el color.
A mano
- RGB→hex: dos dígitos hex por canal (A–F para 10–15).
- hex→RGB: tres pares; decimal = alto×16 + bajo.
- Ej.: #3B82F6 → rgb(59, 130, 246).
Fuera de alcance
- Alpha (rgba, #RRGGBBAA)
- HSL, OKLCH, etc.
- CMYK o Display P3
Casos de uso
RGB a hex
rgb(255,128,0) o sliders → #FF8000 para variables CSS o Tailwind.
hex a rgb()
#3B82F6 → rgb(59,130,246) para SCSS o estilos inline.
DevTools y tokens
Unifica paleta cuando DevTools muestra rgb y el design system usa hex.
Limpiar cadenas legacy
Normaliza #RGB, # faltante o rgb con espacios.
Preguntas frecuentes
- ¿RGB y hex en línea?
- Pega rgb() o #RRGGBB o edita campos; copia el formato que necesites.
- ¿RGB a código hex?
- Tres canales 0–255 → #RRGGBB, p. ej. naranja #FF8000.
- ¿hex a rgb()?
- FF8000 o #FF8000 → rgb(255,128,0); al mover un canal cambia el hex.
- ¿hex vs rgb()?
- Mismo sRGB; hex compacto en PDFs, rgb() claro al retocar un canal.
- ¿Qué es sRGB?
- Espacio por defecto en la web salvo color(display-p3…).
- ¿#FF0000 = rgb(255,0,0)?
- Sí, rojo puro.
- ¿#RGB corto?
- Expándelo a seis dígitos o usa rgb(255,0,0).
- ¿Un canal a hex?
- 10 decimal → 0A; editar R/G/B actualiza #RRGGBB.
Ejemplos RGB ↔ hex
rgb(255, 255, 255)Blanco — #FFFFFFrgb(59, 130, 246)Azul — #3B82F6#6366F1Índigo — rgb(99, 102, 241)