Conversor de color

¿Qué es un conversor de color?#

Un conversor de color traduce una descripción de un color en las demás descripciones que tu pila necesita realmente. Los diseñadores te dan un valor HEX de una maqueta; CSS te permite escribir rgb() o hsl(); una cadena de design tokens quiere una variable CSS; una librería de gráficos pide una tupla RGBA con canal alfa. El mismo color va cambiando de traje, y pierdes tiempo real convirtiendo entre ellos a mano o adivinando con una calculadora.

Esta página hace las cuatro conversiones a la vez. Escribe o elige un color y obtienes de inmediato sus valores HEX, RGB, HSL y una declaración de variable CSS lista para pegar, además de una muestra de vista previa en vivo y una paleta de cinco pasos para aclarar y oscurecer derivada exactamente de ese color. Todo se calcula localmente en tu navegador.

La razón de que HEX, RGB y HSL coexistan es que cada uno es mejor para un trabajo distinto. HEX (#4f46e5) es compacto y domina el CSS, la exportación de Figma y las guías de marca. RGB (rgb(79, 70, 229)) hace explícitos los canales rojo/verde/azul, que es lo que esperan el código de imagen y la manipulación de píxeles de canvas. HSL (hsl(243, 75%, 59%)), dividido en tono, saturación y luminosidad, es la única con la que un humano puede razonar: «acláralo un 10 %» es el cambio de un solo número en HSL y una engorrosa danza de tres números en RGB.

Cómo se usa#

1. Fija el color de entrada de una de estas dos formas:
   • Pulsa el cuadro de color de la izquierda para abrir el selector de color nativo del sistema operativo y elegir visualmente.
   • O escribe un valor en el campo de texto que está a su lado. Se aceptan HEX (#4f46e5, #abc o #4f46e5ff de 8 dígitos con alfa), rgb() / rgba() y hsl() / hsla().
2. Lee los resultados en la lista de la derecha: HEX, RGB, HSL y Variable CSS. Cada campo es de solo lectura; pulsa dentro y copia, o úsalo como referencia mientras trabajas.
3. Observa el gran bloque de vista previa de la derecha: se rellena con el color actual para que puedas verificarlo contra tu diseño.
4. Usa la paleta de 5 muestras bajo la vista previa. Genera las variantes darker, dark, base, light y lighter desplazando la luminosidad HSL en pasos de 10 puntos: muy útil para estados hover/activo o para construir una escala tonal a partir de un único color de marca.
5. La línea de estado confirma la conversión o muestra un mensaje Color no válido si tu entrada no se pudo analizar.

Características clave#

• Tres formatos aceptados, cuatro devueltos. Pega HEX, rgb() o hsl() y obtén a un tiempo HEX, RGB, HSL y una declaración de variable CSS.
• Consciente del alfa. El HEX de 8 dígitos (#rrggbbaa) y las entradas rgba()/hsla() arrastran su canal alfa hasta la salida, así que los colores translúcidos hacen el recorrido de ida y vuelta correctamente.
• Generador de paleta tonal. La fila de cinco pasos para aclarar y oscurecer se deriva del propio HSL de tu color, no de una rampa enlatada: siempre parece de la misma familia.
• Variable CSS lista para copiar. La línea --color-brand: #4f46e5; cae directamente en un bloque :root, renombrada más tarde al nombre de tu token.
• 100 % del lado del cliente. Sin backend, sin petición de red. Tus colores de marca nunca salen de la página.

Ejemplo práctico#

La página carga con el índigo #4f46e5. Con esa entrada, los cuatro campos se rellenan así:

HEX:        #4f46e5
RGB:        rgb(79, 70, 229)
HSL:        hsl(243, 75%, 59%)
CSS var:    --color-brand: #4f46e5;

Observa cómo la forma HSL hsl(243, 75%, 59%) se lee como una frase: tono 243 (un ángulo azul-violeta en la rueda de color), 75 % de saturación (bastante vivo), 59 % de luminosidad (tono medio, algo más claro que el gris central). Si un diseñador te pidiera «hazlo un poco más oscuro para un estado hover», bajarías ese 59 a 49 y obtendrías hsl(243, 75%, 49%), y de hecho esa es justamente la muestra dark que el generador de paleta produce bajo la vista previa, junto con light al 69 % y los extremos al 39 % y al 79 %.

Si en cambio partes de una variable CSS que ya tienes, pega su valor en el campo de texto. rgba(79, 70, 229, 0.5) se analiza como el mismo índigo al 50 % de opacidad, y la salida HEX pasa a #4f46e580 (8 dígitos, alfa 0x80 ≈ 0,5), lista para volcar en una hoja de estilos que prefiera HEX.

Preguntas frecuentes#

Mi diseñador me dio #4f46e5 pero las herramientas de desarrollo muestran rgb(79, 70, 229). ¿Es el mismo color?#

Sí, exactamente. HEX y RGB son dos serializaciones de los mismos valores sRGB. #4f46e5 se divide en pares de bytes 4f, 46, e5, que son el hex de 79, 70 y 229. Usa el que prefiera tu contexto: CSS los trata como idénticos.

¿Cuándo debo recurrir a HSL en vez de a HEX?#

Siempre que quieras cambiar un color de forma predecible por sensación. Oscurecer, aclarar, desaturar o construir una paleta de 5 tonos a partir de un único color de marca es un número en HSL y un frustrante equilibrio de tres en RGB. HEX es mejor para almacenamiento y copiar y pegar; HSL es mejor para editar.

¿Por qué la paleta a veces se ve desigual con colores muy oscuros o muy claros?#

El generador desplaza la luminosidad en pasos fijos de 10 puntos y acota en 0 % y 100 %. Cerca de esos límites los pasos se comprimen porque no queda espacio para moverse: un color que ya está al 95 % de luminosidad solo tiene 5 puntos de «más claro» antes de chocar con el blanco puro. Es una propiedad del propio espacio HSL, no un bug.

¿Admite esta herramienta colores P3 o de gamuta amplia?#

No. Trabaja en el espacio sRGB que describen HEX/RGB/HSL de CSS, que cubre la gran mayoría del trabajo web. Display-P3 y la sintaxis color() son una canalización distinta y aquí no se analizan.