Conversor de colores

Un color, tres dialectos

En un día normal de trabajo el mismo color llega con tres disfraces: la guía de marca te da un código HEX, un canvas o una librería de gráficos quiere los números RGB, y el CSS moderno es más cómodo de ajustar en HSL. Esta página mantiene los tres sincronizados — escribe en el campo que coincida con lo que te dieron y los otros dos se reescriben solos mientras escribes, con la muestra mostrándote cómo se ven realmente los números. El HEX abreviado también funciona: pega #f80 y se expande a #ff8800, exactamente como lo leería un navegador. Aquí no hay ningún selector de color con el que pelear; lo importante es traducir con precisión un valor que ya tienes.

Construir una paleta con HSL

HSL se gana el sueldo en el momento en que necesitas variaciones de un color en lugar del color en sí. Mantén el tono fijo y desliza solo la luminosidad: bájala diez puntos para un estado hover, súbela cuarenta para un fondo teñido, y cada variante sigue siendo reconociblemente el mismo color — algo casi imposible de conseguir editando directamente los dígitos del HEX. Bajar la saturación da la versión apagada y grisácea que funciona para botones deshabilitados y bordes sutiles. Como los campos se actualizan entre sí en vivo, un flujo de trabajo rápido es pegar tu HEX de marca, leer el HSL, ajustar un número, y volver a copiar el HEX recién generado — una pequeña paleta en menos de un minuto, sin ningún software de diseño de por medio.

Límites honestos, y un truco vecino

Dos cosas que este conversor deliberadamente no hace. No tiene canal alfa — el campo RGB habla en rgb(), no en rgba() — así que la transparencia es algo que añades después en tu CSS, donde corresponde. Y los valores HSL se redondean a números enteros por legibilidad, lo que significa que un viaje de ida y vuelta de HEX a HSL y de vuelta a HEX puede desviarse un punto; invisible en pantalla, pero vale la pena saberlo si comparas archivos de estilo con un diff. La herramienta es gratis y sin límites, como todas nuestras herramientas para desarrolladores. Una combinación que vale la pena recordar: en cuanto esta página te haya dicho exactamente de qué color es el fondo de un logo, nuestra herramienta de transparencia de imagen puede eliminar precisamente ese color de la imagen — un práctico proceso de dos pasos al preparar gráficos para un sitio web.

Tres formas de describir el mismo color

HEX y RGB describen un color según la intensidad de luz roja, verde y azul (solo que con notaciones distintas) — HSL, en cambio, lo describe por tono, saturación y luminosidad, lo que suele ser más intuitivo para elegir o ajustar un tono a mano.