Ir al contenido
Allin
Registrarse · Entrar

Conversor de colores

Convierte un color a HEX, RGB, HSL, HSV, CMYK, LAB y OKLCH, con el contraste.

Herramientas relacionadas

Todas las herramientas: Colores y CSS →
Generador de faviconCrea un favicon con una letra y colores, y descárgalo en PNG.Conversor de imagenConvierte tus imágenes a PNG, JPG, WebP, AVIF, BMP, GIF, TIFF o ICO, por lotes y sin subir nada.Comprobador de contraste de colorRelación de contraste WCAG entre texto y fondo, con aprobado/fallo AA/AAA y una vista previa.Inversor de colorInvierte un color (255 − RGB) o toma su complementario, en HEX/RGB/HSL/CMYK con el contraste.Generador de esquemas de colorDeriva esquemas complementario, análogo, triádico, tetrádico, dividido y monocromático de un color base.Selector de color de imagenCarga una imagen, haz clic para muestrear cualquier píxel y extrae una paleta dominante, con HEX y RGB de cada muestra.

Este conversor de colores gratuito transforma cualquier color entre HEX, RGB y HSL al instante en tu navegador. Introduce un valor en un formato y léelo en todos los demás, listo para pegar en CSS, una herramienta de diseño o tu código. Perfecto para respetar colores de marca, crear paletas y ajustar tonos sin adivinar.

Cómo usarlo

  1. Introduce un color en HEX, RGB o HSL.
  2. Lee los valores equivalentes en los demás formatos.
  3. Copia el formato que necesites en tu proyecto.

Preguntas frecuentes

¿Cómo convierto HEX a RGB?

Un color HEX como #4287f5 son tres pares — rojo (42), verde (87), azul (f5) — cada uno leído como número de 0 a 255. Esta herramienta hace la conversión al instante.

¿Qué es HSL?

HSL significa Tono (Hue), Saturación y Luminosidad (Lightness). Suele ser más fácil que RGB para ajustar un color: sube la luminosidad para aclarar, baja la saturación para apagarlo, cambia el tono para variar el color.

¿Qué diferencia hay entre HEX y RGB?

Describen el mismo color — HEX es una notación compacta en base 16 (#ff0000) y RGB lista los canales en decimal (rgb(255,0,0)). Ambos funcionan en CSS.

¿Puedo usar estos valores en CSS?

Sí. HEX, rgb() y hsl() son valores de color CSS válidos — copia el que encaje en tu hoja de estilos o sistema de diseño.

¿Qué es Conversor de colores?

Convierte un color a HEX, RGB, HSL, HSV, CMYK, LAB y OKLCH, con el contraste.

¿En qué casos se usa realmente?

Llevar un color de una herramienta de diseño a una hoja de estilos, construir una paleta alrededor de un color de marca y comprobar que el texto será legible sobre él.

¿Cuál es el error más frecuente?

Juzgar el contraste a ojo. Dos colores que parecen distintos en un monitor luminoso pueden suspender de lleno la ratio de accesibilidad, y esa ratio es lo que medirá una auditoría.

¿En qué se diferencia Conversor de colores de Comprobador de contraste de color?

Están próximos pero responden a preguntas distintas: Comprobador de contraste de color es el que conviene abrir cuando se trata de relación de contraste WCAG entre texto y fondo, con aprobado/fallo AA/AAA y una vista previa. Elige el que encaje con tu punto de partida — ambos son gratis.

¿Hay una herramienta para el siguiente paso?

Inversor de color es el más cercano después de este: Invierte un color (255 − RGB) o toma su complementario, en HEX/RGB/HSL/CMYK con el contraste.

¿Qué más conviene tener abierto al lado?

Generador de esquemas de color y Selector de color de imagen: aparecen en la misma tarea lo bastante a menudo como para merecer otra pestaña.

Para saber más

Todas las guías →
TutorialHEX vs RGB: cómo leer y convertir coloresHEX y RGB son dos notaciones para los mismos colores. Aquí tienes cómo leer cada una, convertir entre ellas y añadir transparencia.ExplicaciónRelación de contraste: cómo la calcula realmente la WCAGLa relación WCAG es (L1 + 0,05) ÷ (L2 + 0,05), y L es la luminancia relativa, no el brillo. El verde aporta el 71,52 % y el azul el 7,22 %, por eso el azul puro sobre blanco aprueba con 8,59:1 mientras el gris medio suspende con 3,95:1. Aquí está el cálculo completo, ejecutado de principio a fin.ExplicaciónDegradados, bandeado y por qué el centro se ve turbioInterpolar en sRGB promedia números codificados en gamma: el punto medio de rojo a verde es #808000 cuando la respuesta a media luz es #bcbc00 — un 57,2 % menos de luz. El bandeado es otro problema aritmético: 8 bits dan 256 escalones, y un degradado oscuro puede tener sólo 28. Aquí están ambos, calculados.ExplicaciónLos esquemas de color son geometría sobre una rueda — y la rueda está malComplementario, tríada, análogo y complementario dividido no son más que rotaciones: suma 180°, 120°, 30° o 150° a un tono. La aritmética es trivial. El problema es que el círculo de tonos HSL no es perceptualmente uniforme — el amarillo y el azul con la misma luminosidad HSL difieren 12,85 veces en luminancia — así que una paleta generada hay que comprobarla luego en contraste.GuíaQué puede quitar un minificador y qué no debe tocarLa minificación tiene que preservar el significado, y lo interesante son los espacios que llevan significado: el combinador descendiente, los espacios dentro de calc(), el hueco entre dos elementos en línea. Medido aquí sobre archivos reales, incluido lo que brotli te iba a ahorrar de todas formas.GuíaEmbellecer o minificar: para qué sirve cada uno y qué le hace al pesoCuatro hojas de estilo reales pasadas por el minificador, medidas en crudo y tras gzip. Quitar todos los espacios ahorró 48, 103, 104 y 147 bytes comprimidos; quitar los comentarios, 57, 1 358, 2 420 y 1 042. Y las cinco entradas que este minificador rompe.