RGB ↔ hexadecimal

Edita hex o canales R/G/B—los valores se mantienen sincronizados. Pega una cadena de color completa para importar.

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

  1. RGB→hex: dos dígitos hex por canal (A–F para 10–15).
  2. hex→RGB: tres pares; decimal = alto×16 + bajo.
  3. 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 — #FFFFFF
  • rgb(59, 130, 246)Azul — #3B82F6
  • #6366F1Índigo — rgb(99, 102, 241)