Conversor de Colores

Conversor de colores - de HEX a RGB, de RGB a HEX y HSL online

Actualizado el 30 de septiembre de 2026 · Por Saman

La herramienta de diseño le entrega un formato de color, el CSS quiere otro y la API de canvas un tercero. Este conversor de colores gratuito acepta cualquiera de las tres notaciones habituales - #0A84FF, rgb(10,132,255) o hsl(210,100%,52%) - y devuelve el equivalente exacto en el formato que realmente necesita.

Pegue el valor, elija el formato de salida y pulse Convertir. No hay nada que instalar ni ningún registro, y como la conversión se ejecuta en su navegador también funciona sin conexión.

Los tres formatos y cuándo gana cada uno

Todos los formatos que devuelve el conversor

No hace falta indicar qué está pegando: Detección automática lee un código HEX con o sin #, la sintaxis con comas y con espacios de rgb() y hsl(), valores modernos como oklch(), hwb() y lab(), y los 148 nombres de color de CSS. Junto a HEX, RGB y HSL obtiene HSV para selectores de color, CMYK para todo lo que va a imprenta, oklch() para tokens de diseño perceptualmente uniformes y el nombre de color CSS más cercano. El canal alfa - rgba(), hsla() o un HEX de ocho dígitos - se conserva en lugar de descartarse.

Cómo convertir un color

1. Pegue el color en cualquier notación o elíjalo con el selector - Detección automática deduce el formato. En los navegadores que lo admiten, como Chrome y Edge en escritorio, Tomar de la pantalla captura el color de cualquier píxel de la pantalla; en los demás el botón no aparece.
2. La pestaña Formatos muestra HEX, RGB, HSL, HSV, CMYK y OKLCH; copie cualquier línea con el botón contiguo. También nombra el color: Nombre CSS si coincide exactamente con uno de los colores con nombre de CSS y, si no, el Más cercano.
3. La pestaña Paleta ofrece una escala lista de tintes y sombras más armonías complementaria, análoga, triádica y tetrádica.
4. En la pestaña Contraste, fije el color de fondo y lea la relación WCAG con sus veredictos AA y AAA.
5. Use Aleatorio para explorar o Borrar para reiniciar antes del siguiente valor.

Cómo funciona un código de color HEX

Un color HEX son tres pares de dígitos hexadecimales, uno por cada canal - rojo, verde y azul - y cada par abarca de 00 a FF, es decir de 0 a 255 en decimal. #FF0000 es rojo puro, #000000 es negro y #FFFFFF es blanco. Cuando los tres pares repiten dígito, sirve la forma abreviada: #FFF equivale a #FFFFFF. Un código de cuatro u ocho dígitos añade canal alfa, así que #0A84FF80 es el mismo azul con alrededor del 50% de opacidad.

Por qué HSL es más fácil de razonar

HSL describe el color como lo hacen las personas: el tono como un ángulo en la rueda cromática, la saturación como intensidad y la luminosidad como cercanía al blanco o al negro. Por eso es la opción práctica para construir una paleta. Tome el tono de su marca, conserve la saturación y mueva solo la luminosidad para generar un estado hover, un estado deshabilitado, un borde y una variante para modo oscuro que pertenezcan claramente a la misma familia. Hacer lo mismo en HEX significa adivinar seis dígitos.

Construir una paleta entera a partir de un color

La pestaña Paleta convierte un solo color de marca en el conjunto que realmente necesita. La escala Tintes y sombras mantiene el tono y la saturación y mueve solo la luminosidad en once pasos, numerados de 50 a 950 como en la mayoría de sistemas de diseño, de modo que las variantes de hover, borde, deshabilitado y modo oscuro pertenecen claramente a la misma familia. Copiar como CSS copia la escala completa como propiedades personalizadas, lista para pegar en :root.

