Convertidor de Formatos de Color

Convierte colores entre 18+ formatos con desglose de canales y snippets de código

Convierte colores entre 18+ formatos instantáneamente. Ingresa un color en HEX, RGB, HSL, HSV, CMYK, HWB, LAB o nombre CSS y obtén todas las conversiones con desglose de canales y snippets de código listos para copiar.

Color de Entrada

≈ mediumslateblue(≈ ΔE 24.3)

Colores Rápidos

#6366F1

mediumslateblue

🌐 Web / CSS

HEX

#6366f1

HEX8 (RGBA)

#6366f1ff

RGB

rgb(99, 102, 241)

RGBA

rgba(99, 102, 241, 1)

HSL

hsl(239, 84%, 67%)

HSLA

hsla(239, 84%, 67%, 1)

Nombre CSS

≈ ΔE 24.3

mediumslateblue

🎨 Diseño

HSV/HSB

hsv(239, 59%, 95%)

HWB

hwb(239 39% 5%)

RGB %

39%, 40%, 95%

🖨️ Impresión

CMYK

cmyk(59%, 58%, 0%, 5%)

🔬 Perceptual

CIE LAB

lab(50.1 38.69 -70.49)

LCH

lch(50.1 80.41 298.76)

💻 Código / Dev

CSS Variable

--color: #6366f1;

Tailwind

bg-[#6366f1]

Swift UIColor

UIColor(red: 0.388, green: 0.400, blue: 0.945, alpha: 1.00)

Android

Color.rgb(99, 102, 241)

RGB Decimal

0.3882, 0.4000, 0.9451

Entero

6514417

Cómo funciona

Los formatos de color son diferentes formas de representar un mismo color. Esta herramienta soporta 18+ formatos organizados en 5 categorías: Web/CSS, Diseño, Impresión, Perceptual y Código.

Formatos Web / CSS

HEX / HEX8

Formato hexadecimal de 6 dígitos (#FF5733) o 8 dígitos con alfa (#FF5733FF). El estándar en CSS y diseño web.

RGB / RGBA

Modelo aditivo de luz. Cada canal va de 0 a 255. RGBA añade transparencia (0-1). Ejemplo: rgba(255, 87, 51, 0.8)

HSL / HSLA

Tono (0°-360°), Saturación y Luminosidad (0%-100%). El formato más intuitivo para ajustar colores programáticamente. Ejemplo: hsl(11, 100%, 60%)

Nombre CSS

La herramienta detecta automáticamente el nombre CSS más cercano entre los 148 colores con nombre del estándar, mostrando la distancia ΔE.

Formatos de Diseño

HSV / HSB

Similar a HSL pero usa Valor/Brillo en lugar de Luminosidad. Es el modelo nativo de Adobe Photoshop y Figma.

HWB (Hue, Whiteness, Blackness)

Formato CSS moderno que describe colores mezclando un tono con blanco y negro. Más intuitivo que HSL para humanos. Ejemplo: hwb(11 20% 0%)

Formatos Perceptuales

CIE LAB

Espacio de color perceptualmente uniforme. L = luminosidad (0-100), a = eje verde-rojo, b = eje azul-amarillo. Usado en ciencia del color y cálculos Delta E.

LCH (Lightness, Chroma, Hue)

Versión cilíndrica de LAB. Combina la uniformidad perceptual de LAB con la intuitividad del tono. CSS Color Level 4 lo soporta nativamente.

¿Cuándo usar cada formato?

HEX: CSS, diseño web, código compacto
RGB/RGBA: Pantallas, JavaScript, canvas
HSL: Crear variaciones, ajustar tono/saturación
HSV: Photoshop, Figma, Illustrator
HWB: CSS moderno, mezclas intuitivas
CMYK: Impresión profesional
LAB/LCH: Ciencia del color, diferencias perceptuales

💡 Ejemplos de uso prácticos

Caso 1: Color de marca → CSS Variables

Un cliente te envía #1E90FF. Usa la pestaña "Código" para obtener variables CSS, SCSS y Tailwind config listos para copiar.

Caso 2: App móvil multiplataforma

Necesitas el mismo color en iOS (Swift UIColor), Android (Kotlin) y Flutter (Dart). La pestaña de código genera los snippets para las 3 plataformas.

Caso 3: Analizar composición del color

Usa la pestaña "Canales" para ver el desglose visual de RGB y HSL con barras animadas, más los valores CMYK, LAB, LCH y HWB en un solo vistazo.

Caso 4: Encontrar el nombre CSS más cercano

Ingresa cualquier color y la herramienta encuentra el nombre CSS más cercano (de 148 disponibles) con la distancia ΔE para saber qué tan similar es.

Preguntas Frecuentes

¿Cuántos formatos soporta esta herramienta?

Soporta 18+ formatos organizados en 5 categorías: Web/CSS (HEX, HEX8, RGB, RGBA, HSL, HSLA, nombre CSS), Diseño (HSV, HWB, RGB %), Impresión (CMYK), Perceptual (CIE LAB, LCH) y Código (CSS Variable, Tailwind, Swift, Android, RGB decimal, entero).

¿Cómo convierto HEX a RGB?

Simplemente ingresa el color HEX (ej: #FF5733) y automáticamente verás la conversión a todos los formatos, incluyendo RGB. Haz clic en cualquier formato para copiarlo.

¿Qué es CIE LAB y para qué sirve?

CIE LAB es un espacio de color perceptualmente uniforme. La distancia entre dos colores en LAB (Delta E) corresponde a cómo los humanos percibimos la diferencia. Se usa en control de calidad, ciencia del color y accesibilidad.

¿Qué es HWB y por qué es útil?

HWB (Hue, Whiteness, Blackness) es un formato CSS moderno que describe colores como un tono mezclado con blanco y negro. Es más intuitivo que HSL porque refleja cómo mezclamos pinturas.

¿Por qué los colores se ven diferentes en pantalla e impresión?

Las pantallas usan RGB (luz aditiva) mientras que la impresión usa CMYK (tinta sustractiva). Algunos colores RGB brillantes no pueden reproducirse exactamente en CMYK, lo que se llama "fuera de gama".

¿Puedo obtener snippets de código para mi plataforma?

Sí, la pestaña "Código" genera snippets listos para copiar en CSS, SCSS, Tailwind Config, JavaScript, Swift (UIColor), Android (Kotlin), Flutter (Dart) y Python.