🧰 ToolPicoTodas las herramientas →
🎨 Visual y desarrollo

Convertidor de color

Convierte al instante entre HEX, RGB, HSL, HSV/HSB y CMYK. Elige un color o introduce un código — cada formato se mantiene sincronizado. Además, un comprobador de contraste WCAG 2.1 y un generador de paletas complementarias/análogas/triádicas — todo en tu navegador, gratis.

HEX · RGB · HSL · HSV · CMYK Alfa compatible WCAG 2.1 AA / AAA Actualizado: 26 jul. 2026
Color seleccionado
#7C3AED
—
HEX
Puedes introducir #RRGGBB, la forma corta #RGB, o añadir el alfa con #RRGGBBAA.
RGB
HSL
HSV / HSB
Alfa (opacidad)
100%
Todos los formatos — haz clic para copiar
Espacios de color modernos — OKLCH · LAB · LCH
Salida de código para desarrolladores — haz clic para copiar
Colores rápidos
Respuesta rápida Para convertir un código HEX (por ejemplo #7C3AED) a RGB, convierte cada bloque de dos caracteres de base 16 a base 10: 7C=124, 3A=58, ED=237, obteniendo rgb(124, 58, 237). El mismo color en HSL es hsl(262, 83%, 58%). Elige un color arriba y cada formato, el ratio de contraste y una paleta se generan automáticamente.
HEX
RGB
HSL
Luminancia relativa (L)
🎨 Nota: todas las conversiones usan los cálculos estándar del espacio de color sRGB y funcionan íntegramente en tu navegador — ningún dato se envía nunca a un servidor. El color que ves en pantalla puede variar según la calibración del monitor, el tipo de panel y las condiciones de iluminación. La salida CMYK es una simple aproximación matemática. Los resultados se ofrecen solo con fines informativos; para colores de impresión o de marca exactos, usa el perfil de color ICC correspondiente, una referencia Pantone o las directrices de tu marca.
🎨 Convertidor de color — ToolPico ↗

Comprobador del ratio de contraste WCAG

Introduce un color de texto (primer plano) y un color de fondo para ver el ratio de contraste WCAG 2.1 y los resultados AA/AAA con una vista previa en directo. Apunta a al menos 4,5:1 para el texto de tamaño normal, para seguir siendo accesible.

—
ratio de contraste
—
puntuación de contraste APCA (Lc)

APCA (Advanced Perceptual Contrast Algorithm) es el modelo de contraste propuesto para WCAG 3. Usa una escala Lc de 0 a ±106 en lugar del ratio 1:1–21:1 de WCAG 2.1, y es sensible a qué color es el texto y cuál el fondo. Se muestra aquí a título informativo — WCAG 2.1 sigue siendo la norma vigente que hay que cumplir.

Ejemplo de título grande (24px)
El texto de cuerpo normal se ve así. Por accesibilidad, esta línea debe seguir siendo cómodamente legible — WCAG AA exige al menos un contraste de 4,5:1.

Simulación de daltonismo

¿Cómo se percibe el color que has elegido arriba según distintos tipos de daltonismo? Consulta las simulaciones de protanopia, deuteranopia, tritanopia y acromatopsia (daltonismo total) para comprobar rápidamente si tu diseño sigue siendo distinguible para usuarios daltónicos. Un complemento natural del comprobador de contraste.

Compara «Normal» a la izquierda con los demás. Al tocar un color se copia su código HEX. Esta simulación es una transformación matricial aproximada del lado del cliente; una evaluación clínica precisa requiere una prueba médica.

Generador de paleta de colores

Paletas armoniosas derivadas del color que has elegido arriba. Cada una se genera automáticamente a partir de una relación de la rueda de color (complementaria, análoga, triádica, complementaria dividida, tetrádica/cuadrada) o de un degradado de luminosidad (monocromática). Toca un color para copiar su código HEX al portapapeles.

Extraer una paleta de colores desde una imagen

Sube una imagen y sus colores dominantes se extraen automáticamente. La imagen nunca sale de tu dispositivo — se procesa íntegramente en tu navegador (Canvas) y nunca se sube a ningún servidor. Toca uno de los colores extraídos para enviarlo al convertidor.

JPG, PNG, WebP… se extraerán los colores más dominantes.

Mezclador de colores

Mezcla dos colores y visualiza los pasos intermedios entre ellos. Elige un color inicial y uno final, el número de pasos y el modo de mezcla (RGB lineal o HSL, que suele dar transiciones de tono más naturales). Toca un paso para copiar su código HEX.

7
Pasos de la mezcla
El 50% central es el punto medio exacto entre ambos colores.

Generador de degradados CSS

Crea un degradado lineal, radial o cónico a partir de varios colores, con vista previa en directo, y copia el código CSS listo para usar. Empieza con el color seleccionado arriba o añade tus propios colores.

135°
Colores del degradado

El degradado cónico no es compatible con navegadores muy antiguos; el lineal y el radial tienen una compatibilidad prácticamente universal.

Color estándar más cercano

Compara el color seleccionado arriba con una lista integrada de nombres de color estándar del tipo Pantone/RAL y muestra la coincidencia más cercana por distancia de color.

⚠️ Aviso: esta es una aproximación calculada por distancia de color en el navegador, no un valor Pantone®/RAL® oficial con licencia. Pantone y RAL son sistemas de color propietarios; para una correspondencia de producción exacta, usa el abanico físico oficial o el software con licencia de cada sistema.
Coincidencia más cercana (aproximada)
—
—

¿Cómo funcionan los códigos de color, y cómo se convierten entre sí?

Una explicación completa de los modelos HEX, RGB, HSL y HSV, del cálculo de conversión y del contraste WCAG.

Un convertidor de códigos de color te permite expresar el mismo color en distintas notaciones (HEX, RGB, HSL, HSV/HSB, CMYK) y pasar de una a otra. Todos estos modelos describen el espacio de color sRGB que usan las pantallas — así que un código HEX y su equivalente en RGB o HSL describen exactamente el mismo color, solo escrito de forma diferente. Esta herramienta realiza cada conversión con algoritmos estándar, sin ninguna librería externa.

¿Cómo se convierte un código de color HEX a RGB?

Respuesta rápidaUn código HEX se escribe #RRGGBB; cada bloque de dos caracteres representa un canal de color en base 16 (hexadecimal). Para convertir a base 10: #7C3AED → 7C=124, 3A=58, ED=237, es decir rgb(124, 58, 237). La forma abreviada de tres caracteres (#RGB) se expande repitiendo cada carácter dos veces: #F0A → #FF00AA.
  • RR — el canal rojo, 00–FF (0–255).
  • GG — el canal verde, 00–FF (0–255).
  • BB — el canal azul, 00–FF (0–255).
  • AA (opcional) — en un HEX de 8 dígitos, el último bloque es el canal alfa (opacidad).

¿Qué son HSL y HSV? ¿En qué se diferencian de RGB?

Respuesta rápidaHSL (Tono-Saturación-Luminosidad) y HSV/HSB (Valor/Brillo) describen un color según ejes de tono, saturación y luminosidad/brillo que resultan intuitivos para los humanos. RGB trabaja con tres canales de luz; HSL/HSV funcionan más bien en torno a la rueda de color. Su diferencia está en el tercer componente: en HSL, L=50% da el color puro; en HSV, V=100% da el color más vivo.

En la práctica, cuando quieres tomar un color de marca y producir tonos más claros y oscuros de él, HSL es el modelo más útil: mantén el tono (H) y la saturación (S) fijos y varía solo la luminosidad (L). La paleta «Tintes y matices» de esta página hace exactamente eso. Los selectores de color de los programas de diseño suelen usar HSV, porque un control deslizante de «brillo» resulta visualmente más fácil de entender.

¿Cómo se calcula el ratio de contraste WCAG?

Respuesta rápidaPrimero se calcula la luminancia relativa de cada color. Cada canal sRGB se divide entre 255 y se lineariza: c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4. Luego L = 0,2126·R + 0,7152·G + 0,0722·B. El ratio de contraste es (L1 + 0,05) / (L2 + 0,05) — L1 el color más claro, L2 el más oscuro. El resultado va de 1:1 a 21:1.

Esta fórmula tiene en cuenta que el ojo humano es más sensible al verde y menos sensible al azul (los coeficientes 0,7152 y 0,0722). Por eso incluso un par aparentemente «claro» como amarillo sobre blanco puede no superar las comprobaciones de contraste. Usa la herramienta de contraste de arriba para ver el ratio y los resultados AA/AAA en directo para dos colores cualesquiera.

Objetivos para un contraste de color accesible

Respuesta rápidaTexto normal: AA ≥ 4,5:1, AAA ≥ 7:1. Texto grande (≈18pt, o 14pt en negrita y mayor): AA ≥ 3:1, AAA ≥ 4,5:1. Los componentes de interfaz y objetos gráficos suelen necesitar 3:1. Mantener tu texto por encima de estos umbrales significa que los usuarios con baja visión también pueden leer tu contenido cómodamente.

Tablas de referencia

Equivalencias HEX/RGB/HSL de los colores básicos, umbrales de contraste WCAG, dónde se usa típicamente cada formato, y una tabla de conversión de opacidad (alfa) → HEX.

Equivalencias HEX, RGB y HSL de los colores básicos (sRGB)
ColorHEXRGBHSL
Negro#0000000, 0, 00, 0%, 0%
Blanco#FFFFFF255, 255, 2550, 0%, 100%
Rojo#FF0000255, 0, 00, 100%, 50%
Verde lima#00FF000, 255, 0120, 100%, 50%
Azul#0000FF0, 0, 255240, 100%, 50%
Amarillo#FFFF00255, 255, 060, 100%, 50%
Cian#00FFFF0, 255, 255180, 100%, 50%
Magenta#FF00FF255, 0, 255300, 100%, 50%
Naranja#FFA500255, 165, 039, 100%, 50%
Violeta (esta herramienta)#7C3AED124, 58, 237262, 83%, 58%
Gris#808080128, 128, 1280, 0%, 50%

Los valores HSL están redondeados al número entero más cercano. Introduce cualquier HEX en el convertidor de arriba para ver su equivalente exacto.

Umbrales mínimos del ratio de contraste WCAG 2.1
Tipo de contenidoAA (mínimo)AAA (reforzado)
Texto normal (< 18pt / 14pt negrita)4,5:17:1
Texto grande (≥ 18pt o 14pt negrita)3:14,5:1
Componente de interfaz / objeto gráfico3:1—
Elemento decorativo / desactivadoNo requeridoNo requerido

18pt ≈ 24px, 14pt negrita ≈ 18,66px. El ratio de contraste puede alcanzar como máximo 21:1 (negro puro sobre blanco puro).

Formatos de color y casos de uso habituales
FormatoEjemploDónde se usa
HEX#7C3AEDCSS, diseño, web — el más habitual
HEX + alfa#7C3AED80Color semitransparente (CSS, móvil)
RGBrgb(124, 58, 237)CSS, operaciones basadas en canales
RGBArgba(124, 58, 237, .5)CSS que necesita opacidad
HSLhsl(262, 83%, 50%)Ajuste de tono/luminosidad, generación de temas
HSV / HSBhsv(262, 76%, 93%)Selectores de color de herramientas de diseño
CMYKcmyk(48, 76, 0, 7)Impresión (conversión aproximada)
OKLCHoklch(54,1% 0,247 293)CSS moderno; amplia gama, luminosidad perceptualmente coherente
LABlab(43,4% 64,8 -79,1)Independiente del dispositivo; medición de diferencia de color (ΔE)
LCHlch(43,4% 102,2 309,3)La forma cilíndrica (tono/croma) de LAB
Porcentaje de opacidad (alfa) → último bloque HEX de 8 dígitos
OpacidadDecimal (0–1)HEX (00–FF)
100% (totalmente opaco)1,00FF
90%0,90E6
75%0,75BF
50% (semitransparente)0,5080
25%0,2540
10%0,101A
0% (totalmente transparente)0,0000

HEX alfa = la forma hexadecimal de round(opacidad × 255). Mueve el control de alfa de arriba y el HEX de 8 dígitos se actualiza automáticamente.

Colores populares

Añadir esta herramienta a tu sitio (código de inserción)

Integra gratis el convertidor de color en tu propio sitio. Copia el código de abajo en tu HTML — la herramienta se muestra en una vista simplificada y enlaza a esta página como fuente.

La herramienta insertada tiene un diseño fijo; puedes ajustar el valor de height según tu sitio. Sin publicidad ni datos personales, funciona íntegramente en el cliente.

Glosario de términos de color

Definiciones breves de los términos esenciales de los códigos de color y las comprobaciones de accesibilidad.

HEXUna notación que escribe un color en base 16 con el formato #RRGGBB. El formato más habitual en web y diseño.
RGBDefine un color por la cantidad 0–255 de luz roja, verde y azul (un modelo aditivo).
HSLTono (0–360°), Saturación (%), Luminosidad (%). Útil para derivar temas y variantes tonales.
HSV / HSBTono, Saturación, Valor/Brillo. El modelo estándar detrás de la mayoría de los selectores de color de herramientas de diseño.
CMYKEl modelo de impresión que trabaja con tinta Cian, Magenta, Amarillo y Key (negro) (un modelo sustractivo).
Alfa (opacidad)La transparencia de un color; 0 es totalmente transparente, 1 es totalmente opaco. Se escribe en RGBA o HEX de 8 dígitos.
TonoEl ángulo en la rueda de color; 0° es rojo, 120° es verde, 240° es azul.
SaturaciónLa intensidad de un color; 0% es una escala de grises, 100% es la forma más vívida.
Luminancia relativaEl brillo percibido de un color por el ojo; la base del cálculo del ratio de contraste.
Ratio de contrasteLa diferencia de luminancia entre dos colores; se obtiene con (L1+0,05)/(L2+0,05), variando de 1:1 a 21:1.
WCAGWeb Content Accessibility Guidelines; la norma de accesibilidad web del W3C (niveles AA/AAA).
Color complementarioEl tono directamente opuesto en la rueda de color (H+180°); ofrece el contraste más fuerte.
Colores análogosTonos vecinos (H±30°); crean una paleta armoniosa y tranquila.
Paleta triádicaTres tonos repartidos uniformemente en la rueda (H, H+120°, H+240°); vívida y equilibrada.
sRGBEl espacio de color por defecto de las pantallas y la web; HEX/RGB/HSL describen todos este espacio.
OKLCHUn espacio de color moderno y perceptualmente uniforme: Luminosidad, Croma, Tono. Preferido en CSS por su amplia gama y su luminosidad coherente.
LAB / LCHUn espacio de color independiente del dispositivo basado en CIELAB; mide la diferencia de color (ΔE) de forma cercana a la percepción humana. LCH es su forma cilíndrica (tono/croma).
DaltonismoDificultad para distinguir colores; los tipos más habituales son la protanopia y la deuteranopia (rojo-verde) y la tritanopia (azul-amarillo).

Guías detalladas

Las preguntas más habituales sobre códigos de color y accesibilidad, respondidas.

¿Cómo se construye una paleta completa a partir de un color de marca?

Introduce tu color principal en el convertidor de arriba. La paleta de tintes y matices mantiene fijos el tono y la saturación y varía la luminosidad (L) de 50 a 900, dándote una escala de colores ideal para botones, bordes y capas de fondo. Después, la paleta análoga (H±30°) da colores de acento suaves, la paleta complementaria (H+180°) da un color de acción fuerte, y la paleta triádica da una combinación vívida de tres colores.

Un enfoque habitual en interfaces profesionales: un color de marca principal más un degradado de tonos, un acento complementario y una escala de grises neutros. Prueba cada color que elijas como texto/fondo con la herramienta de contraste y asegúrate de que supere el umbral AA.

¿Es mi color de texto suficientemente legible? ¿Cómo saberlo?

Introduce tu color de texto como primer plano y tu color de fondo en la sección de contraste WCAG de arriba. Si el ratio es inferior a 4,5:1 no alcanzas AA para el texto de tamaño normal — apunta al menos a eso. Para los títulos grandes (≈24px+), el umbral baja a 3:1. Las insignias de la herramienta marcan cada umbral superado/no superado, y la vista previa en directo de abajo muestra la legibilidad real.

Consejo: para aumentar el contraste, aclarar un poco el fondo (o bajar la luminosidad del color en HSL) suele dar un resultado más limpio que simplemente oscurecer el texto. El amarillo, el verde claro y los tonos pastel suelen fallar sobre un fondo blanco.

¿Para qué sirve el HEX de 8 dígitos (alfa), y cómo se lee?

#RRGGBBAA añade un canal de opacidad (alfa) a un color estándar, escrito en 8 dígitos hexadecimales. Los dos últimos caracteres van de 00 (totalmente transparente) a FF (totalmente opaco). Por ejemplo #7C3AED80 es violeta con aproximadamente un 50% de opacidad — lo mismo que rgba(124, 58, 237, .5).

La conversión de porcentaje a HEX es round(opacidad × 255): 50% → 128 → 80, 75% → 191 → BF. Mueve el control de alfa de arriba y las salidas RGBA y HEX de 8 dígitos se actualizan al instante; la tabla de referencia «Alfa → HEX» enumera los valores más habituales.

Descubrir todas las herramientas de ToolPico →

Preguntas frecuentes

¿Cómo se convierte un código de color HEX a RGB?
Un código HEX se escribe #RRGGBB, y cada bloque de dos caracteres representa un canal en base 16. Para convertir a base 10, convierte cada bloque: #7C3AED → 7C=124, 3A=58, ED=237, es decir rgb(124, 58, 237). La forma abreviada de tres caracteres (#RGB) se expande repitiendo cada carácter dos veces: #F0A → #FF00AA.
¿Qué es HSL?
HSL es un modelo de color compuesto por Tono (0–360°), Saturación (%) y Luminosidad (%). Es más intuitivo para los humanos que RGB: mantener el tono fijo mientras cambia la luminosidad produce fácilmente versiones más claras u oscuras de un color. HSL y RGB describen el mismo color sRGB y se convierten exactamente entre sí.
¿Cómo se calcula el ratio de contraste WCAG?
Se calcula la luminancia relativa de cada color: cada canal sRGB se normaliza entre 0 y 1 y se lineariza con c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4, y luego se suma como L = 0,2126·R + 0,7152·G + 0,0722·B. El ratio de contraste se obtiene con (L1 + 0,05) / (L2 + 0,05) (L1 el más claro, L2 el más oscuro). El resultado va de 1:1 a 21:1.
¿Cómo se construye una paleta de colores?
Los métodos más habituales se basan en relaciones de la rueda de color: complementaria (H+180°) ofrece un contraste fuerte, análoga (H±30°) ofrece transiciones armoniosas, triádica (H, H+120°, H+240°) ofrece un trío vívido. Los tintes y matices se producen manteniendo el tono fijo y aumentando o reduciendo la luminosidad (L). Esta herramienta deriva automáticamente las cuatro a partir de tu color elegido.
¿Cuál es la diferencia entre HSV y HSL?
Ambos usan Tono y Saturación; su tercer componente difiere. En HSL, L=50% da el color puro, 100% da blanco, 0% da negro. En HSV/HSB, V=100% da el color más vivo, 0% da negro; llegar al blanco requiere también bajar la saturación. Las herramientas de diseño suelen usar HSV; CSS admite la función hsl().
¿Qué ratio de contraste debo buscar para un contraste de color accesible?
Según WCAG 2.1, el texto normal necesita al menos 4,5:1 para AA y 7:1 para AAA; el texto grande (≈18pt / 14pt negrita y mayor) necesita 3:1 para AA y 4,5:1 para AAA. Los componentes de interfaz suelen necesitar 3:1. Mantener tu texto por encima de estos umbrales lo hace cómodamente legible también para usuarios con baja visión.
¿Cómo se representa el alfa (transparencia) en un código de color?
El alfa expresa la opacidad de 0 (totalmente transparente) a 1 (totalmente opaco). En CSS se escribe en decimal como rgba(124, 58, 237, .5) o en HEX de 8 dígitos como #7C3AED80, donde los dos últimos caracteres son el canal alfa (00–FF). Una opacidad del 50% equivale aproximadamente a 80 en HEX. Esta herramienta genera el alfa en forma RGBA y #RRGGBBAA.
¿Por qué el CMYK tiene un aspecto diferente al HEX?
HEX/RGB es un modelo aditivo pensado para pantallas (que añaden luz); CMYK es un modelo sustractivo pensado para la impresión (que añade tinta). Algunos colores vivos que una pantalla puede mostrar no pueden reproducirse exactamente con tinta, por lo que la conversión a CMYK es una aproximación. Para resultados de impresión exactos, usa el perfil de color ICC correspondiente o una referencia Pantone.
¿Qué son los códigos de color OKLCH y LAB?
A diferencia de RGB, centrado en la pantalla, OKLCH y LAB son espacios de color modernos organizados en torno a la percepción humana. LAB (CIELAB) es independiente del dispositivo y mide la diferencia entre dos colores de forma cercana a como la percibe el ojo; LCH es su forma cilíndrica (tono/croma). OKLCH se construye alrededor de los ejes Luminosidad, Croma y Tono, diseñado específicamente para CSS con una luminosidad coherente y una amplia gama: se escribe como oklch(54,1% 0,247 293). Esta herramienta genera el color que elijas en OKLCH, LAB y LCH al instante.
¿Cómo se convierte un color a código Tailwind, Swift o Flutter?
Al elegir un color, la herramienta genera automáticamente una salida de código para desarrolladores: una variable CSS (--color: #7C3AED;), SCSS ($color: #7C3AED;), una clase arbitraria de Tailwind (bg-[#7C3AED]), Swift UIColor, un entero de color Android/Kotlin color int (0xFF7C3AED), y Flutter Color (Color(0xFF7C3AED)). Puedes copiar cada línea con un clic; si la opacidad es inferior al 100% la salida se actualiza a ARGB de 8 dígitos.
¿Para qué sirve la simulación de daltonismo?
Alrededor del 8% de las personas (más a menudo hombres) tienen alguna forma de daltonismo. La simulación muestra aproximadamente cómo se percibe el color que has elegido en protanopia, deuteranopia, tritanopia, y acromatopsia, para que puedas comprobar si las distinciones basadas únicamente en el color (como insignias de estado rojo/verde) siguen siendo distinguibles también para estos usuarios. La buena práctica es no hacer nunca del color el único portador de significado, y reforzarlo con suficiente contraste.

Metodología y fuentes

El Convertidor de color de ToolPico es una herramienta gratuita e independiente. Las conversiones aplican directamente los cálculos estándar del espacio de color sRGB: HEX ↔ RGB usa la conversión en base 16; RGB ↔ HSL y RGB ↔ HSV normalizan cada canal entre 0 y 1 y aplican las fórmulas estándar de tono/saturación/luminosidad; CMYK usa una conversión sustractiva simple. La sección de contraste aplica exactamente la definición de luminancia relativa WCAG 2.1 (c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4 y L = 0,2126·R + 0,7152·G + 0,0722·B) y la fórmula de ratio de contraste (L1+0,05)/(L2+0,05). Todos los cálculos se ejecutan íntegramente en tu navegador; ningún dato de color se envía nunca a un servidor.

Base: conversiones del espacio de color sRGB (IEC 61966-2-1) · ratio de contraste WCAG 2.1 (W3C) · coeficientes de luminancia relativa basados en la CIE. Última actualización: 26 de julio de 2026. Las fórmulas de conversión de color y de contraste son estándar y fijas; esta página se revisa periódicamente para mantenerse actualizada. Los resultados se ofrecen a título informativo únicamente — el aspecto real en pantalla puede variar según la calibración del monitor y el perfil de impresión.

🔗 Añadir esta herramienta a tu sitio

Copia el código de abajo en tu propio sitio. La herramienta es gratuita, siempre está actualizada, y funciona íntegramente en tu página. No se requiere registro.

Vista previa →
⚡ Built with ToolPico · toolpico.com