Convertidor de Color
Convierte cualquier color entre HEX, RGB, HSL, HSV y CMYK. Elige un color o escribe un valor en cualquier formato: todas las demás notaciones se actualizan al instante, directamente en tu navegador.
HEX
RGB
HSL
HSV
hsv(18, 95%, 96%)
CMYK
cmyk(0%, 66%, 95%, 4%)
Cómo usar Convertidor de Color
- 1
Elige o pega un color
Haz clic en la muestra de color para abrir el selector, o pega un valor en el campo HEX, RGB o HSL. Toda la herramienta se adapta al color que elijas.
- 2
Edita en cualquier formato
Escribe directamente en el campo HEX, RGB o HSL. Todas las demás notaciones —incluidas HSV y CMYK— se recalculan en cuanto haces un cambio.
- 3
Consulta todas las notaciones
Visualiza el mismo color expresado de cinco maneras a la vez, para reproducir un diseño en CSS, impresión y editores de imagen sin recurrir a una segunda herramienta.
- 4
Copia lo que necesites
Usa el botón de copiar junto a cualquier valor para llevarlo al portapapeles, listo para pegarlo en tu hoja de estilos o tu archivo de diseño.
Guía práctica de los formatos de color
El mismo color, distintas notaciones
HEX, RGB, HSL, HSV y CMYK no son colores diferentes; para el trabajo en pantalla son formas distintas de escribir el mismo punto en el espacio de color. El rojo puro puede escribirse como #ff0000, rgb(255, 0, 0) o hsl(0, 100%, 50%), y los tres se renderizan de forma idéntica. Elegir una notación es cuestión de cuál resulta más fácil de razonar para la tarea que tienes delante, y por eso un conversor que las muestra una al lado de la otra te ahorra tiempo real. Eliges el formato que encaja con tu herramienta y lo copias, en vez de hacer la aritmética a mano.
La única excepción es CMYK, que apunta a la tinta y no a la luz, por lo que no se corresponde a la perfección con los demás; es algo que conviene tener presente y a lo que volvemos más abajo.
HEX y RGB son los mismos números
RGB describe un color como tres canales —rojo, verde y azul—, cada uno con un rango de 0 a 255, mezclados como luz. HEX es sencillamente esos mismos tres números escritos en base dieciséis, dos dígitos hexadecimales por canal. Así, en #f5530c el f5 es el canal rojo, que vale 245; el 53 es el verde, que vale 83; y el 0c es el azul, que vale 12, lo que da exactamente rgb(245, 83, 12). Como un byte alberga valores del 0 al 255, cada canal necesita exactamente dos dígitos hexadecimales, y la conversión entre ambos es directa y sin pérdidas.
El HEX abreviado es una comodidad: un código de tres dígitos duplica cada dígito, de modo que #f50 se expande a #ff5500. Esta herramienta lee la forma abreviada igual que lo hace un navegador, y acepta el código con o sin la almohadilla inicial, en mayúsculas o en minúsculas.
Alfa: RGBA y HSLA
Añadir un canal alfa vuelve un color parcialmente transparente. RGBA y HSLA agregan un cuarto valor, una opacidad que va de 0 para totalmente transparente a 1 para totalmente opaco, así que rgba(245, 83, 12, 0.5) es ese mismo naranja a media opacidad. El CSS moderno también admite HEX de ocho dígitos, donde los dos últimos codifican el alfa como un byte, de modo que un alfa de un medio es aproximadamente el par hexadecimal 80 añadido al color.
El alfa es lo que permite a un color fundirse con lo que haya detrás, algo esencial para superposiciones, veladuras, sombras suaves y efectos de vidrio tintado. Recuerda que el mismo alfa se ve distinto sobre fondos distintos, ya que la transparencia significa que la apariencia final es una mezcla de tu color y la capa que tiene debajo.
Por qué HSL es más fácil de ajustar
HSL describe un color tal como una persona piensa en él: el tono es la posición en la rueda cromática, de 0 a 360 grados; la saturación es lo vívido que es, expresado como porcentaje; y la luminosidad es lo brillante que es, también como porcentaje. Esa estructura hace que el ajuste manual resulte intuitivo. Para obtener un tono más oscuro del mismo color bajas la luminosidad y dejas el tono y la saturación intactos; para apagar un color bajas la saturación. Hacer lo equivalente en RGB en crudo implica cambiar los tres canales a la vez, lo cual es mucho más difícil de calcular a ojo.
Por eso HSL brilla a la hora de construir sistemas de color. ¿Quieres un estado de hover algo más oscuro que el base, o una fila de muestras de color que compartan el tono pero recorran la luminosidad por pasos? Ajusta un solo número de HSL. HSV, que también se escribe HSB, está estrechamente emparentado, pero combina el tono y la saturación con el valor, o brillo, en lugar de la luminosidad, y es el modelo que exponen muchos editores de imágenes y selectores de color, así que poder leer ambos te mantiene fluido entre las herramientas de diseño.
Ejemplo resuelto: blanco, negro y un color intermedio
Los extremos son limpios. El blanco es #ffffff, que es rgb(255, 255, 255) y hsl(0, 0%, 100%): todos los canales al máximo o, en términos de HSL, luminosidad plena sin saturación, por lo que el tono es irrelevante. El negro es #000000, rgb(0, 0, 0) y hsl(0, 0%, 0%): todo a cero. Un gris medio se sitúa a mitad de camino, cerca de #808080 y rgb(128, 128, 128), que en HSL es hsl(0, 0%, 50%), lo que muestra muy bien que cualquier neutro tiene saturación cero y una luminosidad que sigue a su brillo.
Ahora un color real: ese mismo naranja, #f5530c, se lee como rgb(245, 83, 12) y como aproximadamente hsl(18, 92%, 50%). La forma HSL te dice de un vistazo que es un tono cálido cercano al rojo anaranjado, muy saturado y de luminosidad media, información que la cadena hexadecimal oculta. Pega cualquiera de estos en la herramienta y observa cómo los demás se completan al instante.
CMYK y los límites del paso de pantalla a impresión
CMYK son las siglas en inglés de cian, magenta, amarillo y negro (key), donde key es el negro, y es un modelo sustractivo concebido para la tinta sobre el papel y no para la luz en una pantalla. Como funciona restando luz que el papel refleja, no puede reproducir todos los colores vívidos que sí logra una pantalla luminosa, de modo que un azul o un verde brillantes en pantalla suelen salir más apagados en la impresión. Los valores CMYK que reporta esta herramienta son una conversión matemática directa desde RGB y resultan realmente útiles como punto de partida, pero no sustituyen a un flujo de impresión con gestión de color.
Para impresiones donde el color es crítico, confirma siempre los resultados con el perfil ICC real de tu impresora y con una prueba de color, porque el dispositivo, el papel y las tintas alteran el resultado. Considera la salida CMYK de aquí como una estimación rápida, no como una garantía.
Colores con nombre y el salto a la gama amplia
El CSS también incluye unos 150 colores con nombre, palabras como tomato, rebeccapurple y slategray, cada una de las cuales no es más que un alias de un valor hexadecimal concreto. Resultan prácticos para prototipos rápidos y para tonos fáciles de recordar, aunque para un sistema de diseño de verdad los valores hexadecimales o HSL explícitos te dan un control y una coherencia más finos. Los colores con nombre son etiquetas cómodas, no un espacio de color aparte.
De cara al futuro, las funciones de color de CSS más recientes van más allá de la gama clásica sRGB que estos formatos presuponen. Las funciones para espacios como oklch, perceptualmente uniforme, y la más amplia display-p3 pueden expresar colores más saturados de los que HEX y RGB alcanzan, algo que importa a medida que las pantallas modernas se vuelven más capaces. Los valores HEX, RGB, HSL y HSV que esta herramienta maneja siguen siendo la moneda corriente del día a día en la web, y comprenderlos es la base para adoptar esos espacios más nuevos con confianza.
Preguntas frecuentes
¿Cómo convierto un color HEX a RGB?
¿Cuál es la diferencia entre HSL y HSV?
¿Admite el formato HEX abreviado de 3 dígitos?
¿Para qué se usa CMYK?
¿Se suben mis datos a un servidor?
Herramientas relacionadas
Sigue trabajando con estas prácticas herramientas