¿Qué es el Conversor de colores CSS?

Es una herramienta en el navegador que lee cualquier HEX, rgb()/rgba(), hsl()/hsla() o nombre de color CSS común y lo convierte en HEX, RGB y HSL junto con una vista previa de muestra en vivo.

¿Cómo convierto HEX a RGB y HSL con esta herramienta?

Pega un código hex como #3b82f6 en el cuadro de Color, y el Conversor de colores CSS muestra al instante los valores rgb() y hsl() coincidentes en las filas de resultados.

¿El Conversor de colores CSS admite transparencia y canales alfa?

Sí. rgba(), hsla() y hex de 8 dígitos con un valor alfa se analizan todos, y el alfa se conserva en cada formato de salida.

¿Puedo pegar un nombre de color CSS en lugar de un código?

Sí, nombres estándar como blue, teal, gold e indigo se reconocen y se convierten a HEX, RGB y HSL.

¿Acepta códigos hex abreviados?

Sí, los hex abreviados de 3 y 4 dígitos como #f00 o #f00a se expanden automáticamente antes de la conversión.

¿Los valores de color que ingreso se suben a algún lugar?

No. El Conversor de colores CSS se ejecuta por completo en tu navegador, así que los valores que ingresas se procesan de forma local y nunca salen de tu dispositivo.

Conversor de colores CSS

Convierte entre HEX, RGB y HSL con una muestra en vivo.

Cada color que ingresas se convierte de forma local en tu navegador, y nada se sube a un servidor.

¿Revisas la legibilidad? Prueba el Comprobador de contraste.

Acerca de Conversor de colores CSS

Este conversor de colores css transforma cualquier valor de color en HEX, RGB y HSL a la vez, con una vista previa de muestra en vivo para que veas el tono exacto mientras escribes. Pega un código hex, un valor rgb() o hsl(), o un nombre de color CSS común como blue, teal o gold, y normaliza al instante la entrada en los tres formatos. También maneja la transparencia, incluidos rgba(), hsla() y hex de 8 dígitos con canal alfa. Ya sea que hagas cálculos de hex a rgb para un token de diseño, conviertas de rgb a hex para una hoja de estilos, o revises un valor hsl mientras ajustas una paleta, mantiene todos los formatos sincronizados. Pensado para desarrolladores front-end, diseñadores e ingenieros de QA que manejan formatos de color a diario. Todo se ejecuta de forma local en tu navegador, así que los valores que ingresas nunca salen de tu dispositivo.

Características

Convierte HEX, RGB y HSL a la vez desde una sola entrada
Reconoce nombres de color CSS comunes como blue, teal y gold
Admite transparencia mediante rgba(), hsla() y hex alfa de 8 dígitos
La vista previa de muestra de color en vivo se actualiza al instante mientras escribes
Acepta códigos hex abreviados de 3 y 4 dígitos
Normaliza los valores de canal RGB en porcentaje y de 0 a 255
Muestra un error en línea claro cuando un valor no se puede analizar
Se procesa de forma local en tu navegador y sin rastreo

Cómo usar Conversor de colores CSS

Escribe o pega un color en el cuadro de entrada de Color.
Usa un código hex, rgb(), hsl() o un nombre de color CSS como blue.
Lee los valores HEX, RGB y HSL convertidos en las filas de resultados.
Revisa la muestra junto a la entrada para previsualizar el color exacto.

Ejemplo

Entrada

#3b82f6

Salida

HEX  #3b82f6
RGB  rgb(59, 130, 246)
HSL  hsl(217, 91%, 60%)

Un valor hex convertido a RGB y HSL con una muestra en vivo coincidente.

Errores comunes y solución de problemas

Aparece "No se pudo analizar ese color" tras escribir un valor. — Usa un código hex válido, rgb()/rgba(), hsl()/hsla() o un nombre de color CSS admitido; los caracteres sueltos o los paréntesis faltantes rompen el análisis.
Un nombre de color CSS como "salmon" no se reconoce. — Solo se admite un conjunto seleccionado de nombres comunes. Ingresa el valor hex o rgb() equivalente en su lugar.
El alfa se pierde tras la conversión. — Incluye el canal alfa en la entrada, como rgba(0,0,0,0.5) o un hex de 8 dígitos como #00000080, y se trasladará a todos los formatos.
Los valores RGB por encima de 255 o los porcentajes se ven mal. — Los canales se limitan al rango válido; pasa números de 0 a 255 o porcentajes de 0% a 100% para obtener el resultado esperado.

Preguntas frecuentes

¿Qué es el Conversor de colores CSS?: Es una herramienta en el navegador que lee cualquier HEX, rgb()/rgba(), hsl()/hsla() o nombre de color CSS común y lo convierte en HEX, RGB y HSL junto con una vista previa de muestra en vivo.
¿Cómo convierto HEX a RGB y HSL con esta herramienta?: Pega un código hex como #3b82f6 en el cuadro de Color, y el Conversor de colores CSS muestra al instante los valores rgb() y hsl() coincidentes en las filas de resultados.
¿El Conversor de colores CSS admite transparencia y canales alfa?: Sí. rgba(), hsla() y hex de 8 dígitos con un valor alfa se analizan todos, y el alfa se conserva en cada formato de salida.
¿Puedo pegar un nombre de color CSS en lugar de un código?: Sí, nombres estándar como blue, teal, gold e indigo se reconocen y se convierten a HEX, RGB y HSL.
¿Acepta códigos hex abreviados?: Sí, los hex abreviados de 3 y 4 dígitos como #f00 o #f00a se expanden automáticamente antes de la conversión.
¿Los valores de color que ingreso se suben a algún lugar?: No. El Conversor de colores CSS se ejecuta por completo en tu navegador, así que los valores que ingresas se procesan de forma local y nunca salen de tu dispositivo.

Herramientas relacionadas

Verificador de contraste — Comprueba la relación de contraste WCAG y si pasa AA/AAA entre dos colores.
Formateador de CSS / SCSS — Embellece o minifica CSS/SCSS/LESS, ordena propiedades y quita duplicados.
Optimizador de SVG — Minifica SVG: elimina comentarios, metadatos y restos del editor, y colapsa espacios.
Conversor de base numérica — Convierte enteros entre binario, octal, decimal y hexadecimal.
Escapar / Desescapar HTML — Escapa y desescapa caracteres especiales y entidades HTML.
Formateador de JS / TS — Embellece o minifica JavaScript, TypeScript y JSX/TSX con opciones de Prettier.
Formateador de HTML — Embellece o minifica HTML, formatea CSS/JS en línea y previsualiza el resultado.