Saltar al contenido principal
ToolsByUs

Convertir colores

El conversor de color lee un color en cualquier notación — hex con o sin almohadilla, rgb(), hsl(), hsb(), oklch() o uno de los 148 nombres de color de CSS — y lo imprime en todas a la vez. Acepta la sintaxis con comas y la de espacios, conserva el alfa donde el formato de destino puede alojarlo y no devuelve nada, en lugar de negro, cuando la entrada no es un color que pueda leer.

Solo local
Entrada HEX

Introduce un color a la izquierda. Se aceptan valores hexadecimales con o sin almohadilla, rgb(), hsl(), oklch() y nombres de color CSS.

¿Cómo funciona Convertir colores?

Todo pasa por sRGB. Lo que escribas se analiza en tres canales y un alfa, y cada salida se calcula a partir de eso. Eso es lo que hace consistentes las conversiones: hay una representación en el medio, y no quince fórmulas por pares que pueden contradecirse entre sí.

Lo que acepta el parser

Hex de tres, cuatro, seis u ocho dígitos, con o sin la almohadilla inicial — el hex sin almohadilla importa porque así llegan los valores desde una hoja de cálculo o un archivo de design tokens. Las dos sintaxis de CSS: rgb(255, 136, 0) y rgb(255 136 0 / 50%). Porcentajes, que en rgb() se resuelven contra 255 y no contra 100. hsl(), hsb() / hsv(), oklch(), y las 148 palabras clave de color de CSS.

Lo que hace con algo que no puede leer

Lo dice. Una herramienta de color que convierte un error tipográfico en negro en silencio es peor que una que rechaza la entrada, porque obtienes una muestra, te la crees y la envías a producción. Un hex de longitud incorrecta — cinco dígitos, siete dígitos — es un error tipográfico y no un color, y se rechaza en lugar de rellenarse hasta parecer algo plausible.

Qué conversiones son exactas y cuáles no

Hex, RGB, HSL y HSV son los mismos tres bytes en coordenadas distintas. Esas conversiones van y vuelven de forma exacta, limitadas solo por cuántos decimales se imprimen en la salida.

OKLCH también es exacto en la otra dirección, pero puede describir colores que sRGB no puede mostrar. oklch(0.7 0.3 140) es una coordenada perfectamente válida sin ningún píxel sRGB detrás, y al convertirla se recorta — así que dos valores de OKLCH distintos pueden volver como el mismo hex. Es una propiedad del gamut, no un error de la aritmética.

CMYK es la aproximación. Una conversión real necesita un perfil ICC para la imprenta, el papel y la tinta, y el mismo valor sRGB se convierte en porcentajes de tinta distintos en papel estucado que en papel de periódico. La cifra de aquí es la fórmula independiente del dispositivo que usa todo conversor en línea: correcta para elegir una muestra, incorrecta para una especificación de imprenta.

Cualquier notación

#ff8800
rgb(255, 136, 0)
hsl(32 100% 50%)
darkorange
FF8800

Todas

hex    #ff8800
rgb    rgb(255 136 0)
hsl    hsl(32 100% 50%)
hsv    hsv(32 100% 100%)
oklch  oklch(0.7538 0.1751 55.94)
cmyk   cmyk(0% 47% 100% 0%)

¿Qué opciones y casos límite admite Convertir colores?

Referencia técnica y opciones
ParámetroTipoValor predeterminadoComportamiento y casos límite
HEXentrada / salidaexacto3, 4, 6 y 8 dígitos, con o sin el almohadilla. No distingue mayúsculas de minúsculas.
RGBentrada / salidaexactoAmbas sintaxis, enteros o porcentajes, con alfa después de una barra o como cuarto argumento.
HSLentrada / salidaexactoLos mismos tres bytes en coordenadas polares. El tono se ajusta, por eso 370 es 10.
HSV / HSBentrada / salidaexactoEn lo que se basan la mayoría de las herramientas de diseño. No es CSS válido, por lo que se lee pero nunca es la salida recomendada.
OKLCHentrada / salidarecortaPerceptualmente uniforme y más amplio que sRGB. Una coordenada fuera del gamut se recorta al volver.
CMYKsalidaaproximadoLa fórmula independiente del dispositivo. Una impresora hará la conversión real con su propio perfil.
Nombres de colorentrada148Cada palabra clave de CSS, más `transparent`.
Alfa0–1se mantieneSe conserva en cada formato que pueda expresarlo. CMYK no puede, por lo que lo descarta.

Preguntas frecuentes

¿Qué formatos de color puedo pegar?

Hex de tres, cuatro, seis u ocho dígitos, con o sin almohadilla; rgb() y rgba() en la sintaxis con comas o con espacios; hsl() y hsla(); hsb() o hsv(); oklch(); y cualquiera de los 148 nombres de color de CSS. Los porcentajes funcionan donde CSS los permite. Si se puede interpretar, todos los demás formatos aparecen de inmediato.

¿Por qué mi valor OKLCH vuelve siendo otro color?

Porque OKLCH describe más colores de los que una pantalla sRGB puede mostrar. oklch(0.7 0.3 140) es una coordenada válida sin ningún píxel sRGB detrás, así que al convertirla se recorta el croma hasta que encaja — y dos valores de OKLCH vivos distintos pueden recortarse hasta el mismo hex. Es el gamut, no la aritmética. Si necesitas la versión dentro del gamut, el selector de este sitio limita en lugar de recortar y te dice qué cambió.

¿Puedo fiarme de los números CMYK para imprenta?

Como punto de partida, no como especificación. CMYK depende del dispositivo: el mismo valor sRGB se convierte en porcentajes de tinta distintos en papel estucado que en papel no estucado, y otros diferentes en otra imprenta. Ningún conversor en línea puede saber cuál. Envíale a la imprenta el sRGB o la referencia Pantone y deja que conviertan ellos con el perfil del trabajo.

¿Qué pasa si pego algo que no es un color?

No se produce nada y el campo dice que no pudo leer la entrada. Es deliberado. Un conversor que devuelve negro en silencio ante un error tipográfico te entrega una muestra de la que no tienes motivos para dudar, y un hex de longitud incorrecta — cinco o siete dígitos — es un error tipográfico, no un color que necesite rellenarse.

¿Se envía algo de esto a un servidor?

No. Cada conversión de aquí es aritmética en esta pestaña. La página no hace ninguna petición de red después de cargar, algo que puedes comprobar abriendo el panel de red o, más fácil todavía, apagando tu conexión y viendo cómo sigue funcionando.

¿Qué formato de color debería usar de verdad en CSS?

HEX para un color de marca fijo, HSL cuando quieras derivar una variante más clara o más oscura moviendo un solo número, y OKLCH cuando importa la uniformidad perceptual — un paso de diez puntos de luminosidad en OKLCH se ve como el mismo paso en cualquier tono, cosa que no es cierta en HSL. Los tres describen los mismos colores; lo que cambia es qué ajuste es fácil de hacer a mano.

Equipo de ToolsByUs · Cómo comprobamos nuestras herramientas