Acerca de Conversor de color

Color Converter transforma colores entre HEX, RGB, HSL y HSV para CSS del interfaz web, entrega de diseño y limpieza de variables de tema.

Introduce #4f46e5, rgb(...) o hsl(...) para normalizar el color en formatos copiables.

Cómo usar Color Converter

Pega un valor HEX, RGB, RGBA, HSL o HSLA.
Convierte y revisa las salidas HEX, RGB, HSL y HSV.
Usa la muestra de color y copia un formato o todos.

Cuándo usarlo

Convertir un HEX de diseño a CSS rgb() o hsl().
Ajustar lightness y saturation en HSL al probar hover states.
Normalizar valores de color token al limpiar un tema.

Formatos de color y límites

HEX, RGB, HSL y HSV describen el mismo color con coordenadas distintas. Este converter conserva el color RGB; el alpha de RGBA o HSLA se acepta, pero no se conserva en la salida.

HEX de 3 dígitos se expande a HEX de 6 dígitos.
Los canales RGB deben estar entre 0 y 255.
HSL usa porcentajes para S/L y hue gira de 0 a 360 grados.
HSV es común en pickers; HSL suele ser mejor para ajustar temas CSS.

Preguntas frecuentes sobre Conversor de color

¿Convierte HEX to RGB y RGB to HEX?: Sí. Una entrada HEX produce RGB/HSL/HSV, y una entrada RGB produce HEX/HSL/HSV.
¿Por qué falta alpha en el resultado?: La herramienta se centra en conversión de colores opacos, por eso ignora alpha de RGBA/HSLA.
¿Se suben mis colores?: No. Parsing, conversión, preview y copia se ejecutan localmente en el navegador.

Conversión y legibilidad

Cambiar el formato no garantiza contraste. Antes de usar un color en texto, botones o enlaces, pruébalo sobre el fondo real con contraste WCAG, marca y estados UI.

Cómo elegir un formato de color CSS

El mismo color puede escribirse como HEX, RGB, HSL o HSV, pero cada formato sirve mejor a una tarea de mantenimiento.

Usa HEX para valores compactos de diseño y variables de tema estables.
Usa CSS rgb() o hsl() cuando necesites alpha, variables o composición dinámica.
Usa HSL para hover, active y variantes más claras u oscuras, porque hue, saturation y lightness son más fáciles que RGB bruto.

Checks de accesibilidad antes de publicar colores

La conversión mantiene equivalencia, pero no prueba legibilidad, claridad de estados ni cumplimiento de contraste.

Comprueba texto y botones sobre el fondo real con reglas de contraste WCAG.
No comuniques error, éxito o estado disabled solo con color; añade texto, iconos o cambios de forma.
Si usas colores de marca para links o focus rings, revisa también hover, active, disabled y selected.