Cómo funciona
El conversor de HEX a RGB pasa los valores de color hexadecimales de CSS (#FF5733 o #F53) a su equivalente en RGB (rgb(255, 87, 51)) y te muestra el color con una muestra visual.
El hexadecimal y el RGB son las dos formas más habituales de escribir un color en CSS. El hexadecimal es más compacto (#FF5733), pero el RGB se lee mejor (ves enseguida qué canal domina) y hace falta cuando necesitas manipular canales por separado o usar rgba() para la transparencia.
Cómo se usa: escribe o pega un valor hexadecimal, con o sin la almohadilla, en formato de tres caracteres (#ABC), de seis (#AABBCC) o de ocho con alfa (#AABBCCFF). Los valores RGB aparecen al instante junto a una muestra del color. También verás los valores HSL y HSB/HSV como referencia, además de la función rgb() lista para pegar en CSS.
Forma abreviada de tres dígitos: #ABC se expande a #AABBCC, duplicando cada dígito. Así, #F53 se convierte en #FF5533, es decir, rgb(255, 85, 51).
Canal alfa: el hexadecimal de ocho dígitos (#AABBCCDD) incluye la opacidad en los dos últimos dígitos. Se convierte en rgba(R, G, B, A), donde A es el alfa expresado como decimal entre 0 y 1.
Chuleta de formatos: HEX (#FF5733) = RGB (255, 87, 51) = HSL (11°, 100 %, 60 %). Los tres describen el mismo color; cuál usar depende del contexto: hexadecimal para los tokens de diseño, RGB cuando manipulas canales en JavaScript y HSL para ajustar colores por programación (girar el tono, cambiar la saturación o la luminosidad).
Preguntas frecuentes
- El de tres dígitos (#ABC) es una forma abreviada en la que cada dígito se duplica: #ABC equivale a #AABBCC. Para poder abreviar, los tres pares tienen que ser dígitos repetidos. El de seis dígitos es la forma completa y sirve para cualquier color.
- El hexadecimal de ocho dígitos (#RRGGBBAA) añade la opacidad en los dos últimos: FF es totalmente opaco, 80 es un 50 % de transparencia y 00 es totalmente transparente. Se corresponde con rgba(R, G, B, A), donde A es el alfa entre 0 y 1.
- No. #ff5733 y #FF5733 son el mismo color. La herramienta acepta los dígitos hexadecimales tanto en mayúscula como en minúscula.
- HSL (tono, saturación y luminosidad) resulta más intuitivo para crear variaciones de un color: para aclararlo, sube la luminosidad; para apagarlo, baja la saturación; y para encontrar su complementario, súmale 180° al tono. Usa HSL cuando necesites manipular colores por programación.
¿Qué diferencia hay entre el hexadecimal de tres y el de seis dígitos?
¿Qué significa el canal alfa en un hexadecimal de ocho dígitos?
¿Los códigos hexadecimales distinguen mayúsculas de minúsculas?
¿Qué es HSL y cuándo conviene usarlo en vez de RGB?
Scrollshot — Full Page Screenshot & Annotate
Scrolls the page for you, captures it viewport by viewport and stitches the slices into one seamless image — then opens an editor so you can crop, annotate and blur before saving.