Conversor de Colores

Convierte colores entre los formatos RGB, HEX, HSL, HSV y CMYK

Color Converter
H: 0°
S: 100%
L: 50%
H: 0°
S: 100%
V: 100%
C: 0%
M: 100%
Y: 100%
K: 0%

Guía Completa de Conversión de Colores

Guía completa sobre modelos de color, formatos, conversiones y aplicaciones profesionales de diseño

Entendiendo los Modelos de Color

Modelos de Color Digital

  • •HEX: hexadecimal de 6 dígitos (#RRGGBB), 16,7 millones de colores
  • •RGB: Rojo/Verde/Azul (0–255 cada uno), modelo aditivo para pantallas
  • •RGBA: RGB + transparencia Alfa (0–1)
  • •HSL: Tono (0–360°)/Saturación/Luminosidad (0–100%)
  • •HSV/HSB: Tono/Saturación/Valor (alternativa a HSL)

Modelos de Color para Impresión e Industria

  • •CMYK: Cian/Magenta/Amarillo/Negro (0–100%), sustractivo para impresión
  • •Pantone (PMS): colores spot estandarizados para consistencia de marca
  • •LAB (CIELAB): independiente del dispositivo, perceptualmente uniforme
  • •LCH: Luminosidad/Croma/Tono (perceptual)
  • •XYZ: triestímulo CIE 1931, estándar científico

Referencia de Formatos de Color

Conversión HEX y RGB

  • •HEX a RGB: analizar pares (#FF6B35 → R=255, G=107, B=53)
  • •RGB a HEX: convertir cada canal a hex de 2 dígitos
  • •Código corto CSS: #RGB (3 dígitos) = #RRGGBB
  • •Alfa en HEX: 8 dígitos #RRGGBBAA
  • •Ejemplo: Blanco = #FFFFFF = rgb(255,255,255)

Relación HSL y RGB

  • •Tono: 0°=rojo, 60°=amarillo, 120°=verde, 180°=cian, 240°=azul, 300°=magenta
  • •Saturación 0% = gris, 100% = color pleno
  • •Luminosidad 0% = negro, 50% = normal, 100% = blanco
  • •Rojo: HSL(0°,100%,50%) = RGB(255,0,0)
  • •Azul: HSL(240°,100%,50%) = RGB(0,0,255)

Relación CMYK y RGB

  • •RGB→CMYK: K=1−máx(R,G,B); C=(1−R−K)/(1−K); M=(1−G−K)/(1−K); Y=(1−B−K)/(1−K)
  • •Rojo puro RGB(255,0,0) = CMYK(0%,100%,100%,0%)
  • •Negro puro RGB(0,0,0) = CMYK(0%,0%,0%,100%)
  • •Blanco RGB(255,255,255) = CMYK(0%,0%,0%,0%)

Aplicaciones Profesionales

Diseño Web y de UI

  • •Sintaxis de color CSS (hex, rgb(), hsl(), oklch())
  • •Tokens de color para modo oscuro
  • •Relaciones de contraste WCAG (4.5:1 para texto normal)
  • •Variables de color de marca en sistemas de diseño
  • •Valores hex para Tailwind/CSS-in-JS
  • •Creación de degradados con rotación de tono HSL

Diseño Gráfico e Identidad de Marca

  • •Coincidencia de color Pantone para identidad de marca
  • •Conversión CMYK para impresión offset
  • •Negro rico vs. negro estándar para áreas grandes
  • •Perfiles de color (sRGB vs CMYK) para entrega de archivos
  • •Configuración de sobreimpresión
  • •Separaciones de color spot

Fotografía y Video

  • •Gradación de color en espacios Rec.709 / Rec.2020
  • •Color LAB para edición perceptual
  • •Creación de LUT (Tabla de Búsqueda)
  • •Referencia de tono de piel (aproximadamente tono 180–220 en HSL)
  • •Calibración de color con X-Rite ColorChecker
  • •Contenido HDR (gama más amplia)

Visualización de Datos

  • •Paletas secuenciales (de claro a oscuro) para datos ordenados
  • •Paletas divergentes para dos extremos
  • •Paletas cualitativas para categorías
  • •Paletas seguras para daltónicos (evitar solo rojo-verde)
  • •Uniformidad perceptual en espacio LAB
  • •Accesibilidad en gráficos (WCAG 1.4.1)

Mejores Prácticas de Conversión de Color

Precisión y Espacios de Color

  • •HEX/RGB son sRGB por defecto — especifica el espacio de color para gama amplia
  • •La conversión LAB requiere punto blanco (estándar D65)
  • •Los valores CMYK dependen del perfil de color ICC
  • •La correspondencia de colores entre pantallas varía según la calibración del monitor
  • •Siempre comprueba los colores de impresión antes de la producción final

Consideraciones de Accesibilidad

  • •Relación de contraste mínima WCAG AA: 4.5:1 (texto normal), 3:1 (texto grande)
  • •WCAG AAA: 7:1 (normal), 4.5:1 (grande)
  • •Aproximadamente el 8% de los hombres tiene daltonismo rojo-verde — prueba con Coblis u otros
  • •No dependas solo del color para transmitir información
  • •Prueba con conversión a escala de grises

Ejemplos de Color por Categoría

Colores Seguros Web y Comunes

  • •Blanco: #FFFFFF = rgb(255,255,255) = hsl(0°,0%,100%)
  • •Negro: #000000 = rgb(0,0,0)
  • •Rojo: #FF0000 = rgb(255,0,0) = hsl(0°,100%,50%)
  • •Azul marino: #000080 = rgb(0,0,128) = hsl(240°,100%,25%)
  • •Naranja: #FFA500 = rgb(255,165,0)
  • •Gris: #808080 = rgb(128,128,128)
  • •Verde: #008000 = rgb(0,128,0)

Colores de Marca

  • •Rojo Coca-Cola: #F40009 (CMYK 0/100/100/4)
  • •Azul Facebook: #1877F2
  • •Azul Google: #4285F4
  • •Inicio de degradado Instagram: #F58529
  • •Naranja Amazon: #FF9900
  • •Verde Spotify: #1DB954
  • •Negro Apple: #1D1D1F

Ejemplos de Sistemas de Diseño

  • •Tailwind blue-500: #3B82F6 = hsl(217°,91%,60%)
  • •Tailwind red-500: #EF4444
  • •Material primary blue: #1976D2
  • •Bootstrap primary: #0D6EFD
  • •shadcn/ui foreground: #09090B
  • •Texto silenciado: #71717A
  • •Destructivo: #DC2626

Preguntas Frecuentes

¿Cuál es la diferencia entre RGB y CMYK?▾
RGB (Rojo, Verde, Azul) es un modelo aditivo para pantallas que mezcla luz. RGB completo (255,255,255) = blanco. CMYK (Cian, Magenta, Amarillo, Negro) es un modelo sustractivo para impresión que mezcla tintas. CMYK completo (100,100,100,100) = casi negro. Los colores vívidos en pantalla pueden verse apagados al imprimir porque la tinta no puede reproducir toda la gama RGB.
¿Por qué el color de mi pantalla se ve diferente al imprimir?▾
Las pantallas emiten luz con el modelo RGB, que tiene una gama más amplia que el modelo CMYK usado por las impresoras. Los colores brillantes y saturados — azules eléctricos, verdes neón, naranjas vívidos — a menudo no pueden reproducirse con tinta en papel. Convierte siempre a CMYK y haz una prueba de impresión antes de finalizar artes de marca o packaging.
¿Qué es la notación de color HEX?▾
Un código de color HEX es un número hexadecimal de 6 dígitos precedido por #, como #FF5733. Los dos primeros dígitos son el canal rojo (00–FF), los dos del medio el verde, y los dos últimos el azul. Cada par representa 0–255 en base 16. Los códigos cortos como #F00 son abreviaturas de #FF0000. Un HEX de 8 dígitos (#RRGGBBAA) incluye el canal alfa (opacidad).
¿Cómo verifico el contraste de color para accesibilidad?▾
Usa la fórmula de relación de contraste WCAG: (L1 + 0.05) / (L2 + 0.05), donde L1 y L2 son las luminancias relativas de los dos colores. WCAG AA requiere 4.5:1 para texto normal y 3:1 para texto grande (18pt+ o 14pt negrita). WCAG AAA requiere 7:1 para texto normal. Herramientas como WebAIM Contrast Checker lo calculan al instante.
¿Cuál es la diferencia entre HSL y HSV?▾
Ambos usan Tono y Saturación, pero difieren en el tercer componente. HSL (Luminosidad) define el 50% como el color 'puro': 0% es negro, 100% es blanco, 50% es totalmente saturado. HSV (Valor/Brillo) define el 100% como el color puro: 0% siempre es negro sin importar el tono. HSL es más común en CSS y diseño web; HSV es más común en editores de imagen como Photoshop.
¿Qué formato de color debo usar para diseño web?▾
Para diseño web, HEX es el formato más usado y legible para colores estáticos. Usa hsl() en CSS cuando necesites ajustar luminosidad o tono programáticamente (ideal para tokens de diseño y temas). Usa rgba() cuando necesites transparencia. Para navegadores modernos, oklch() ofrece manipulación de color perceptualmente uniforme y se recomienda cada vez más para sistemas de diseño.