Convertidor de color HEX a RGB

¿Qué es un código de color HEX?

Un código de color HEX es una cadena alfanumérica de seis caracteres utilizada en diseño web y gráficos digitales para representar un color específico.#RRGGBB, donde cada par de dos caracteres codifica la intensidad de uno de los tres colores primarios aditivos <unk> rojo (RR), verde (GG) y azul (BB) <unk> utilizando la notación hexadecimal (base 16).00(intensidad cero) aFF(intensidad máxima, equivalente a 255 en decimal).

Los códigos HEX se originaron de la necesidad de definir colores en HTML y CSS sin depender de palabras clave de color nombradas.rgb(), hsl(), yoklch(), HEX sigue siendo la notación más utilizada en el desarrollo de front-end, transferencias de diseño y pautas de marca. Prácticamente todos los selectores de color en herramientas como Figma, Sketch, Adobe Photoshop y Canva muestran un valor HEX por defecto.

El número total de colores únicos representables con códigos HEX de seis dígitos es de 16.777.216 (256 × 256 × 256). Esto a menudo se conoce como "True Color" o "color de 24 bits", que coincide con la profundidad de color de la mayoría de las pantallas modernas. Cada canal recibe 8 bits (un byte), y tres canales juntos producen 24 bits de datos de color.

Los códigos HEX no son sensibles a las mayúsculas y minúsculas, por lo que#ff8000y#FF8000Algunas guías de estilo prefieren mayúsculas para la legibilidad, mientras que los minificadores CSS a menudo sacan minúsculas para guardar bytes <unk> aunque en la práctica la diferencia es insignificante.

Cómo convertir HEX a RGB paso a paso

Convertir un código de color HEX a su equivalente RGB es sencillo. El proceso consiste en dividir la cadena de seis caracteres en tres pares y convertir cada par de hexadecimal (base 16) a decimal (base 10).

1. Quita el símbolo del hash.Si el código HEX comienza con#Por ejemplo,#1A2B3Cse convierte1A2B3C.
2. Se dividen en tres pares.Divide la cadena restante en tres grupos de dos caracteres:1A, 2B, 3C.
3. Convierta cada par en decimal.Utilizar el sistema de valores posicionales hexadecimales en el que el primer dígito se multiplica por 16 y se añade el segundo dígito:
   • Rojo:1A→ (1 × 16) + 10 =26
   • En verde:2B→ (2 × 16) + 11 =43
   • El azul:3C→ (3 × 16) + 12 =60
4. Escribe el valor RGB.Combinar los tres valores decimales:rgb(26, 43, 60).

Los dígitos hexadecimales y sus equivalentes decimales son: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Memorizar A a través de F es la única parte que difiere de la aritmética decimal estándar.

Para la conversión programática, la mayoría de los lenguajes ofrecen funciones integradas.parseInt("1A", 16)las devoluciones26En Python,int("1A", 16)CSS mismo maneja ambos formatos de forma nativa, por lo que la conversión es principalmente útil cuando necesita manipular canales de color individuales en el código <unk> por ejemplo, ajustando el brillo, creando gradientes programáticamente o mezclando dos colores.

Códigos HEX de 3 y 6 dígitos

