Conversor de códigos de color: HEX, RGB, HSL, CMYK y OKLCH

Convertir un nombre CSS o un código de color

Introduce un valor en Color: un nombre CSS como green, un código como #008000 o una notación numérica admitida. El resultado principal HEX muestra el código redondeado a canales de ocho bits. Las salidas RGB, HSL, HSV, CMYK, CIE Lab y OKLCH describen la misma entrada con las convenciones indicadas en cada caso. La primera muestra grande representa el color convertido y la segunda, el nombre CSS más cercano.

El valor inicial #2E86C1 corresponde a rgb(46, 134, 193). Su nombre CSS más cercano es steelblue, cuyo código propio es #4682B4. Son colores diferentes: la búsqueda del nombre es una aproximación cuando la distancia no es cero. Conserva el HEX o RGB original si necesitas reproducir la entrada exacta.

Distinguir los nombres CSS de los nombres cotidianos

La tabla de colores del W3C asigna valores concretos a estas palabras clave. Introduce los nombres tal como aparecen en la primera columna. Sus definiciones pertenecen a CSS y no especifican por sí solas una pintura, un tejido o un pigmento con ese nombre.

purple y violet son nombres distintos. Para compararlos, introduce cada uno por separado; escribir ambas palabras juntas no establece una proporción de mezcla. gray y grey son alias del mismo código. green y lime difieren: el primero utiliza un canal verde de 128 y el segundo, de 255.

Para obtener una secuencia de verdes claros y oscuros, utiliza el generador de paletas. Este conversor recibe un color cada vez. Puede interpretar los códigos de una paleta, pero una cuenta de tonos no forma parte de su entrada.

Pasar tres canales RGB a hexadecimal

Introduce rgb(34, 34, 34). Cada canal decimal vale 34, equivalente a 22 hexadecimal; el resultado es #222222. También se admite la entrada de tres canales sin función, 34 34 34. Al tener los tres canales iguales, representa un gris neutro, más oscuro que la palabra CSS gray de la tabla.

Una entrada RGB necesita los tres canales. El número 34 aislado no determina los otros dos. No completes los valores que faltan por suposición: introduce la combinación que quieres convertir. Cada canal entero debe estar entre cero y 255; los canales RGB porcentuales utilizan el intervalo entre cero y cien por ciento.

Un HEX de seis cifras contiene un par para rojo, otro para verde y otro para azul. Se admite el prefijo # y la abreviatura de tres cifras. En #F80, cada cifra se duplica, dando #FF8800 y rgb(255, 136, 0). Cambiar de base conserva los valores de canal; no añade información sobre cómo se obtuvo o midió el color.

Leer HSL, HSV y CMYK con sus propias unidades

HSL presenta tono, saturación y luminosidad; HSV, denominado también HSB aquí, presenta tono, saturación y valor. Aunque coincida el tono, los otros componentes tienen definiciones diferentes. No traslades un porcentaje de una salida a otra sin considerar qué cantidad representa.

En un gris neutro la saturación es cero. Modificar únicamente su ángulo de tono no genera una diferencia visible. Este comportamiento permite distinguir un componente sin influencia visible de un dato ausente o de una entrada incorrecta.

La herramienta admite sus notaciones documentadas hsl(), hsv() y cmyk(). Que una función sea válida en este formulario no significa que todas ellas sean funciones CSS. La conversión CMYK es numérica y no incorpora un perfil de impresora. Para preparar una impresión, el perfil del dispositivo sigue siendo parte del proceso de conversión.

Conservar el punto blanco y la representación original

La salida CIE Lab (D65) indica expresamente su punto blanco. La entrada lab() del formulario utiliza esa misma convención. CSS lab() utiliza D50. Por tanto, un valor procedente de CSS no debe interpretarse aquí como D65 solo porque la función tenga el mismo nombre.

OKLCH describe luminosidad, croma y tono. Un tono mostrado como none señala un croma presentado como cero. El color conserva su luminosidad y su código HEX; no se convierte por ello en una salida indefinida.

El nombre CSS más cercano se elige mediante distancia en OKLab. La distancia se redondea a cuatro decimales, por lo que 0,0000 puede ocultar una diferencia pequeña. Lee la explicación y conserva la representación original. Algunos nombres comparten código: un cian exacto puede mostrar aqua / cyan, y un gris puede mostrar gray / grey.

La luminancia relativa sirve para otra comparación, la del comprobador de contraste. Un nombre parecido o una muestra atractiva no determina si un texto contrasta suficientemente con un fondo. Para eso hacen falta los dos colores concretos.

Interpretar el redondeo y los avisos

HEX y RGB se redondean a valores enteros de ocho bits. Las demás representaciones utilizan el color de entrada sin ese redondeo final. Si partes de canales fraccionarios o de una conversión HSL, volver a introducir el HEX mostrado puede modificar ligeramente una salida secundaria.

El alfa de una entrada RGBA o HEX con alfa compatible se ignora y genera un aviso. Las muestras devueltas son opacas, incluso si la entrada describía transparencia completa. Palabras como currentcolor, transparent y var(--brand) no se aceptan como colores independientes en este formulario.

Una entrada inválida muestra un error en el campo. Corrige el color o utiliza Restablecer valores predeterminados para volver al ejemplo azul. Antes de copiar un resultado, comprueba el valor introducido, los avisos y la convención de la salida que necesitas utilizar.