Bajo la escala están las armonías del círculo cromático: complementaria (el tono opuesto), análoga (vecinos a 30 grados), triádica y Complementaria dividida para acentos equilibrados, y tetrádica para un esquema de cuatro colores. Haga clic en una muestra para copiar su HEX o doble clic para convertirla en el color actual.

Comprobar el contraste antes de publicar

La pestaña Contraste mide la relación de contraste WCAG entre su color y cualquier fondo. Muestra la relación con dos decimales y marca cada umbral como aprobado o suspenso: AA texto normal con 4,5:1, AA texto grande con 3:1, AAA texto normal con 7:1, AAA texto grande con 4,5:1 y Componentes de interfaz, como iconos y bordes de campos, con 3:1. Intercambiar cambia entre sí los colores de texto y fondo con un clic. Una muestra en vivo enseña la combinación a 16px y a 24px en negrita, porque una relación insuficiente para el cuerpo de texto puede bastar para un titular.

Cuando la combinación no llega, la herramienta propone el tono más cercano del mismo matiz que sí alcanza 4,5:1, así corrige el contraste sin renunciar al color de marca. Un color translúcido se compone primero sobre el fondo, porque eso es lo que ve quien lee; comprobar el valor rgba() en bruto sería demasiado optimista.

Dónde aparece la conversión de colores

• Llevar los colores de marca de un archivo de diseño a propiedades personalizadas de CSS.
• Asignar fillStyle en un canvas o un atributo de color en un SVG, que prefieren RGB.
• Crear plantillas de correo en HTML, donde HEX es la notación más segura entre clientes.
• Generar un conjunto coherente de tonos claros y oscuros para un sistema de diseño.
• Elegir paletas de gráficas y paneles donde los tonos necesitan una separación uniforme.
• Traducir un color de una captura o de un PDF de marca a algo utilizable en código.

Color y legibilidad

Convertir un color no dice si el texto será legible sobre él. El contraste depende de la luminancia relativa, y las pautas WCAG piden una relación mínima de 4,5 a 1 para texto normal y de 3 a 1 para texto grande. La luminosidad HSL es una primera aproximación útil - si dos valores de luminosidad están cerca, el contraste casi seguro no basta - y la pestaña Contraste lo resuelve con exactitud, para cualquier par de colores, antes de publicar.

Detalles que conviene conocer

• Redondeo. HSL usa grados y porcentajes enteros, así que convertir de HEX a HSL y volver puede desplazar un canal en una unidad. Mantenga un formato como fuente de verdad.
• Alfa. rgba() y el HEX de ocho dígitos llevan opacidad; un HEX de seis dígitos no puede representarla.
• Porcentajes en RGB. rgb(100%, 0%, 0%) es CSS válido y significa lo mismo que rgb(255,0,0).
• Gamas amplias. Funciones CSS recientes como oklch() y color(display-p3 ...) expresan colores fuera de sRGB que HEX no alcanza.
• Colores con nombre. Palabras clave de CSS como tomato corresponden a valores HEX fijos, pero son limitadas y encajan mal en un sistema.

Se ejecuta en local

La conversión es aritmética simple realizada en su navegador. Ningún color que pegue se sube a ningún sitio, algo que importa cuando trabaja con una paleta de marca todavía sin publicar.

La fórmula de HEX a RGB, y la conversión en código

Un código HEX son tres bytes escritos en base 16. Divide #0A84FF en 0A, 84 y FF, convierte cada par a decimal (0A = 10, 84 = 132, FF = 255) y tienes rgb(10, 132, 255). A la inversa, escribe cada canal como dos dígitos hexadecimales y rellena con un cero cuando sea menor que 16.

Herramientas relacionadas

El trabajo de front-end rara vez termina en el color. Dé formato a los tokens de diseño con el formateador JSON, incruste un icono pequeño como data URI con el codificador Base64, localice todos los códigos de color de una hoja de estilos con el probador de expresiones regulares y convierta imágenes con el conversor de imágenes. Para convertir los colores en degradados y sombras, use el Generador CSS.