Convierte un código HEX en valores RGB
Escribe un código HEX y los valores RGB aparecen mientras tecleas: #3B82F6 es rgb(59, 130, 246). El convertidor lee códigos de tres, cuatro, seis y ocho caracteres, así que también recoge la opacidad de #3B82F680. El selector bajo los campos te da los canales como 0–255 o como 0–1.
¿Cómo se convierte HEX a RGB?
Lee el código por parejas de caracteres y pasa cada pareja del sistema hexadecimal al decimal. La primera pareja es el canal rojo, la segunda el verde y la tercera el azul, y cada valor queda entre 0 y 255. El código #3B82F6 se divide en 3B, 82 y F6, lo que da rgb(59, 130, 246).
Fórmula: R, G y B son las parejas sucesivas de caracteres del código leídas como números hexadecimales.
Una pareja suelta también sale de cabeza, porque son una multiplicación y una suma. Multiplica el primer carácter por 16 y suma el segundo, teniendo en cuenta que A vale 10, B vale 11 y F vale 15. Para la pareja 3B eso da 3 × 16 + 11, o sea 59.
Algunos códigos aparecen más a menudo que otros. El negro #000000 es rgb(0, 0, 0), el blanco #FFFFFF es rgb(255, 255, 255) y el gris #808080 es rgb(128, 128, 128), justo la mitad de cada canal.
En sentido contrario el cálculo se apoya en el mismo número, con un cambio: divides el canal entre 16 y escribes el resto como segundo carácter de la pareja. El convertidor de RGB a HEX hace todo el trabajo por ti.
¿Qué es un código HEX y qué es RGB?
RGB describe un color con tres números: uno para el canal rojo, otro para el verde y otro para el azul, todos entre 0 y 255. La pantalla compone el color con luz, así que cuanto más altos son los números más brillante es el punto, y tres valores máximos dan blanco[1].
El código HEX describe ese mismo color de forma más breve. El valor de un canal cabe en el sistema hexadecimal en exactamente dos caracteres, así que el color entero ocupa seis caracteres después de la almohadilla.
En el día a día cada notación aparece en sitios distintos. El código HEX te lo dan Figma, el panel de color del gestor de contenidos y el manual de marca, porque es corto y fácil de pasar. Los valores RGB entran donde hay que calcular con el color: en el contraste según las WCAG, en la notación con transparencia y en los motores 3D.
La especificación CSS Color Level 4 admite cuatro longitudes de código: tres, cuatro, seis u ocho caracteres[2]. La versión de tres es una abreviatura en la que el navegador repite cada carácter, de modo que #123 significa lo mismo que #112233. Las versiones de cuatro y de ocho añaden la opacidad al final, donde 00 es transparencia total y FF opacidad completa.
Ambas formas describen el color en el espacio sRGB. Hewlett-Packard y Microsoft propusieron el estándar en 1996, y el W3C lo adoptó para HTML y CSS con la designación IEC 61966-2-1[3]. Por eso el mismo código da el mismo color en cualquier pantalla compatible.
Códigos HEX de los colores CSS con nombre y sus valores RGB
| Nombre en CSS | Código HEX | Valores RGB |
|---|---|---|
| black | #000000 | 0, 0, 0 |
| white | #FFFFFF | 255, 255, 255 |
| red | #FF0000 | 255, 0, 0 |
| lime | #00FF00 | 0, 255, 0 |
| blue | #0000FF | 0, 0, 255 |
| yellow | #FFFF00 | 255, 255, 0 |
| aqua | #00FFFF | 0, 255, 255 |
| fuchsia | #FF00FF | 255, 0, 255 |
| silver | #C0C0C0 | 192, 192, 192 |
| gray | #808080 | 128, 128, 128 |
| maroon | #800000 | 128, 0, 0 |
| olive | #808000 | 128, 128, 0 |
| green | #008000 | 0, 128, 0 |
| purple | #800080 | 128, 0, 128 |
| teal | #008080 | 0, 128, 128 |
| navy | #000080 | 0, 0, 128 |
| orange | #FFA500 | 255, 165, 0 |
| pink | #FFC0CB | 255, 192, 203 |
En CSS la palabra green designa un color con la mitad del brillo del canal verde, y un 255 completo en ese canal lleva el nombre lime.
Códigos HEX de interfaces: valores RGB y notación 0–1
| Código HEX | Valores RGB | Notación 0–1 |
|---|---|---|
| #FAFAFA | 250, 250, 250 | 0.9804, 0.9804, 0.9804 |
| #F5F5F5 | 245, 245, 245 | 0.9608, 0.9608, 0.9608 |
| #333333 | 51, 51, 51 | 0.2, 0.2, 0.2 |
| #1A1A1A | 26, 26, 26 | 0.102, 0.102, 0.102 |
| #3B82F6 | 59, 130, 246 | 0.2314, 0.5098, 0.9647 |
| #EF4444 | 239, 68, 68 | 0.9373, 0.2667, 0.2667 |
| #EE3333 | 238, 51, 51 | 0.9333, 0.2, 0.2 |
| #22C55E | 34, 197, 94 | 0.1333, 0.7725, 0.3686 |
La notación fraccionaria sale de dividir cada canal entre 255, así que 128 da 0.502 y 255 da un 1 exacto.
¿Qué caracteres se añaden al código HEX para fijar la opacidad?
| Opacidad | Caracteres del código | Valor del canal | Opacidad exacta |
|---|---|---|---|
| 100% | FF | 255 | 100% |
| 90% | E6 | 230 | 90,20% |
| 80% | CC | 204 | 80% |
| 75% | BF | 191 | 74,90% |
| 70% | B3 | 179 | 70,20% |
| 60% | 99 | 153 | 60% |
| 50% | 80 | 128 | 50,20% |
| 40% | 66 | 102 | 40% |
| 30% | 4D | 77 | 30,20% |
| 25% | 40 | 64 | 25,10% |
| 20% | 33 | 51 | 20% |
| 10% | 1A | 26 | 10,20% |
| 5% | 0D | 13 | 5,10% |
| 0% | 00 | 0 | 0% |
El canal de opacidad tiene 256 pasos, igual que cualquier canal de color. Caen justo en un porcentaje redondo los valores cada 20%, es decir 0, 20, 40, 60, 80 y 100. Las demás parejas quedan dos décimas de punto porcentual al lado del valor de la primera columna y en pantalla se ven igual.
¿Dónde encuentras el código HEX en el programa que usas?
Cada uno de estos programas muestra el código del elemento seleccionado, solo que en un sitio distinto.
Figma
Selecciona la capa y haz clic en la muestra cuadrada de la sección Fill del panel derecho. Se abre el selector, y bajo los controles de tono y opacidad hay una lista con la que cambias la notación entre Hex, RGB, HSB, HSL y CSS. Figma muestra Hex por defecto.Photoshop
Haz doble clic en el cuadrado de color de la herramienta, abajo en la barra. En la ventana Selector de color el código está en el campo marcado con la almohadilla, debajo de los valores R, G y B.Canva
Selecciona el elemento y haz clic en el color de la barra superior. Bajo los colores del documento pulsa Añadir un color nuevo, y en el campo con la almohadilla escribes o lees el código de seis caracteres.Navegador
Haz clic derecho en el elemento y elige Inspeccionar. En el panel de estilos hay una muestra pequeña junto a cada propiedad de color, y al pulsarla con la tecla Mayús cambia la notación entre HEX, RGB y HSL.
¿Cómo se convierte HEX a RGB en Excel?
Pon el código en la celda A1 y escribe en tres celdas contiguas las fórmulas =HEX.A.DEC(EXTRAE(A1;2;2)), =HEX.A.DEC(EXTRAE(A1;4;2)) y =HEX.A.DEC(EXTRAE(A1;6;2)). Para el código #3B82F6 devuelven 59, 130 y 246.
La primera de esas funciones lee un número hexadecimal[4] y la segunda recorta del código las parejas sucesivas de caracteres. EXTRAE toma la celda, la posición del primer carácter y el número de caracteres, y como el código empieza por una almohadilla, los canales están en las posiciones 2, 4 y 6.
Copiando esas tres celdas hacia abajo conviertes una columna entera de códigos. En la versión inglesa del programa las funciones se llaman HEX2DEC y MID, y los argumentos se separan con una coma.
Fuentes
- RGB — Wikipedia
- CSS Color Module Level 4 — notación hexadecimal — W3C
- Espacio de color sRGB — Wikipedia
- HEX.A.DEC — función de Excel — Microsoft Support
Todos los valores de las tablas se calcularon a partir de las definiciones de las unidades y se comprobaron aritméticamente antes de publicarlos. Los datos históricos y los nombres de las unidades locales proceden de las fuentes indicadas arriba.
Última revisión del contenido: · redactado y verificado por el equipo de Arteon
Preguntas frecuentes sobre convertir HEX a RGB
¿#FFF y #FFFFFF son el mismo color?
Sí. La notación de tres caracteres repite cada uno, así que #FFF se despliega en #FFFFFF y #38F en #3388FF[2]. Ambos dan en RGB exactamente los mismos tres números.
¿Qué código HEX tienen el blanco y el negro?
El blanco es #FFFFFF, o sea rgb(255, 255, 255), y el negro es #000000, o sea rgb(0, 0, 0). En notación corta son #FFF y #000.
¿Qué significa la almohadilla delante del código de color?
La almohadilla abre la notación hexadecimal y le dice al navegador que los caracteres siguientes son un código de color. Ella misma no aporta ningún valor, así que el convertidor acepta el código con almohadilla y sin ella.
¿Cuántos colores se pueden describir con un código HEX?
Cada uno de los tres canales tiene 256 pasos, lo que da 16.777.216 combinaciones[3]. Un código de ocho caracteres añade además 256 pasos de opacidad.
¿Cómo se escribe la transparencia en un código HEX?
Añade al final dos caracteres de opacidad: #3B82F680 es ese mismo azul a media opacidad. El convertidor lee un código así y da el resultado como rgba(59, 130, 246, 0.5). Las parejas para los valores redondos están en la tabla de opacidad de esta página.
¿En qué se diferencian las notaciones 0–255 y 0–1?
Es el mismo color en dos escalas. CSS, Figma y los programas de diseño cuentan el canal en bytes de 0 a 255, mientras que Unity, three.js, OpenGL y matplotlib lo hacen en fracciones de 0 a 1. El selector Notación de los canales RGB bajo los campos da el resultado en la escala que necesites.
¿Se puede usar un código HEX en un trabajo de imprenta?
Una máquina de imprimir trabaja con cuatro tintas, así que un archivo de impresión describe el color en valores CMYK. Lleva los tres números obtenidos aquí al convertidor de RGB a CMYK y obtendrás las proporciones de cian, magenta, amarillo y negro.
¿Cómo se comprueba si un color tiene contraste suficiente?
Las WCAG calculan el contraste a partir de los valores de los canales, así que el trabajo empieza por convertir el código a RGB. El comprobador de contraste de colores te da la cifra final junto con los umbrales para el texto.
Ayúdanos a mejorar nuestras herramientas
¿Tienes una idea, has encontrado un error o quieres proponer una herramienta? Escríbenos: respondemos en 24 horas.