FAQ de Conversor de color (HEX, RGB, HSL)

¿Cómo convierto HEX a RGB?

Para convertir un código de color hex a RGB, divide la cadena hexadecimal de seis dígitos #RRGGBB en tres pares y, a continuación, convierte cada par de hexadecimal (base 16) a decimal (base 10).

Ejemplo: #FF5733

FF = 255 (Rojo)
57 = 87 (Verde)
33 = 51 (Azul)
Resultado: rgb(255, 87, 51)

Para el hex abreviado (#F53), expande primero cada dígito a un par: #F53 se convierte en #FF5533. Los dígitos se duplican: F se expande a FF, 5 se expande a 55, 3 se expande a 33.

El hex de ocho dígitos (#RRGGBBAA) funciona de la misma manera, pero con un par adicional para el canal alfa. #FF573380 añade 80 (128, o aproximadamente 50 % de opacidad) para el canal alfa.

Para conversiones instantáneas, usa nuestro conversor de colores. Maneja todos los formatos, incluidos el hex corto y el largo, con y sin alfa.

¿Cuál es la diferencia entre RGB y RGBA?

RGB define un color usando los canales rojo, verde y azul. RGBA es RGB con un canal alfa adicional que controla la opacidad. El valor alfa va de 0.0 (totalmente transparente) a 1.0 (totalmente opaco).

rgb(255, 0, 0)         /* Rojo totalmente opaco */
rgba(255, 0, 0, 0.5)  /* Rojo al 50 % de opacidad */

En CSS moderno (Nivel 4 de Color CSS), el alias rgba() ya no es necesario. La función rgb() ahora acepta un canal alfa opcional:

rgb(255 0 0 / 0.5)  /* Sintaxis moderna, rojo al 50 % de opacidad */

Todos los navegadores modernos admiten esta sintaxis. La función heredada rgba() funciona en todas partes y no se eliminará, pero usar rgb() con la sintaxis de barra es el enfoque recomendado para el código nuevo.

¿Cómo convierto RGB a HSL?

Convertir RGB a HSL implica tres pasos:

Normaliza los valores RGB al rango de 0 a 1 (divide por 255)
Encuentra el mínimo y el máximo de los tres valores normalizados: el promedio del mínimo y el máximo es la luminosidad (L)
Calcula el tono y la saturación según qué canal sea el máximo y la diferencia entre el máximo y el mínimo

La fórmula varía según cuál canal de color domine:

Si el rojo es el máximo: tono = (verde - azul) / (máximo - mínimo)
Si el verde es el máximo: tono = 2 + (azul - rojo) / (máximo - mínimo)
Si el azul es el máximo: tono = 4 + (rojo - verde) / (máximo - mínimo)
La saturación depende de la luminosidad: si L > 0.5, saturación = (máximo - mínimo) / (2 - máximo - mínimo); de lo contrario, saturación = (máximo - mínimo) / (máximo + mínimo)

El cálculo no es trivial y es fácil equivocarse, por lo que se recomienda usar una herramienta de conversión de colores para obtener resultados instantáneos.

¿Por qué mis colores se ven diferentes en distintas pantallas?

La apariencia del color varía entre pantallas por varias razones:

Calibración de la pantalla — La mayoría de las pantallas de consumo no están calibradas en color. Los valores de fábrica varían ampliamente en brillo, contraste y temperatura de color.

Diferencias de gama de color — Las distintas pantallas admiten distintos rangos de color. sRGB es el estándar web, pero muchos teléfonos y portátiles modernos admiten DCI-P3 (un 25 % más amplio). Un color fuera de la gama sRGB se ve correcto en una pantalla de gama amplia, pero se recorta o se desplaza en una pantalla estándar.

Tecnología de pantalla — Las pantallas OLED producen negros más profundos y colores más saturados que las pantallas LCD. Los paneles IPS tienen mejor precisión de color que los paneles TN.

Ángulo de visión — Los colores cambian cuando se ven desde un ángulo, especialmente en pantallas de gama baja.

Brillo y luz ambiental — Una pantalla al 50 % de brillo en una habitación oscura se ve diferente de la misma pantalla al 100 % de brillo bajo luz solar directa.

Para minimizar las diferencias: trabaja en el espacio de color sRGB, calibra tu monitor con un calibrador de hardware y prueba tus diseños en varios dispositivos antes de publicarlos.

¿Para qué sirve el modelo de color HSL?

HSL (Tono, Saturación, Luminosidad) es ideal para la manipulación programática del color. Su principal ventaja es que un solo canal lleva la información del "color" (el tono), mientras que los otros dos controlan la apariencia independientemente del valor del tono.

Lo que HSL hace fácil:

Paletas de colores — Mantén el mismo tono y varía la luminosidad y la saturación para crear una escala de color completa
Estados de hover y activo — Cambia la luminosidad en un porcentaje fijo: hsl(220, 80%, 50%) -> hsl(220, 80%, 60%)
Modo oscuro — Reduce la luminosidad de todos los colores: resta un 30 % de la luminosidad de cada color
Temas — Intercambia los valores de tono para generar esquemas de color completamente nuevos a partir de la misma estructura de saturación/luminosidad
Estados deshabilitados — Reduce la saturación para desaturar elementos: hsl(220, 80%, 50%) -> hsl(220, 30%, 70%)

Para lo que HSL no es bueno:

HSL no es perceptualmente uniforme. Dos colores con el mismo valor de luminosidad (por ejemplo, hsl(60, 100%, 50%) — amarillo brillante y hsl(240, 100%, 50%) — azul puro) tienen un brillo percibido muy diferente. Para la manipulación del color perceptualmente uniforme, usa OKLCH en su lugar.

¿Qué significa el # en los colores hex?

El prefijo # (signo de almohadilla o numeral) le indica al analizador CSS que los caracteres siguientes representan un valor de color hexadecimal. Es la notación estándar en CSS y HTML para los códigos de color hex.

El formato completo es #RRGGBB o #RRGGBBAA:

| Componente | Significado | Ejemplo (#FF5733) | |-----------|---------|---------------------| | # | Prefijo hex | Indicador requerido | | RR | Canal rojo | FF (255) | | GG | Canal verde | 57 (87) | | BB | Canal azul | 33 (51) |

En HTML, el # también se usa para enlaces de ancla (<a href="#section">), pero en un contexto CSS o en el atributo style, siempre indica un color hex. HTML también admite los "colores con nombre" heredados (140 nombres predefinidos como red, blue, rebeccapurple) que no requieren el #.

¿Qué es la gama de color y por qué es importante?

La gama de color es el rango de colores que un dispositivo puede mostrar o que un espacio de color puede representar. Piensa en ella como el "vocabulario" de colores disponible para una pantalla o un formato de archivo.

Gamas de color comunes, de la más pequeña a la más amplia:

| Espacio de color | Tamaño relativo | Dónde se usa | |-------------|--------------|------------| | sRGB | Línea base | Estándar web, la mayoría de los monitores, todos los navegadores | | Adobe RGB | ~50 % más amplio | Fotografía profesional, impresión | | DCI-P3 | ~25 % más amplio | Teléfonos modernos, Macs, muchos portátiles | | Rec. 2020 | ~75 % más amplio | Televisión HDR, pantallas de gama alta |

Por qué es importante: un color fuera de la gama de una pantalla no se puede mostrar con precisión. El dispositivo recortará el color al valor más cercano dentro de la gama, o lo aproximará. Por eso un rojo intenso y vibrante de un archivo de diseño puede verse apagado o turbio en la pantalla de un portátil estándar.

Para diseño web: diseña siempre en sRGB o comprueba que tus colores sean seguros para sRGB. OKLCH y el espacio de color display-p3 te permiten apuntar a gamas más amplias, pero debes proporcionar una alternativa sRGB para las pantallas estándar.

¿Cuál es la diferencia entre hex y hex con alfa?

El hex estándar (#FF5733) usa seis dígitos y no tiene canal alfa: el color siempre es totalmente opaco. El hex con alfa (#FF573380) usa ocho dígitos, añadiendo dos dígitos hex más al final para el canal alfa (opacidad).

Valores alfa en hex:

| Par hex | Decimal | Opacidad | |----------|---------|---------| | 00 | 0 | Totalmente transparente | | 80 | 128 | ~50 % de opacidad | | FF | 255 | Totalmente opaco |

Ejemplos:

#FF5733     — Rojo anaranjado sólido, sin transparencia
#FF5733FF   — Mismo color, totalmente opaco (FF redundante)
#FF573380   — Mismo color, 50 % transparente
#FF573300   — Mismo color, completamente invisible

También existe el hex abreviado de cuatro dígitos con alfa: #F538 se expande a #FF553388 (50 % de opacidad).

Soporte de navegadores: el hex de ocho dígitos es compatible con todos los navegadores modernos. Para el soporte de navegadores heredados (Internet Explorer), usa rgba() en su lugar.

¿Cómo elijo colores accesibles para mi sitio web?

Sigue este proceso paso a paso para construir un sistema de color accesible:

1. Empieza con un color de marca primario. Elige un tono que represente tu marca y luego usa HSL u OKLCH para crear una escala completa desde muy claro (fondos) hasta muy oscuro (texto).

2. Configura tu texto casi negro. El texto del cuerpo sobre fondos blancos debe estar entre #1A1A1A y #333333. Nunca uses negro puro (#000000) sobre blanco puro: causa fatiga visual en algunos lectores. El gris oscuro sobre blanco proporciona una mejor legibilidad.

3. Verifica cada par de primer plano y fondo. Cada combinación de texto y fondo debe cumplir los estándares WCAG:

Texto normal: mínimo de 4.5:1 (WCAG AA)
Texto grande: mínimo de 3:1 (WCAG AA)
Apunta a 7:1 en el texto del cuerpo (WCAG AAA)

4. Nunca uses el color como único diferenciador. Los enlaces deben tener subrayado (no solo un color diferente). Los estados de error deben incluir iconos o texto. Los gráficos deben usar patrones o etiquetas.

5. Prueba con simuladores de daltonismo. La deuteranopía (rojo-verde) es el tipo más común. Asegúrate de que tu diseño funcione sin percepción del color.

6. Verifica en escala de grises. Si tu diseño pierde significado al convertirse a escala de grises, estás confiando demasiado en el color para transmitir información.

Usa nuestro conversor de colores para comprobar al instante los índices de contraste entre dos colores cualesquiera.