Conversor de Colores - Herramienta online gratuita

Características

HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK

Selector de color visual

Vista previa en directo

Salida como variables CSS

Cómo Usar

1. Elige un color (o haz clic en la superficie, pega un HEX, usa el cuentagotas o pulsa Espacio para uno aleatorio).

2. Todos los formatos — HEX, RGB, HSL, OKLCH — se convierten en vivo y en ambos sentidos.

3. Copia un valor suelto o todo el bloque de variables CSS; cambia la superficie para juzgar el color sobre blanco, gris u oscuro.

Sobre esta herramienta

Los diseñadores eligen colores a ojo, CSS necesita una cadena y cada herramienta habla un formato distinto. Este conversor mantiene un mismo color sincronizado en HEX, RGB, HSL y OKLCH: cambia cualquier campo o usa el selector y el resto se actualiza al instante. HEX y RGB describen los canales rojo, verde y azul; HSL describe tono, saturación y luminosidad, más fácil de ajustar a mano; OKLCH es un formato perceptual más reciente de CSS Color Level 4 en el que los pasos iguales de luminosidad se ven iguales, lo que lo hace mejor para crear paletas coherentes. Puedes copiar un solo valor o un bloque listo de propiedades personalizadas de CSS, y previsualizar el color sobre fondo blanco, gris u oscuro antes de usarlo.

Preguntas Frecuentes

¿Qué formato debo usar en CSS?

HEX y rgb() funcionan en todas partes y sirven para colores fijos. hsl() es cómodo cuando quieres retocar la luminosidad o la saturación a mano. oklch() es compatible con los navegadores actuales y es el mejor para paletas sistemáticas porque su luminosidad es perceptualmente uniforme.

¿Por qué los colores HSL con luminosidad del 50 % se ven tan distintos de brillo?

HSL es una reorganización matemática de RGB, no un modelo de la visión humana, así que un amarillo al 50 % se ve mucho más brillante que un azul al 50 %. La luminosidad de OKLCH está diseñada para coincidir con el brillo percibido, por eso se usa cada vez más en sistemas de diseño.

¿Por qué un valor convertido puede variar un poco al convertirlo de vuelta?

HEX y RGB guardan números enteros de 0 a 255, mientras que HSL y OKLCH usan decimales. El redondeo durante la conversión puede mover un canal un paso, algo que el ojo no percibe.

¿Puedo tomar un color de otra parte de la pantalla?

En los navegadores compatibles con la API EyeDropper, como Chrome y Edge de escritorio, el botón de cuentagotas te permite tomar la muestra de cualquier píxel de la pantalla. Los demás navegadores muestran en su lugar el selector de color estándar.

¿Qué contiene el bloque de variables CSS?

Lista el mismo color como propiedades personalizadas en varios formatos, por ejemplo --color-hex, --color-rgb, --color-hsl y --color-oklch, para que las pegues en :root y uses el formato que necesite tu código.