¿Qué es Generador de Códigos de Color CSS?

Un generador de códigos de color CSS que convierte cualquier color a todos los formatos compatibles con CSS: HEX, RGB, RGBA, HSL, HSLA, OKLCH y colores con nombre de CSS. Selecciona un color visualmente o introduce cualquier formato y obtén todos los demás al instante, con una comprobación de contraste WCAG.

Escribe un código hexadecimal, arrastra el selector de color, ajusta los deslizadores RGB o pega una cadena rgb() o hsl() existente. La herramienta calcula el resto de formatos en directo, incluido OKLCH para paletas perceptualmente uniformes, y localiza el color CSS con nombre más parecido (147 entradas de la lista del W3C). Los valores alfa solo aparecen cuando bajas la opacidad por debajo del 100%. Un panel de contraste muestra el ratio WCAG sobre blanco y negro para que veas de un vistazo si el color se lee bien como texto.

Cómo usar

1. Selecciona un color usando el selector visual o introduce un valor en cualquier formato compatible (HEX, RGB, HSL).
2. Visualiza el color en todos los formatos CSS de forma simultánea, con copiado en un solo clic para cada formato.
3. Ajusta la opacidad con el control deslizante alfa para obtener valores RGBA y HSLA, y luego copia el código CSS que necesitas.

Cuándo usar

• Pasar el hex que te da la diseñadora al formato que pide tu framework CSS.
• Montar una paleta y necesitar los valores HSL para sacar tonos más claros y más oscuros.
• Añadir transparencia a un color de marca para overlays, sombras o estados hover.

Resultado

Un desarrollador frontend elige el naranja de su marca #F97316 y obtiene al instante rgb(249, 115, 22), hsl(25, 95%, 53%) y todos los demás formatos para utilizarlos de forma coherente en toda su hoja de estilos.

Preguntas frecuentes

¿Por qué a veces el campo de color con nombre aparece vacío?

CSS solo trae 147 colores con nombre y tu hex tiene que coincidir exactamente con uno. Casi cualquier color de marca cae entre dos valores con nombre, lo cual es normal. El campo sirve sobre todo para verificar colores estándar como tomato o steelblue.

¿Cuándo conviene usar HSL en lugar de HEX o RGB?

HSL se ajusta más fácil a mano: subir la luminosidad en 10 te da un tono más claro y mover el matiz 30 grados te lleva por la rueda de color. Quien diseña escalas suele preferir HSL. RGB y HEX ocupan algo menos en la hoja de estilos final.

El deslizador de opacidad ¿cambia el color o solo la transparencia?

Solo cambia el canal alfa. Los valores de rojo, verde y azul no se mueven. Por eso rgba(255, 0, 0, 0.5) sobre fondo blanco se ve rosa: es el mismo rojo, mezclado al 50% con lo que hay detrás.

¿Estos valores CSS funcionan en todos los navegadores?

HEX, RGB, RGBA, HSL, HSLA y los nombres tienen soporte universal desde hace 15 años, hasta IE11. OKLCH también se genera aquí y funciona en todo lo actual: Chrome, Firefox, Safari y Edge desde 2023, así que mantén un respaldo en hex o rgb() si aún apuntas a motores muy antiguos.

¿Cómo consigo el hex de un color que veo en una web?

Pulsa Tomar de la pantalla para abrir el cuentagotas y haz clic en cualquier píxel de tu pantalla —una página, una imagen, una maqueta— y ese color se carga al instante. (El cuentagotas funciona en Chrome, Edge u Opera; en Safari o Firefox, saca el hex con el cuentagotas de tu sistema operativo y pégalo en el campo HEX.) De cualquier forma obtienes todos los formatos equivalentes y las variantes con opacidad de una vez.

Herramientas relacionadas