Elige un color o escribe cualquier valor HEX, RGB o HSL y obtén todos los formatos al instante, más fragmentos CSS listos para copiar.
Todas las conversiones ocurren localmente en tu navegador. Nada sale de tu dispositivo.
color: #3498db;background-color: rgb(52, 152, 219);background-color: hsl(204, 70%, 54%);Cada color en pantalla es solo un conjunto de números en un sistema de coordenadas. Los tres sistemas de abajo describen los mismos colores de formas distintas: un código HEX, una tripleta RGB y una tripleta HSL para #3498db son exactamente el mismo azul. Conocer los tres facilita leer especificaciones de diseño, depurar hojas de estilos y generar variantes.
HEX es una notación compacta en base 16 para valores RGB (#rrggbb). RGB mezcla los canales rojo, verde y azul, cada uno de 0 a 255. HSL describe el color por matiz, saturación y luminosidad, lo cual coincide con cómo las personas piensan en color y facilita ajustar matices y tonos.
Los tres funcionan en todos los navegadores modernos. HEX es el más corto y el más común para pasar el diseño al desarrollo. RGB es conveniente cuando necesitas construir un valor rgba() con alfa. HSL es lo mejor cuando quieres ajustar el brillo o la intensidad de un color sin cambiar su matiz base.
Los códigos cortos como #f0a son una abreviatura: cada dígito se duplica, así que #f0a se expande a #ff00aa. Esta herramienta acepta HEX de 3 y 6 dígitos, con o sin el # inicial.
El matiz (0–360°) se proyecta sobre la rueda de color, y luego la saturación y la luminosidad escalan el color hacia el gris o el negro. Las fórmulas estándar de HSV a RGB hacen los cálculos, y el resultado se redondea al entero 0–255 más cercano para cada canal.
Sí. Mientras escribes, la herramienta analiza cada campo y solo actualiza el muestrario y los demás campos cuando el valor es válido. Los números fuera de rango, los formatos mal formados o los componentes faltantes simplemente dejan el último color válido en su lugar hasta que corrijas la entrada.
Cuando ya hayas elegido un color, sigue adelante: convierte el valor con el Convertidor de HEX a RGB, saca una paleta directamente de una foto con el Cuentagotas de colores de imagen y comprueba cómo se ve el resultado para todas las personas en el Simulador de daltonismo antes de publicarlo.
Si acabas de usar Convertidor de colores, los siguientes pasos naturales son Generador de paletas de color, Verificador de contraste de color, Generador de gradientes CSS, o explora todas las herramientas de Herramientas de archivos.