Conversor de color

Un conversor de color toma un valor de color y lo muestra en todos los demás formatos habituales a la vez. Escribe o pega un código HEX, un valor rgb()/rgba() o hsl()/hsla(), y la herramienta lo detecta automáticamente y lista las cadenas equivalentes en HEX, RGB, HSL, HSV y CMYK. Una muestra grande enseña el color, con un fondo a cuadros cuando el color tiene transparencia, y un selector nativo del navegador se mantiene sincronizado con lo que escribas.

¿Qué formatos reconoce?

El campo de entrada acepta HEX de 3, 4, 6 u 8 dígitos (así que tanto #f0f como #ff00ff funcionan, y las formas de 4 y 8 dígitos llevan canal alfa), además de rgb()/rgba() y hsl()/hsla(), tanto en sintaxis clásica separada por comas como en la moderna separada por espacios, como rgb(255 0 0 / 0.5). Sea lo que pegues, la herramienta lo convierte a los otros cuatro formatos: HEX, RGB, HSL, HSV y CMYK. HSV y CMYK siempre se muestran como valores opacos, porque ninguno de los dos tiene una forma estándar de expresar transparencia, mientras que HEX, RGB y HSL conservan el canal alfa y cambian a sus nombres de función con sufijo a (rgba(), hsla()) en cuanto el color deja de ser completamente opaco.

Junto a la conversión, la herramienta también genera una rampa de diez tonos, de muy claro a muy oscuro, manteniendo el matiz y la saturación del color original y bajando la luminosidad en pasos regulares. Es útil para sacar una paleta rápida de tintes y sombras a partir de un solo color de marca sin abrir un programa de diseño.

¿Se sube mi color a algún sitio?

No. El análisis y la conversión ocurren enteramente en tu navegador con operaciones matemáticas simples en JavaScript, sin ninguna llamada a un servidor. El color que escribes o eliges nunca sale de tu equipo, así que puedes convertir colores de marca de un sistema de diseño interno o de la guía de estilo de un cliente sin pegarlos en un sitio de terceros.

Úsalo para convertir el código HEX de un diseñador en los valores RGB o HSL que necesita un archivo CSS, comprobar cómo se ve un color con opacidad parcial, u obtener los porcentajes CMYK para impresión a partir de un color elegido en pantalla. Consulta la referencia del tipo <color> de MDN para ver todas las notaciones de color de CSS, o la especificación CSS Color Module Level 4 para conocer cómo se define la sintaxis separada por espacios.