Conversor de Color — HEX, RGB, HSL y HSV con copia en un clic

Cómo usarlo

• Introduce un color de tres formas: escribe un HEX o un nombre de color CSS, usa el selector, o mueve los deslizadores de tono/saturación/luminosidad/alfa.
• Cambia cualquier valor y HEX, RGB, HSL, HSV y RGBA se actualizan a la vez, sin botón de convertir y en cualquier dirección.
• Haz clic en el botón de copiar junto a un formato para copiarlo al portapapeles; aparece un aviso de “¡Copiado!”.
• Baja el deslizador de alfa para crear un color transparente: la vista previa muestra un tablero de ajedrez para ver la transparencia.
• Consulta el panel de contraste para ver la relación WCAG y si pasa AA/AAA. Sin instalar ni registrarte: los colores se calculan localmente y no se suben.

Formatos de color admitidos

HEX (código de color hexadecimal)

HEX es la forma más común de escribir colores en la web, como #RRGGBB (y la versión corta #RGB). Convertir un hexadecimal a rgb o hex a hsl es cuestión de segundos. Para transparencia, HEX8 usa #RRGGBBAA, donde el último par es el canal alfa.

RGB / RGBA (rojo, verde, azul + alfa)

RGB describe un color con rojo, verde y azul de 0 a 255, como rgb(124, 58, 237). RGBA añade un cuarto valor, el alfa (0–1), para la transparencia, por ejemplo rgba(124, 58, 237, 0.5). Escribe los valores RGB y el HEX y el HSL se actualizan al momento (rgb a hex, rgb a hsl).

HSL / HSLA (tono, saturación, luminosidad)

HSL usa tono (0–360°), saturación (0–100%) y luminosidad (0–100%), lo que hace intuitivo ajustar cuán brillante o vivo es un color. Se usa mucho en CSS y HSLA añade el canal alfa. Convertir hex a hsl es práctico cuando solo quieres retocar la luminosidad.

HSV (tono, saturación, valor)

HSV (también llamado HSB) usa tono, saturación y valor (brillo). Es común en herramientas de diseño y selectores de color, pero no es una notación oficial de CSS, por lo que la mostramos como valor de referencia. Para CSS, usa HEX, RGB o HSL.

Funciones

Visualización simultánea y conversión bidireccional

Todos los formatos se muestran juntos en una pantalla y al editar cualquiera el resto se actualiza al instante: hex a rgb, rgb a hex, hex a hsl, hsl a hex y todas las demás direcciones. No hay que pulsar ningún botón de convertir.

Copia con un clic

Cada formato tiene un botón de copiar. Púlsalo para copiar el valor al portapapeles, con un claro aviso de “¡Copiado!” para saber que funcionó.

Selector de color y deslizadores

Usa el selector de color nativo más los deslizadores de tono, saturación, luminosidad (o valor) y alfa para elegir colores de forma visual y ver cómo se actualizan todos los formatos.

Compatibilidad con transparencia (alfa)

Crea colores semitransparentes y obtén RGBA, HSLA y HEX8 (#RRGGBBAA). El deslizador de alfa va de 0 a 100% y la vista previa usa un tablero de ajedrez para mostrar la transparencia.

Relación de contraste y comprobación WCAG

La herramienta calcula la relación de contraste entre tu color y un fondo (blanco, negro o personalizado) y muestra si cumple WCAG AA/AAA (4,5:1 para texto normal, 3:1 para texto grande). Los resultados se muestran con color y texto, no solo con color.

Casos de uso

Convertir un HEX en RGB / HSL para CSS

¿Tienes un HEX de un diseño? Conviértelo a rgb() o hsl() y cópialo para tu CSS. Con HSL puedes ajustar solo la luminosidad para los estados hover y activo.

Crear colores transparentes (RGBA / HSLA)

Crea un color semitransparente como rgba(0, 0, 0, 0.5) con el deslizador de alfa y cópialo: ideal para superposiciones, sombras y fondos sutiles.

Comprobar una combinación de colores accesible

Verifica que tus colores de texto y fondo cumplen el contraste WCAG AA para que tu contenido sea legible para todos.

Notas y consejos

• HEX, RGB, HSL y HSV son solo distintas formas de escribir el mismo color, por lo que se convierten entre sí (pueden aparecer pequeñas diferencias de redondeo).
• HSV no es una notación oficial de CSS: se muestra como referencia. En tus hojas de estilo usa HEX, RGB o HSL.
• No mostramos CMYK a propósito: la conversión exacta de pantalla a impresión depende de los perfiles de color, el papel y la imprenta, por lo que una fórmula simple daría valores engañosos. Para imprenta, usa una gestión de color adecuada.
• El contraste es una guía: la fórmula WCAG es exacta, pero la legibilidad real también depende de la fuente, el tamaño y los colores del entorno.
• Tus colores nunca se envían a ningún sitio: todas las conversiones ocurren localmente en tu navegador.

Preguntas frecuentes

¿Puedo convertir HEX a RGB (y al revés)?

Sí. Introduce un valor y se convierte en todas las direcciones a la vez: hex a rgb, rgb a hex, hex a hsl, hsl a hex, además de HSV y RGBA. No hay botón de convertir; los demás formatos se actualizan al instante.

¿Admite RGBA y HSLA con transparencia?

Sí. Usa el deslizador de alfa para fijar la transparencia y obtén RGBA, HSLA y HEX8 (#RRGGBBAA). La vista previa muestra un tablero de ajedrez para ver lo transparente que es el color.

¿Cómo copio un valor?

Haz clic en el botón de copiar junto a cualquier formato. El valor se copia al portapapeles y un mensaje de “¡Copiado!” lo confirma.

¿Puedo usar nombres como red o rebeccapurple?

Sí. Se aceptan los nombres de color estándar de CSS y se convierten a HEX, RGB, HSL y HSV; por ejemplo, rebeccapurple se convierte en #663399.

¿Puede convertir a CMYK?

No, a propósito. Un CMYK exacto depende de los perfiles de color, el papel y la imprenta, así que una fórmula simple daría valores engañosos. Para imprenta, usa herramientas de gestión de color dedicadas.

¿Cómo uso la relación de contraste?

Compara el color del texto con un fondo y muestra si cumple WCAG AA/AAA. Úsala para confirmar que tus combinaciones de color son legibles y accesibles.

¿Se envían mis colores a un servidor?

No. Todas las conversiones se ejecutan localmente en tu navegador. Tus colores nunca se suben ni se almacenan.