1
Introduce cualquier formato
HEX, RGB, HSL, HSV o CMYK
2
Ve los 5 formatos
Todos se actualizan en tiempo real
3
Copia y usa
Copia para CSS, diseno, impresion
5 formatos — HEX, RGB, HSL, HSV, CMYK — edita cualquiera, todos se actualizan en vivo
HEX, RGB, HSL, HSV o CMYK
Todos se actualizan en tiempo real
Copia para CSS, diseno, impresion
| Formato | Ejemplo | Se Usa En |
|---|---|---|
| HEX | #3B82F6 | CSS, HTML, diseno web — el formato de color universal para la web |
| RGB | rgb(59, 130, 246) | Pantallas, monitores, diseno digital — color aditivo (luz) |
| HSL | hsl(217, 91%, 60%) | CSS, sistemas de diseno — manipulacion intuitiva basada en tono |
| HSV | hsv(217, 76%, 96%) | Selectores de color, edicion de imagenes (GIMP, Photoshop) — modelo artistico |
| CMYK | cmyk(76, 47, 0, 4) | Impresion, publicacion — color sustractivo (tinta sobre papel) |
RGB es color aditivo: se parte de negro (sin luz) y se anade luz roja, verde y azul para crear colores. A maxima intensidad, R+G+B = blanco. Las pantallas, telefonos y proyectores usan RGB. CMYK es color sustractivo: se parte de papel blanco y se sustrae luz superponiendo capas de tinta cian, magenta, amarilla y negra. C+M+Y teoricamente deberian producir negro, pero en realidad generan un marron oscuro — de ahi la tinta K (Key/Negro) separada. RGB tiene una gama mas amplia: muchos colores vivos de pantalla (verdes neon, azules electricos) no se pueden reproducir fisicamente con tintas CMYK. Al disenar tanto para pantalla como para impresion, revisa siempre la vista previa CMYK para evitar cambios de color decepcionantes en la impresora.
HSL (Tono, Saturacion, Luminosidad) es el modelo de color nativo de CSS. Los colores puros y vivos se situan en L=50%. L=0% es negro; L=100% es blanco. Esto hace que HSL sea perfecto para generar tintes (anadir blanco: aumentar L), sombras (anadir negro: disminuir L) y tonos (reducir S). HSV (Tono, Saturacion, Valor) es el modelo artistico, usado por los selectores de color de Photoshop y GIMP. Los colores puros se situan en V=100%. V=0% es negro. La saturacion de HSV se comporta mas como la mezcla de pintura — anadir blanco reduce la saturacion en HSV pero solo cambia la luminosidad en HSL. Ninguno es "correcto" — son herramientas diferentes para tareas diferentes.
Introduce tu codigo HEX (ej., #3B82F6) en el campo HEX. RGB se actualiza al instante: rgb(59, 130, 246). Cada par de digitos hex = un canal: 3B=59 (R), 82=130 (G), F6=246 (B).
Introduce los valores RGB — HSL se actualiza automaticamente. HSL es mas intuitivo: Tono (0-360 deg) = posicion en la rueda de color, Saturacion (0-100%) = intensidad, Luminosidad (0-100%) = brillo. Los colores puros estan en L=50%.
RGB = luz aditiva (pantalla). CMYK = tinta sustractiva (impresion). RGB tiene una gama de colores mas amplia — los colores vivos de pantalla no se pueden reproducir exactamente en impresion. Este conversor muestra el equivalente CMYK teorico, pero los resultados de impresion reales dependen de los perfiles de impresora/papel/tinta.
Ambos usan Tono y Saturacion pero difieren en el brillo: Luminosidad HSL va de negro a color puro a blanco (puro al 50%). Valor HSV va de negro a color puro (puro al 100%). HSV se usa en selectores de color (GIMP/Photoshop); HSL es mejor para generar tintes y sombras en CSS.
Haz clic en la muestra de vista previa del color para abrir el selector de color nativo de tu navegador. Selecciona cualquier color visualmente y los 5 formatos se actualizan al instante. Tambien puedes hacer clic en 'Color Aleatorio' para explorar combinaciones de colores.