Cargando aplicación...
Preparando tu experiencia meskeIA
Convierte entre HEX, RGB, HSL y CMYK al instante
71 colores
Los nombres de pigmento y de uso común (ocre, lapislázuli, terracota…) no tienen un código oficial único: el valor que se ofrece es el convencional, y cada muestra lo indica al posar el cursor. No se incluyen nombres de carta comercial de pintura porque cada fabricante los mezcla distinto.
rgb(46, 134, 171)hsl(198, 58%, 43%)cmyk(73%, 22%, 0%, 33%)Un archivo de color plano, listo para usar como fondo de pantalla, fondo de una diapositiva o base de un diseño. Se genera en tu navegador: el color no se envía a ningún servidor.
Se guardará como color-2E86AB-1920x1080.png— el código va en el nombre para que puedas reconocer el archivo después.
Estándar para desarrollo web. Compacto y fácil de usar en CSS
Pantallas y monitores. Ideal para manipular canales individuales
Intuitivo para diseñadores. Fácil ajustar tono, saturación y brillo
Impresión profesional. Necesario para materiales impresos
Aprende cuándo usar cada formato, diferencias técnicas, casos de uso y mejores prácticas
Cada formato de color tiene sus ventajas y contextos ideales de uso. Entender sus diferencias te ayudará a elegir el más apropiado para tu proyecto.
Ejemplos concretos de cuándo elegir cada formato según tu proyecto
Formato recomendado: HEX o RGB
Por qué: HEX es más compacto (#2E86AB vs rgb(46,134,171)). RGB es mejor si necesitas manipular opacidad con rgba().
background: #2E86AB;
color: rgb(46, 134, 171);
border: rgba(46, 134, 171, 0.5);Formato recomendado: HSL
Por qué: Es intuitivo para crear variaciones de un color (más claro/oscuro, más saturado). Ideal para sistemas de diseño.
Color base: hsl(198, 58%, 43%)
Hover: hsl(198, 58%, 35%) /* -8% brillo */
Disabled: hsl(198, 20%, 43%) /* -38% saturación */Formato recomendado: CMYK
Por qué: Las impresoras profesionales usan tintas CMYK. RGB/HEX pueden verse diferentes al imprimir.
CMYK: C73 M22 Y0 K33
(Especificar en InDesign, Illustrator)
Validar con prueba de color físicaFormato recomendado: HEX o RGB
Por qué: Ambos formatos son nativos. iOS usa UIColor(red, green, blue), Android usa #HEX.
iOS: UIColor(red: 46/255, green: 134/255, blue: 171/255)
Android: #2E86AB
React Native: '#2E86AB' o 'rgb(46,134,171)'Web/App: HEX, RGB o HSL
Impresión profesional: CMYK
Diseño/prototipado: HSL (más intuitivo)
Manipulación dinámica: RGB o HSL
Si usas CSS moderno: HSL es más legible y fácil de ajustar.
Si necesitas opacidad: RGB + alpha → rgba(r, g, b, 0.5).
Si entregas a imprenta: Convierte a CMYK y valida con prueba física.
Elige UN formato principal para tu sistema de diseño.
Documenta todos los colores en ese formato (ej: variables CSS con HSL).
Solo convierte cuando sea técnicamente necesario (ej: CMYK para impresión).
Web: Verifica en diferentes navegadores y dispositivos.
Impresión: Solicita prueba de color física antes de tirada masiva.
Apps: Prueba en dispositivos reales (colores varían según pantalla).
Las pantallas usan RGB (luz), mientras que las impresoras usanCMYK (tinta). Son modelos de color diferentes y no pueden reproducir exactamente los mismos colores.
Ejemplo práctico:
• Un azul brillante RGB (0, 100, 255) se verá más apagado en CMYK
• Los colores neón/fluorescentes de RGB son imposibles de replicar en CMYK
• CMYK tiene un "gamut" (rango de colores) menor que RGB
Solución: Si diseñas para impresión, trabaja en CMYK desde el inicio en Illustrator/InDesign. Siempre pide una prueba física de color antes de la tirada final.
Son el mismo modelo de color, solo varía la notación:
• HEX: #2E86AB (hexadecimal, compacto)
• RGB: rgb(46, 134, 171) (decimal, más legible)
• Equivalencia: 2E₁₆ = 46₁₀, 86₁₆ = 134₁₀, AB₁₆ = 171₁₀
Cuándo usar cada uno:
• HEX: Código CSS limpio y compacto
• RGB: Si necesitas manipular canales individuales o usar rgba() para transparencia
HSL representa el color de forma más intuitiva para humanos:
• H (Hue): Tono del color (0-360°) - Rojo=0°, Verde=120°, Azul=240°
• S (Saturation): Intensidad (0-100 %): 0 % = gris, 100 % = color puro
• L (Lightness): Brillo (0-100 %): 0 % = negro, 50 % = color, 100 % = blanco
Ejemplo práctico: Para crear un hover state más oscuro, solo reduces L: hsl(198, 58%, 43%) → hsl(198, 58%, 35%). En HEX sería #2E86AB → #256E8D (no tan obvio qué cambió).
No directamente. Los navegadores solo entienden RGB, HEX y HSL nativamente. CMYK requiere conversión.
Si tienes un color CMYK que necesitas en web:
1. Usa este conversor para obtener el HEX/RGB equivalente
2. Ten en cuenta que puede haber diferencias visuales (CMYK → RGB no es perfecto)
3. Si es crítico, compara visualmente el resultado en pantalla
Un espacio de color define el rango de colores posibles. Los más comunes son:
• sRGB: Estándar web, menor rango de colores
• Adobe RGB: Mayor rango, ideal para fotografía profesional
• Display P3: Usado en pantallas Apple modernas, más colores que sRGB
Importante: Un mismo HEX puede verse diferente en diferentes espacios de color. Para web, trabaja siempre en sRGB para consistencia.
Verifica el contraste entre texto y fondo según WCAG:
• Nivel AA: Ratio mínimo 4,5:1 (texto normal), 3:1 (texto grande)
• Nivel AAA: Ratio mínimo 7:1 (texto normal), 4,5:1 (texto grande)
Herramientas recomendadas:
• WebAIM Contrast Checker (online)
• Chrome DevTools (Lighthouse audit)
• Figma plugins: Stark, Color Contrast Checker
Define colores en variables para cambiarlos fácilmente: --primary: #2E86AB;
Crea una guía de estilo con todos los colores y sus usos específicos (botones, fondos, textos).
Asegúrate de cumplir WCAG 2.1 AA (mínimo 4,5:1) para texto sobre fondo.
Es más fácil crear hovers, disabled states y escalas de color ajustando S y L.
Los colores varían según la pantalla. Verifica en móviles, tablets y monitores diferentes.
Elige UN formato principal para tu proyecto y úsalo en toda la documentación.