Diseño web y CSS
Convierte un color de un archivo de diseño o de un selector de capturas de pantalla en el código hexadecimal que necesita tu hoja de estilos.
Convertidor de RGB a HEX: convierte valores RGB en códigos hexadecimales y códigos hexadecimales en RGB, con vista previa en tiempo real.
Introduce los valores de rojo, verde y azul, elige un color o pega un código hexadecimal y visualiza todos los formatos a la vez: HEX, RGB y HSL. Una vista previa en tiempo real y una comprobación del contraste te muestran qué color de texto queda mejor. Todo funciona directamente en tu navegador.
Convertir un color
Los colores se guardan en tu navegador
Elige o escribe un color
Aa
Códigos de colores
HEX
–RGB (CSS)
–HSL (CSS)
––El mejor color para el texto
–Relación de contraste
La guía
Guía de conversión de RGB a HEX: códigos de color, HSL y contraste
Descubre cómo funcionan los códigos de colores y cómo elegir combinaciones de colores que sean fáciles de distinguir.
¿Para qué sirve un conversor de RGB a HEX?
Las pantallas reproducen todos los colores mezclando luz roja, verde y azul. El sistema RGB representa esta mezcla mediante tres números del 0 al 255. El sistema HEX representa esos mismos tres números en base 16 como un código abreviado, por ejemplo, #1F3A5F, que es el que suelen utilizar el CSS, las herramientas de diseño y las guías de marca.
Introduce los tres números, elige un color con el selector o pega un código hexadecimal. Todos los formatos se actualizan al mismo tiempo, y además obtienes una versión en HSL y una indicación de qué color de texto se lee mejor sobre él.
¿Por qué la gente convierte RGB a HEX?
Marca y documentos
Mantén la coherencia en los colores de la marca tanto en el archivo del logotipo como en una presentación de diapositivas y en una página web.
Accesibilidad
Comprueba qué color de texto queda bien sobre un fondo determinado y fíjate en la relación de contraste antes de publicar.
Cómo se convierte el RGB en HEX
Cada uno de los tres números se convierte en un valor de dos dígitos en base 16 y, a continuación, se unen los tres pares.
RGB: 31, 58, 95
31 = 1F (1 × 16 + 15)
58 = 3A (3 × 16 + 10)
95 = 5F (5 × 16 + 15)
HEX: #1F3A5F
El sistema de base 16 utiliza los dígitos del 0 al 9 y las letras de la A a la F, donde la A equivale a 10 y la F a 15. Un código abreviado como #FA0 es una forma resumida: cada dígito se duplica, por lo que equivale a #FFAA00.
Colores habituales en RGB y HEX
| Color | RGB | HEX |
|---|---|---|
| Negro | 0, 0, 0 | #000000 |
| Blanco | 255, 255, 255 | #FFFFFF |
| Rojo | 255, 0, 0 | #FF0000 |
| Verde | 0, 255, 0 | #00FF00 |
| Azul | 0, 0, 255 | #0000FF |
| Amarillo | 255, 255, 0 | #FFFF00 |
| Naranja | 255, 165, 0 | #FFA500 |
| Gris | 128, 128, 128 | #808080 |
Cómo utilizar el conversor de RGB a HEX
- Escribe los valores de rojo, verde y azul, o haz clic en la muestra de color para utilizar el selector de colores.
- O bien, pega un código hexadecimal en el campo «Hex» para hacer lo contrario.
- Lee los códigos HEX, RGB y HSL, y comprueba la relación de contraste y el mejor color para el texto.
- Pulsa en «Copiar» junto al formato que necesites.
Consejos sencillos para trabajar con colores
- Para que el texto sea legible, procura que la relación de contraste sea de al menos 4,5:1 para el texto normal y de 3:1 para el texto grande.
- Los códigos hexadecimales no distinguen entre mayúsculas y minúsculas, por lo que #1f3a5f y #1F3A5F son del mismo color.
- El símbolo # al principio es necesario en CSS, pero aquí es opcional. Puedes pegar los códigos con o sin él.
- Las pantallas y las impresoras muestran los colores de forma diferente, por lo que es posible que el color impreso no coincida con el que ves en pantalla.
Limitaciones y privacidad
Privacidad
Los colores se convierten en tu navegador. No se envía ni se almacena nada en nuestro servidor. Solo se guarda en tu dispositivo la opción de minúsculas.
Limitaciones
La herramienta funciona con colores sRGB estándar de 8 bits, de 0 a 255 por canal. No admite transparencia (RGBA o hexadecimal de 8 dígitos), CMYK para impresión ni espacios de color de amplia gama.
Preguntas frecuentes
Preguntas frecuentes sobre el conversor de RGB a HEX
¿Cómo convierto RGB a HEX?
Introduce los valores de rojo, verde y azul, cada uno entre 0 y 255. La herramienta convierte cada número en dos dígitos en base 16 y los une, de modo que 31, 58, 95 se convierte en #1F3A5F.
¿Cómo convierto un valor HEX a RGB?
Pega el código hexadecimal en el campo «Hex». Los tres valores RGB se rellenan automáticamente. Por ejemplo, #FF8800 corresponde a 255, 136, 0.
¿El código hexadecimal necesita el signo #?
No. Puedes escribirlo con o sin el símbolo #, y los códigos cortos como #FA0 también funcionan. El resultado siempre incluye el símbolo #, por lo que está listo para CSS.
¿Qué significan los tres valores RGB?
Son los valores de la luz roja, verde y azul, que van de 0 (ninguna) a 255 (máxima intensidad). 0, 0, 0 es negro y 255, 255, 255 es blanco.
¿Para qué sirve el valor HSL?
El modelo HSL describe un color mediante el tono, la saturación y la luminosidad. A menudo resulta más fácil ajustarlo manualmente, por ejemplo, para aclarar un poco un color, y funciona directamente en CSS.
¿Qué me indica la relación de contraste?
Muestra el grado de contraste del texto en negro o blanco con respecto al color de fondo. Una relación de 4,5:1 o superior es el mínimo habitual para el texto normal según las directrices de accesibilidad WCAG.
¿Puedo incluir transparencia?
Aquí no. Esta herramienta solo admite colores opacos, sin canal alfa. Para aplicar transparencia, añade tú mismo un valor alfa en rgba() en tu CSS.
¿Se guardan o se envían mis datos a algún sitio?
No. La conversión se realiza en tu navegador y no sale nada de tu dispositivo. Solo se guarda tu elección de minúsculas para la próxima vez.
De las personas que utilizan esta herramienta
Opiniones
Cargando opiniones…
Sigue adelante
Más herramientas en la caja
La página de inicio incluye docenas de herramientas gratuitas más que no requieren una clave API.
Generador de UUID
Generar UUID aleatorios de tipo v4, v7 y v5 de forma masiva.
Abrir herramientaEliminador de espacios en blanco
Elimina los espacios, las tabulaciones y las líneas en blanco sobrantes.
Abrir herramientaConvertidor de unidades
Convierte unidades de longitud, peso, velocidad y mucho más.
Abrir herramientaConvertidor de números romanos
Convierte números a números romanos y viceversa.
Abrir herramienta