Conversor de Color y Generador de Paletas

Convierte colores entre HEX, RGB, HSL, HSB y CMYK. Genera paletas complementarias, analogas, triadicas y más. Verifica relaciones de contraste WCAG.

100% del lado del cliente. Tus datos nunca salen de tu navegador.

#3b82f6
R
G
B
Formatos
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSBhsb(217, 76%, 96%)
CMYKcmyk(76%, 47%, 0%, 4%)
Contraste WCAG
3.68:1AA Large
5.71:1AA
Paleta
Enviar a:

Convertidores y Ejemplos

Conversor de HEX a RGB: Traductor de Códigos de Color

Convierte códigos de color HEX como #3b82f6 a valores RGB (59, 130, 246). Cubre notación abreviada hex, canales alfa y uso en CSS.

 Conversor de RGB a HSL: Traductor de Modelo de Color

Convierte valores de color RGB a HSL (Tono, saturación, claridad). Comprende los modelos de color para CSS, sistemas de diseño y manipulación programatica de color.

 Color Tailwind CSS a HEX: Buscador de Colores

Busca nombres de colores de Tailwind CSS y obtiene sus valores HEX. blue-500 es #3b82f6, gray-900 es #111827. Referencia rápida de la paleta de colores de Tailwind.

Herramientas Relacionadas

sha
Generador de Hashes

Genera hashes MD5, SHA-1, SHA-256 y SHA-512 a partir de texto o archivos. Usa Web Crypto API para SHA y JavaScript puro para MD5.

 %20
Codificador URL y Convertidor de Entidades HTML

Codifica texto con encodeURIComponent o encodeURI para URL, convierte caracteres especiales HTML a entidades nombradas o numericas. Todo ocurre en tu navegador.

Conversor de Color y Generador de Paletas

Convierte colores entre formatos HEX, RGB, HSL, HSB/HSV y CMYK al instante. Selecciona visualmente un color o escribe cualquier valor de color CSS, color con nombre o cadena de formato sin procesar. La herramienta produce todas las representaciones de formato simultáneamente y genera paletas basadas en teoría del color.

Como Usarlo

  1. Elige un color. Haz clic en la vista previa del color para abrir el selector de color del sistema, escribe un valor en el campo de entrada o arrastra los controles deslizantes RGB
  2. Lee las conversiones. Los cinco formatos (HEX, RGB, HSL, HSB, CMYK) se actualizan en tiempo real
  3. Copia cualquier formato. Usa el boton Copiar junto al formato que necesitas o Copiar Todo
  4. Genera paletas. Elige un tipo de armonía (complementaria, análoga, triádica, etc.)
  5. Verifica el contraste. La relación de contraste WCAG contra blanco y negro se muestra automáticamente

Como Funcionan los Modelos de Color

Cada color en tu pantalla se produce mezclando luz roja, verde y azul en diferentes intensidades. RGB expresa esto directamente: tres canales en un rango de 0-255, dando 16.7 millones de colores posibles. HEX es el mismo modelo escrito en base 16. #FF0000 significa rgb(255, 0, 0).

HSL y HSB transforman la misma información a una forma más cercana a como los humanos piensan sobre los colores. El tono (Hue) es la posición en grados en la rueda de color (0 = rojo, 120 = verde, 240 = azul). La saturación mide que tan vivo es el color versus gris. El tercer eje difiere: HSL usa claridad (0% = negro, 100% = blanco, 50% = color puro), mientras que HSB usa brillo (0% = negro, 100% = intensidad total). CSS usa HSL. Las herramientas de diseño como Figma, Sketch y Photoshop usan HSB.

CMYK (Cyan, Magenta, Yellow, Key/Black) es un modelo sustractivo para impresión. Las tintas absorben luz en lugar de emitirla. La conversión de RGB a CMYK es una aproximación matemática porque los dos espacios de color no cubren la misma gama. Los azules saturados que se ven vibrantes en pantalla generalmente no se pueden reproducir en CMYK.

Armonía de Color y Paletas

La herramienta genera cinco tipos de paleta:

Complementaria: Colores opuestos en la rueda. Máximo contraste. Mejor para elementos que necesitan destacar.

Análoga: Colores adyacentes en la rueda. Bajo contraste, armonioso. Mejor para fondos y diseños sutiles.

Triádica: Tres colores espaciados uniformemente (120 grados de separación). Contraste equilibrado.

Tetrádica: Dos pares de colores complementarios. Rica pero difícil de equilibrar.

Monocromática: Variaciones de un solo tono. Consistentemente armoniosa. Mejor para UI minimalista.

Contraste WCAG

La relación de contraste mide la diferencia de luminancia entre dos colores. Va de 1:1 (sin contraste) a 21:1 (máximo, negro sobre blanco). La herramienta muestra el puntaje y el nivel WCAG alcanzado (AAA, AA o Fallo).