CSS admite un formato abreviado de 3 dígitos HEX (#RGB) como una conveniencia cuando cada uno de los tres pares consiste en dígitos idénticos. En esta taquigrafía, cada dígito se expande duplicándolo. Por ejemplo:

• #F80se expande a#FF8800→ rgb{255, 136, 0)
• #FFFse expande a#FFFFFF→ rgb ((255, 255, 255)
• #000se expande a#000000→ rgb ((0, 0, 0)
• #09Cse expande a#0099CC→ rgb{0, 153, 204)
• #A3Fse expande a#AA33FF→ rgb{170, 51, 255)

La notación de 3 dígitos reduce el número de colores disponibles de 16.7 millones a solo 4.096 (16 × 16 × 16), por lo que no puede representar todos los colores. Se usa más comúnmente para colores simples o bien conocidos en archivos CSS donde se valora la brevedad.

CSS también admite 4 dígitos (#RGBA) y de 8 dígitos (#RRGGBBAA) Códigos HEX que incluyen un canal alfa (transparencia) El valor alfa sigue la misma lógica hexadecimal:FFes totalmente opaco y00es totalmente transparente. Por ejemplo,#FF880080representa el colorrgb(255, 136, 0)Nuestro convertidor se centra en los formatos estándar de 3 y 6 dígitos; si introduce un código con un canal alfa, procesará solo la parte RGB.

Tabla de referencia de HEX a RGB

A continuación se muestra una tabla de referencia de los colores HEX comunes y sus equivalentes RGB. Esta tabla cubre los colores más utilizados en el diseño web, los colores con nombres CSS y las opciones de paleta de marcas populares.

CSS define 147 colores nombrados en total, cada uno con un valor HEX correspondiente. Mientras que los colores nombrados son convenientes para la creación de prototipos, los proyectos profesionales suelen confiar en los valores HEX o RGB para la precisión y la consistencia en los navegadores y herramientas de diseño.

Colores de marcas populares <unk> Valores HEX y RGB

Los desarrolladores y diseñadores con frecuencia necesitan los valores exactos HEX y RGB de los colores de marcas populares para maquetas, integraciones y guías de estilo.

Las pautas de marca a menudo especifican colores en múltiples formatos (HEX, RGB, CMYK, Pantone). Al implementar colores de marca en CSS, siempre confirme los valores en la página oficial de recursos de la marca para garantizar la precisión. Los colores pueden cambiar ligeramente entre pantallas, por lo que la consistencia en el código es esencial.

Modelos de color comparados: HEX, RGB, HSL y CMYK

Comprender cuándo usar cada modelo de color le ayuda a trabajar de manera más eficiente en diferentes herramientas y medios:

HEX y RGB son matemáticamente idénticos<unk> representan el mismo espacio de color utilizando una notación diferente. La conversión entre ellos es una traducción simple de base-16 a base-10 sin pérdida de precisión o diferencias de gama. HSL, por otro lado, es una transformación de RGB en un sistema de coordenadas cilíndrico que facilita el razonamiento sobre el matiz, la saturación y la claridad de forma independiente. CMYK es un modelo de color sustractivo utilizado en la impresión y no puede representar todos los colores RGB (y viceversa), por lo que las conversiones entre RGB y CMYK son aproximadas.

En el CSS moderno (Nivel 4), elcolor()función y nuevos espacios de color comooklch()ydisplay-p3Sin embargo, HEX y RGB siguen siendo la línea de base para la compatibilidad web y son compatibles con todos los navegadores en uso hoy en día.

El uso de HEX y RGB en CSS y JavaScript

Los valores HEX y RGB son válidos en CSS y producen resultados idénticos.

Declaraciones CSS:

/* HEX notation */
body { background-color: #1A2B3C; }
/* RGB notation */
body { background-color: rgb(26, 43, 60); }
/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }
/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

Funciones de conversión de JavaScript:

// HEX to RGB
function hexToRgb(hex) {
const h = hex.replace(’#’, ‘’);
return {
r: parseInt(h.substring(0, 2), 16),
g: parseInt(h.substring(2, 4), 16),
b: parseInt(h.substring(4, 6), 16)
};
}

// RGB to HEX
function rgbToHex(r, g, b) {
return ‘#’ + [r, g, b]
.map(v => v.toString(16).padStart(2, ‘0’))
.join(’’).toUpperCase();
}

Cuando se trabaja con la API HTML Canvas, los colores a menudo se deben establecer como cadenas."#FF8000"y“rgb(255, 128, 0)"trabajo parafillStyleystrokeStyleSin embargo, elgetImageData()El método devuelve datos de píxeles como una matriz de 0<unk>255 enteros (RGBA), haciendo de RGB el formato natural para la manipulación a nivel de píxeles.

En las propiedades personalizadas de CSS (variables), los valores HEX se almacenan comúnmente por simplicidad:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

Este patrón de almacenar los valores de canal RGB sin procesar como una variable CSS es una técnica popular que le permite aplicar la opacidad dinámicamente sin convertir entre formatos en tiempo de ejecución.

Accesibilidad y contraste de color

La conversión de HEX a RGB es a menudo el primer paso en el cálculo de las relaciones de contraste de color para el cumplimiento de la accesibilidad.Cantidad totalpara el texto normal, yEs de 3:1para el texto grande (18px+ negrita o 24px+ regular).

La fórmula de la relación de contraste requiere laluminancia relativade cada color, que se calcula a partir de valores RGB lineales. Los pasos son:

1. Convierta HEX en RGB (0<unk>255 por canal).
2. Normalice cada canal a 0<unk>1 dividiendo por 255.
3. Aplicar la fórmula de linearización sRGB: si el valor es ≤ 0,04045, dividir por 12,92; de lo contrario calcular ((valor + 0,055) / 1,055) ^ 2.4.
4. Se calculará la luminancia: L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
5. Calcule la relación de contraste entre dos colores: (L1 + 0,05) / (L2 + 0,05) donde L1 es el color más claro.

Como puede ver, los valores RGB son la entrada esencial para cada cálculo de contraste de accesibilidad. Herramientas como el Comprobador de contraste WebAIM, el selector de colores Chrome DevTools y el escáner de accesibilidad Axe realizan esta conversión internamente.

Para los diseñadores, una regla rápida: el texto oscuro en un fondo claro (o viceversa) con una diferencia de luminancia de al menos 125 y una diferencia de color de al menos 500 (usando la suma de diferencias absolutas a través de canales R, G, B) generalmente pasará los estándares WCAG AA.