Conversor de colores

¿Qué es Conversor de colores?

Color Converter es un conversor de colores HEX a RGB a HSL gratuito y en línea, pensado para desarrolladores y diseñadores. Escribe un color en cualquier notación —HEX (#rrggbb o la forma abreviada #rgb), RGB (como "255, 100, 0" o "rgb(255 100 0)") o HSL (como "220, 91%, 64%")— y todos los demás formatos se actualizan al instante junto a una gran muestra de vista previa en vivo. Un selector de color nativo te permite elegir un tono de forma visual, y cada valor tiene un botón de copia con un solo clic, así que resulta muy práctico cuando necesitas igualar colores de marca o traducir valores de color CSS entre el código y las herramientas de diseño.

Cómo usar Conversor de colores

1. Escribe o pega un color en el campo HEX, RGB o HSL, o haz clic en la muestra del selector de color para elegir un tono de forma visual.
2. Observa cómo los otros dos campos y la gran muestra de vista previa se actualizan al instante para reflejar el mismo color.
3. Consulta los recuadros de resumen R / G / B, H / S / L y HEX que aparecen debajo para ver los valores de cada canal convertido.
4. Haz clic en el botón de copia junto a un campo para copiar su valor: HEX copia la cadena #rrggbb, mientras que RGB y HSL copian cadenas rgb(...) y hsl(...) listas para usar.
5. Si un valor es rechazado, revisa el error en línea y vuelve a introducirlo en el formato que indica la pista del campo.

Ejemplos

#ff6400

RGB 255, 100, 0 / HSL 24, 100%, 50%

#fff

HEX #ffffff / RGB 255, 255, 255 / HSL 0, 0%, 100%

Preguntas frecuentes

¿Qué formatos de color admite este conversor?

Convierte entre tres formatos: HEX (#rrggbb completo y la forma abreviada #rgb), RGB (0-255 por canal) y HSL (tono en grados, saturación y luminosidad en porcentaje). Por ahora no admite alfa/opacidad, HSV, CMYK ni nombres de colores CSS.

¿Por qué mi color muestra un error "Invalid HEX color", "Invalid RGB color" o "Invalid HSL color"?

El valor no coincide con el formato esperado o está fuera de rango. HEX debe tener 3 o 6 dígitos hexadecimales, los canales RGB deben estar entre 0-255, y la saturación y luminosidad de HSL deben estar entre 0-100%. Vuelve a introducirlo siguiendo la pista que aparece debajo de ese campo.

¿Puedo pegar un valor CSS completo como rgb(255 100 0)?

Sí. Los campos RGB y HSL simplemente extraen los números del texto, así que tanto "255, 100, 0" como "rgb(255 100 0)" funcionan, y los botones de copia generan cadenas rgb(...) y hsl(...) listas para usar.

¿Se redondean los valores convertidos?

Sí. Los canales RGB y los valores HSL se redondean a números enteros, por lo que una conversión de ida y vuelta puede diferir en una unidad respecto al original. La salida HEX siempre tiene dos dígitos por canal (#rrggbb).

¿Se suben mis datos de color a algún lugar?

No. Toda la conversión se ejecuta localmente en tu navegador con JavaScript: no se envía nada a ningún servidor ni se sube ningún valor de color, así que funciona de forma privada e incluso sin conexión una vez cargada la página.