título: "Color Converter: convierte HEX, RGB, HSL, HWB y CMYK de la manera correcta" slug: herramienta de guía del convertidor de color: categoría del convertidor de color: tipo de color: clúster
Convertidor de color: convierta HEX, RGB, HSL, HWB y CMYK de la manera correcta
La primera vez que un color me mordió estaba en una tirada. Había creado una página de inicio para uno de mis productos de WordPress, cerré la marca azul en el navegador y luego envié el mismo "blue" a una imprenta para comprar un lote de pegatinas. Lo que volvió fue un azul marino plano y ligeramente grisáceo que no se parecía en nada a la pantalla. Nadie había convertido el color de la pantalla RGB a CMYK, así que la impresora adivinó, y la suposición era errónea. Ese fue el día en que dejé de tratar un color como una sola cadena y comencé a tratarlo como un valor que debe hablarse en varios idiomas a la vez.
Para eso es exactamente un conversor de color. Le das un color en una sintaxis y te devuelve todas las demás sintaxis, por lo que el azul en tu CSS, el azul en tu archivo de diseño y el azul que recibe tu impresora son probablemente del mismo color. Construí el convertidor de color en Toolz.dev porque estaba cansado de pegar códigos hexadecimales en tres sitios diferentes para obtener RGB, HSL y CMYK por separado.
TL;Dr: Un convertidor de color toma un color y lo reexpresa en HEX, RGB, HSL, HWB y CMYK a la vez, además del nombre de color CSS más cercano. Utilice RGB y HEX para pantallas, HSL o HWB cuando desee aplicar un color a mano y CMYK para imprimir. El convertidor Toolz.dev se ejecuta completamente en su navegador, mantiene intacto el canal alfa y nunca carga lo que pega.
¿qué es un convertidor de color?
Un convertidor de color analiza un color escrito en cualquier sintaxis CSS común y calcula su equivalente en las demás. Qué sintaxis existen y exactamente cómo se convierte cada una está definida por Módulo de color CSS Nivel 4. Las matemáticas no son complicadas, pero hacerlo a mano es tedioso y propenso a errores. Convirtiendo #4466EE a RGB significa dividir los seis dígitos hexadecimales en tres pares y leer cada par como un número de base 16: 44 este 68, 66 es 102 y EE es 238, dando rgb(68, 102, 238). Ir en sentido contrario significa dividir cada canal en una cadena hexadecimal de dos dígitos y unirlos. Llegar a HSL significa normalizar los canales, encontrar el mínimo y el máximo, y calcular el tono, la saturación y la ligereza de ellos. No quieres hacer eso en tu cabeza a las 2 de la madrugada.
El valor de un convertidor no es sólo guardar aritmética. Garantiza coherencia. Cuando una herramienta produce todos los formatos a partir de un único color analizado, no hay posibilidad de que el RGB que copió y el HSL que copió describan colores ligeramente diferentes porque redondeó de manera diferente entre pasos. Una fuente, una verdad, cada formato.
¿Por qué existen formatos de color?
Cada formato de color sobrevive porque es realmente bueno en un solo trabajo.
RGB es como funcionan las pantallas. Una pantalla emite luz roja, verde y azul, y mezclar esas tres a diferentes intensidades produce cada color que ves. Eso hace que RGB sea el idioma nativo del navegador: sea cual sea la sintaxis que escribas en CSS, el motor de renderizado lo resuelve en RGB antes de iluminar un píxel.
HEX es RGB en taquigrafía. #4466EE es lo mismo que rgb(68, 102, 238), simplemente empaquetado en una cuerda compacta que es fácil de pegar en una hoja de estilo o en una herramienta de diseño. Es popular porque es corto e inequívoco, no porque sea más capaz.
HSL describe un color por tono, saturación y ligereza. Es el formato que busco cuando afino manualmente una interfaz de usuario. Para oscurecer un botón al pasar el cursor, dejo caer la luminosidad unos puntos y dejo el tono y la saturación en paz. Tratar de hacer eso en RGB sin formato significa cambiar los tres canales en cantidades desiguales y esperar que el tono no se desvíe.
HWB, definido en la especificación CSS Color Module Nivel 4 (https://www.w3.org/TR/css-color-4/), describe el mismo tono según la cantidad de blanco y la cantidad de negro que se mezclan. Se asigna claramente a cómo la gente realmente piensa sobre los tintes y tonos: agregue blanco para aclarar, agregue negro para oscurecer. Es más nuevo, por lo que lo uso principalmente cuando la legibilidad del código importa más que el alcance del navegador.
CMYK es el modelo de impresión. Las impresoras colocan tinta cian, magenta, amarilla y negra sobre papel blanco, y cada tinta resta luz en lugar de agregarla. Por eso un color de pantalla vívido puede parecer más apagado en el papel: las gamas de colores que pueden producir los dos modelos, llamadas gamas, son diferentes. Un convertidor le ofrece la aproximación CMYK, pero no puede inventar tinta que no exista.
¿cómo convierto HEX a RGB y viceversa?
La conversión más común, por un amplio margen, es HEX a RGB y RGB a HEX. Aquí está el método manual para que pueda verificar la cordura de cualquier herramienta, incluida la mía.
Para convertir HEX a RGB, divida los seis dígitos en tres pares y lea cada uno como un número hexadecimal de 0 a 255. Taquigrafía de tres dígitos como #46E se expande duplicando cada dígito #4466EE primero. Para convertir RGB a HEX, tome el valor de cada canal, conviértalo en una cadena hexadecimal de dos dígitos con un cero inicial si es necesario y únalo detrás de un hash.
En lugar de hacer esto repetidamente, pegue el valor en convertidor de color y lea todos los formatos a la vez. Si también necesita elegir un color visualmente y verlo actualizar en vivo, el selector de color es el mejor punto de partida y las dos herramientas comparten el mismo núcleo de conversión, por lo que sus números coinciden.
¿cuándo debo usar CMYK en lugar de RGB?
Utilice CMYK sólo cuando la salida sea tinta sobre papel. Las tarjetas de presentación, las pegatinas, los envases y cualquier trabajo de impresión comercial esperan valores CMYK, y enviar RGB a una impresora significa que la impresora o su software se convierte para usted, a menudo con resultados que no aprobó. Ese fue mi error de etiqueta en una oración.
Utilice RGB y su taquigrafía HEX para cualquier cosa que se muestre en una pantalla: sitios web, aplicaciones, gráficos sociales, vídeos. Si un proyecto abarca ambos mundos, mantenga RGB o HEX como su fuente de verdad y genere la aproximación CMYK con un convertidor en el momento en que lo entrega para imprimir, para que pueda observar los valores CMYK y marcar cualquier color que cambie mal antes de que le cueste una tirada.
¿cómo se comparan los formatos de color?
| formato | mejor para | Soporte alfa | ejemplo |
|---|---|---|---|
| aojo | Css compacto, traspaso de diseño | Sólo formulario de 8 dígitos | #4466EE |
| RGB/RGBA | Pantallas, color programático | Sí (RGBA) | rgb(68, 102, 238) |
| HSL/HSLA | Ajuste manual de tono y ligereza | Sí (HSLA) | hsl(228, 83%, 60%) |
| HWB | Tintes y matices legibles | Sí (con barra alfa) | hwb(228 27% 7%) |
| CMYK | Imprimir, tinta sobre papel | prohibido | cmyk(71%, 57%, 0%, 7%) |
Vale la pena tener en cuenta la tabla porque se asigna perfectamente a un flujo de trabajo: diseñar en HEX o seleccionar visualmente, sintonizar HSL o HWB, enviar a pantallas en RGB o HEX y convertir a CMYK solo en el límite de impresión.
¿Cómo viaja la transparencia entre formatos?
Alfa es donde muchas conversiones salen mal silenciosamente. El canal alfa controla la opacidad, de 0 (completamente transparente) a 1 (completamente opaco). RGBA y HSLA lo llevan como cuarto valor, y un HEX de 8 dígitos lo lleva como cuarto par: #4466EECC ¿es azul con aproximadamente un 80 por ciento de opacidad, porque CC es 204 de 255. HEX simple y cmyk() no tener ningún canal alfa.
El convertidor Toolz.dev conserva alfa en todos los formatos que lo admiten. Si pegas rgba(0, 0, 0, 0.5) obtienes #00000080 en la fila HEXA y hsla(0, 0%, 0%, 0.5) en la fila HSLA, todos describen el mismo negro medio transparente. Cuando copia la fila HEX simple o CMYK, está copiando el color completamente opaco, lo cual es una elección deliberada, no un error: esos formatos no pueden expresar opacidad, por lo que muestran el color como si fuera sólido. Cuando la transparencia importa, copie desde una fila compatible con alfa.
¿puedo convertir un nombre de color CSS?
Sí, y funciona en ambas direcciones. Escriba una palabra clave como tomato, rebeccapurple, o slategray y el convertidor lo resuelve en HEX, RGB, HSL, HWB y CMYK. El conjunto completo de 148 colores con nombre proviene de la especificación CSS Color Module Nivel 4, por lo que los valores coinciden exactamente con lo que resuelve un navegador.
Ir en sentido contrario es donde resulta realmente útil. Pegue un color numérico y el convertidor informará el nombre CSS exacto si uno coincide, y siempre mostrará el color con nombre más cercano por distancia RGB cuando no lo hace. Esa coincidencia más cercana es útil para nombrar variables y escribir documentos de diseño legibles: #663399 vuelve como rebeccapurple, y algo parecido vuelve como "más cercano: rebeccapurple" para que sepas en qué barrio te encuentras.
¿Cómo se ajusta esto a un flujo de trabajo de diseño real?
Así es como uso el color en un proyecto y dónde encaja cada herramienta.
Empiezo eligiendo un color primario, normalmente visualmente con el selector de color. Una vez que tengo mi marca azul, la reviso convertidor de color para bloquear sus valores HEX, RGB, HSL y CMYK en un solo lugar, los pego en el documento del sistema de diseño para que cada compañero de equipo y cada proveedor trabajen con los mismos números.
Luego construyo la paleta. Los tonos de soporte provienen de la ligereza en HSL y verifico cada par de texto en segundo plano con el comprobador de contraste de color entonces se puede acceder a la paleta antes de su envío, no después de una queja. Cuando necesito un fondo florecido, introduzco dos de esos colores en el generador de gradiente.
Finalmente, para espaciar responsivamente y tipografía alrededor de todo ese color, combino la paleta con Generador de abrazaderas CSS por lo tanto, los tamaños escalan tan suavemente como los colores son consistentes. El color y el diseño son dos mitades del mismo pulido.
Si le importa dónde van sus datos mientras trabaja, vale la pena leer cómo los manejan estas herramientas. Todo en el convertidor de color se ejecuta en el lado del cliente, una opción de diseño sobre la que escribí en el guía de privacidad de datos en herramientas online, y se encuentra junto al resto de mi equipo diario en el Kit de herramientas para desarrolladores web.
¿Es lo suficientemente preciso para la producción?
Para trabajar en pantalla, sí, sin calificación. HEX, RGB, HSL y HWB son representaciones exactas del mismo color sRGB, por lo que convertir entre ellos viajes de ida y vuelta de forma limpia: convierte un color a HSL y viceversa y aterrizas en el mismo triple RGB, más o menos una unidad de redondeo. en un canal. Ese redondeo es inherente a representar un color continuo en canales enteros, no es un defecto en ninguna herramienta.
Para CMYK, trate la salida como una aproximación estándar sólida en lugar de una prueba administrada por colores. El color de impresión verdadero depende del papel, las tintas y el perfil ICC específicos que utiliza su impresora, que ninguna herramienta basada en navegador puede conocer. El convertidor utiliza la ingenua fórmula estándar CMYK, que es exactamente lo que muestran la mayoría de las herramientas de diseño de forma predeterminada y es un punto de partida confiable. Cuando un trabajo es crítico en cuanto a color, obtenga una prueba física de la impresora antes de ejecutarlo por completo. Esa es la lección que me enseñaron mis pegatinas grisáceas y azul marino, y es más barato aprender de este párrafo que de una caja de pegatinas incorrectas.
¿qué pasa con los espacios de color más nuevos como LAB y OKLCH?
Si sigues de cerca el CSS lo habrás visto lab(), lch(), oklab()y oklch() apareciendo en hojas de estilo y herramientas de diseño. Estos provienen de la especificación CSS Color Module Nivel 4 y resuelven un problema real: RGB, HSL y HWB están todos vinculados al modelo de pantalla sRGB, por lo que dos colores que se ven igualmente diferentes al ojo pueden estar separados por distancias numéricas muy diferentes, y una pantalla de gama amplia puede mostrar colores que sRGB simplemente no puede describir. Los espacios de color OK son perceptualmente uniformes, lo que los hace excelentes para generar paletas escalonadas uniformemente e interpolar gradientes que no se enturbian en el medio.
deliberadamente mantuve este convertidor enfocado en los formatos que pegas en CSS de producción diaria y a mano en las impresoras: HEX, RGB, HSL, HWB y CMYK. Ese es el conjunto que cubre la inmensa mayoría de las tareas reales, y cada una de ellas se asigna limpiamente al mismo color sRGB, por lo que las conversiones entre ellas son exactas y reversibles. Los espacios de gama más amplia implican decisiones de mapeo de gama que son fáciles de equivocar sutilmente, y mezclarlas en un convertidor simple intercambiaría claridad por cobertura que la mayoría de las personas no necesitan.
La regla práctica que sigo: busque OKLCH cuando esté generando algorítmicamente una paleta o un gradiente y desee pasos perceptivamente uniformes, y permanezca con HEX, RGB y HSL para el trabajo diario de escribir componentes. Cuando diseñe en OKLCH, convierta los colores de anclaje resultantes a HEX o RGB con su herramienta de diseño antes de la transferencia, de modo que los valores en su hoja de estilo sean los mismos que este convertidor y sus compañeros de equipo puedan leer.
Preguntas frecuentes
¿cómo convierto HEX a RGB?
Divida el código HEX de seis dígitos en tres pares y lea cada uno como un número hexadecimal de 0 a 255. En #4466EE, 44 este 68 (roșu), 66 es 102 (verde) y EE es 238 (azul), dando rgb(68, 102, 238). Pegue el código HEX en el convertidor y el valor RGB aparecerá inmediatamente junto con cualquier otro formato.
¿cómo convierto RGB a HEX?
Convierta cada uno de los valores rojo, verde y azul (0 a 255) en un número hexadecimal de dos dígitos y únalos después de un hash. rgb(68, 102, 238) se convierte en #4466EE. El convertidor hace esto instantáneamente y también le proporciona el formulario HEXA de 8 dígitos cuando hay un valor alfa presente.
¿cuál es la diferencia entre HSL y HWB?
HSL describe un color por tono, saturación y ligereza, mientras que HWB describe el mismo tono por cuánto blanco y cuánto negro se mezclan con él. HWB suele ser más intuitivo para tintes y tonos: aumentar la blancura aclara el color y aumentar la negrura lo oscurece. Ambos se asignan exactamente al mismo valor RGB, por lo que puedes cambiar entre ellos libremente.
¿cuándo debo usar CMYK en lugar de RGB?
Utilice CMYK para imprimir y RGB para pantallas. CMYK es un modelo sustractivo basado en tintas cian, magenta, amarillas y negras, por lo que es lo que esperan las impresoras comerciales. RGB es aditivo y describe la luz emitida por las pantallas. Un color de pantalla tiene una aproximación CMYK, pero las dos gamas difieren, por lo que los colores de pantalla vivos pueden verse más apagados en la impresión.
¿el convertidor admite transparencia?
Sí. Proporcione un valor alfa a través de rgba(), hsla(), o un HEX de 8 dígitos y la opacidad se conserva en cada salida compatible con alfa. Formatos sin canal alfa, como HEX simple y cmyk(), muestra el color completamente opaco, así que comprueba la salida RGBA o HEXA cuando la transparencia importe.
¿puedo convertir un nombre de color CSS?
Sí. Escriba una palabra clave CSS como tomato, rebeccapurple, o slategray y el convertidor lo resuelve en HEX, RGB, HSL, HWB y CMYK. También funciona a la inversa: pega un color numérico e informa el nombre CSS exacto si uno coincide, más el color con nombre más cercano como referencia.
¿el conversor de color es gratuito y privado?
Sí. El convertidor es completamente gratuito, sin registro, sin límites ni marcas de agua. Todos los análisis y conversiones se ejecutan en su navegador utilizando JavaScript del lado del cliente, por lo que los colores que ingresa nunca salen de su dispositivo y la herramienta sigue funcionando sin conexión una vez que la página se ha cargado.
