Luminosidad
L = (M + m) ÷ 2
Media del canal más fuerte y del más débil.
Convertidor de colores
Cambia rápidamente un color entre HEX, RGB y HSL y recupera los valores correspondientes para tus proyectos web.
- Portapapeles
Color
Código HEX (#3366FF, #36F), rgb(51, 102, 255) o hsl(225, 100%, 60%), con transparencia opcional.
Color no reconocido: escribe un código HEX, un valor rgb() o hsl().
Resultado
¿Te ha resultado útil esta herramienta?
¿Cómo funciona esta herramienta?
Un mismo color se escribe de varias formas en CSS: #3366FF, rgb(51, 102, 255) o hsl(225, 100%, 60%). Este conversor lee cualquiera de estas notaciones y muestra al instante las otras dos, transparencia incluida, para pasar de una maqueta al código, ordenar una hoja de estilos o conocer el tono y la luminosidad de un código hexadecimal.
Escribe un color en el campo: código HEX de 3, 4, 6 u 8 cifras (#36F, #3366FF80), rgb() o rgba() con comas o espacios, o hsl() y hsla() con el tono en grados, vueltas (turn) o radianes. También puedes pulsar la muestra para elegir un color en el selector del sistema.
La conversión es inmediata. HEX aparece en mayúsculas, RGB en enteros de 0 a 255 y HSL con un decimal como máximo. Una transparencia inferior al 100 % añade un cuarto byte al código HEX y da rgba() y hsla(). Los valores fuera de rango se ajustan al límite: rgb(300, 0, 0) pasa a rgb(255, 0, 0).
Cada resultado tiene su botón Copiar. Los nombres de color CSS como «red» o «navy» no se reconocen: escribe su código.
Cómo utilizar esta herramienta
Escribe el color
Introduce un código HEX, un valor rgb() o hsl(), o elígelo en el selector.
Lee las equivalencias
Los campos HEX, RGB y HSL se actualizan a cada pulsación; un mensaje avisa si la entrada no se reconoce.
Copia el resultado
Pulsa el icono Copiar junto a la notación que necesitas.
De RGB a HSL
Los tres canales se llevan a 0–1; su máximo M, su mínimo m y su diferencia Δ = M − m dan la luminosidad, la saturación y el tono.
Saturación
S = Δ ÷ (1 − |2L − 1|)
Nula cuando los tres canales son iguales (gris).
Tono
H = 60° × ((G − B) ÷ Δ mod 6, (B − R) ÷ Δ + 2 o (R − G) ÷ Δ + 4)
La fórmula depende del canal más fuerte; el resultado se lleva a 0–360°.
- R, G, B
- canales rojo, verde y azul divididos por 255
- M, m
- mayor y menor de los tres canales
- Δ
- diferencia M − m
Casos de uso
De la maqueta al CSS
Convierte el código HEX de una maqueta en hsl() para crear variantes más claras u oscuras con facilidad.
Ordenar una hoja de estilos
Unifica colores escritos unas veces en HEX y otras en rgb() dentro de un mismo proyecto.
Entender un color
Consulta el tono, la saturación y la luminosidad de un código para saber por qué se ve apagado o demasiado vivo.
Ejemplos
Un azul de marca en tres notaciones
33, 66 y FF en hexadecimal valen 51, 102 y 255. Domina el azul: tono 225°, saturación máxima, luminosidad 60 %.
Entrada
#3366FFResultado
HEX #3366FF; RGB rgb(51, 102, 255); HSL hsl(225, 100%, 60%)Un color HSL con transparencia
El color HSL se convierte en canales de 0 a 255 redondeados y la opacidad del 50 % pasa a ser el byte 80 en hexadecimal (128 de 255).
Entrada
hsl(210 70% 50% / 50%)Resultado
HEX #2680D980; RGB rgba(38, 128, 217, 0.5); HSL hsla(210, 70%, 50%, 0.5)Consejos y buenas prácticas
- Para aclarar u oscurecer un color sin cambiar su tono, pasa a HSL y modifica solo la luminosidad.
- Un código HEX de 3 cifras duplica cada cifra: #36F equivale a #3366FF.
- El HEX de 8 cifras (#RRGGBBAA) funciona en los navegadores actuales, pero algunos programas de diseño solo admiten 6.
- Pasar de HSL a HEX redondea los canales a enteros: dos valores HSL muy parecidos pueden dar el mismo código HEX.
Fuentes y referencias
- W3C, CSS Color Module Level 4 (se abre en una pestaña nueva)Página en inglés
Preguntas frecuentes
¿Qué notaciones puedo escribir?
HEX de 3, 4, 6 u 8 cifras, con o sin #, rgb() y rgba(), hsl() y hsla(), con comas o con la sintaxis moderna de espacios y «/» para la opacidad.
¿Se aceptan nombres de color como «tomato»?
No. Solo se leen notaciones numéricas; busca el código HEX del nombre de color y escríbelo.
¿Por qué el tono vale 0 en un gris?
Un gris no tiene tono: sus tres canales son iguales, la saturación es nula y el tono se fija en 0 por convención.
¿Cómo se convierte la transparencia?
La opacidad de 0 a 1 se multiplica por 255 para formar el cuarto byte del código HEX: 0,5 da 80 y 1 elimina el byte.
¿La conversión es exacta?
HEX y RGB son equivalentes bit a bit. HSL se calcula sin redondeos intermedios y se muestra con un decimal; al pasar a HEX cada canal se redondea a entero.
¿Se envía el color a algún sitio?
No. La conversión es un cálculo en tu navegador, sin ninguna petición de red.
Herramientas relacionadas
Continúa con estas herramientas
Herramientas similares o complementarias a esta.
Herramientas similares
Crea una paleta complementaria, análoga, triádica o monocromática a partir de un color.
Imágenes y diseño gráficoUsar esta herramienta
Extrae una paleta de colores dominante de una imagen sin subirla a un servidor.
Imágenes y diseño gráficoUsar esta herramienta
Previsualiza una imagen como puede percibirse con distintos tipos de daltonismo.
Imágenes y diseño gráficoUsar esta herramienta
También te puede interesar
ReferenciaConceptos y tecnologíasPrincipiante
RGB, HEX o HSL: ¿qué notación elegir?
Comprende cómo RGB, HEX y HSL describen colores sRGB para elegir una notación CSS legible y convertir valores sin confusiones.
31 de agosto de 202612 min
GuíaBuenas prácticasPrincipiante
Contraste WCAG: ¿cómo hacer accesibles los colores?
Comprende los umbrales de contraste WCAG, mide una combinación de colores y corrige los casos que dificultan la lectura o el uso de una interfaz.
31 de agosto de 202625 min
GuíaBuenas prácticasIntermedio
Optimizar un archivo SVG sin alterar su apariencia
Aprende a optimizar SVG de forma segura: elimina datos innecesarios, simplifica el XML, reduce precisión, limpia estilos y valida que el resultado visual no cambie.
31 de agosto de 202621 min
GuíaFormatosPrincipiante
SVG: comprender el formato vectorial
Descubre cómo un archivo SVG describe formas, utiliza viewBox y se integra en una página web, con buenas prácticas de responsive, accesibilidad y seguridad.
31 de agosto de 202630 min