Conversor de colores/ HEX · RGB · HSL · HSV · CMYK

Convierte entre formatos de color HEX, RGB, HSL, HSV y CMYK — con selector de color en vivo y paleta de tonos.

HEX
Tonos
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSV
hsv(217, 76%, 96%)
CMYK
cmyk(76%, 47%, 0%, 4%)

¿Esta herramienta resolvió tu problema?

Ejemplos de código

CSS / Tailwind
/* CSS custom properties */
:root {
  --color-primary: #3b82f6;         /* HEX */
  --color-primary-rgb: 59, 130, 246; /* RGB values only */
}

/* Usage */
.button {
  background: var(--color-primary);
  color: hsl(210, 40%, 98%);        /* HSL */
  border: 1px solid rgb(59 130 246 / 30%); /* CSS 4 syntax */
}

/* Tailwind config */
// tailwind.config.js
colors: { brand: '#3b82f6' }
JavaScript
// HEX → RGB
function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}

// RGB → HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('');
}

// npm: chroma-js (full-featured)
import chroma from 'chroma-js';
chroma('#3b82f6').rgb()   // [59, 130, 246]
chroma('#3b82f6').hsl()   // [0.58, 0.89, 0.60]
chroma.scale(['white','#3b82f6']).colors(6)
Python
import colorsys

# HEX → RGB
hex_str = '#3b82f6'
rgb = tuple(int(hex_str[i:i+2], 16) for i in (1, 3, 5))
# (59, 130, 246)

# RGB → HSL (0-1 range)
r, g, b = (v / 255 for v in rgb)
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f"hsl({h*360:.0f}, {s*100:.0f}%, {l*100:.0f}%)")

# pip install colour-science
import colour
colour.sRGB_to_XYZ([0.23, 0.51, 0.96])
Swift / iOS
import SwiftUI

// HEX to Color
extension Color {
  init(hex: String) {
    let hex = hex.trimmingCharacters(
      in: .alphanumerics.inverted)
    var int = UInt64()
    Scanner(string: hex).scanHexInt64(&int)
    let r = Double((int >> 16) & 0xFF) / 255
    let g = Double((int >> 8)  & 0xFF) / 255
    let b = Double( int        & 0xFF) / 255
    self.init(red: r, green: g, blue: b)
  }
}

Color(hex: "#3b82f6")

Preguntas frecuentes

¿Cuál es la diferencia entre HEX, RGB y HSL?
HEX (hexadecimal) es el formato web más común — ej. #FF5733 — y es esencialmente RGB en base 16. RGB especifica la intensidad de los canales rojo, verde y azul (0–255). HSL usa Tono (Hue), Saturación y Luminosidad (Lightness), más intuitivo para ajustar colores.
¿Cuál es la diferencia entre HSV y HSL?
HSV (Tono, Saturación, Valor) y HSL (Tono, Saturación, Luminosidad) son modelos de color orientados a la percepción humana. Diferencia clave: en HSV, V=100% es el tono puro más brillante. En HSL, L=50% da el tono más puro — L=100% es blanco, L=0% es negro. Photoshop y Figma usan HSB (≈ HSV); CSS usa HSL.
¿Qué es CMYK y por qué no se usa en la web?
CMYK (Cian, Magenta, Amarillo, Negro/Key) es el modelo de color de la industria de impresión, basado en mezcla sustractiva de tintas. La web y las pantallas usan RGB aditivo (mezcla de luz). CSS no soporta CMYK nativamente — los diseñadores convierten de RGB a CMYK antes de enviar a imprenta.
¿Cómo uso colores HEX en CSS?
CSS acepta: #RRGGBB de 6 dígitos (ej. #3b82f6), abreviatura #RGB de 3 dígitos (ej. #38f = #3388ff), y #RRGGBBAA de 8 dígitos para alfa (ej. #3b82f680 = 50% de opacidad). Los navegadores modernos también soportan la sintaxis CSS Color Level 4 color(srgb ...).
¿Cómo se calcula el contraste de color?
WCAG recomienda una relación de contraste de al menos 4,5:1 (AA) o 7:1 (AAA) para texto sobre fondo. El contraste se calcula usando la luminancia relativa: se linealizan los valores RGB y luego se calcula (L1 + 0,05) / (L2 + 0,05) donde L1 es la luminancia del color más claro.
¿Cómo se generan las escalas de tonos (Shades)?
La paleta de tonos mantiene fijos el Tono (H) y la Saturación (S) originales mientras varía la Luminosidad HSL (L) en 6 valores (90% a 15%). Esto es similar a cómo Tailwind CSS genera sus paletas de colores — útil para construir rápidamente una escala de colores de marca.