Cargando aplicación...
Preparando tu experiencia meskeIA
Convierte entre HEX, RGB, HSL y CMYK al instante
rgb(46, 134, 171)hsl(198, 58%, 43%)cmyk(73%, 22%, 0%, 33%)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 → #256A8A (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.