Conversor de Color
Convierte colores entre formatos HEX, RGB y HSL instantaneamente. Vista previa visual del color, verificador de contraste WCAG y paleta generada. Todo el procesamiento se ejecuta localmente en tu navegador.
🔒 Todo el procesamiento ocurre localmente en tu navegador.
Como usar este conversor de color
- Ingresa un color en cualquier formato — HEX, RGB o HSL — y todos los demas formatos se actualizan instantaneamente.
- Usa el selector de color (el cuadro debajo de la vista previa) para seleccionar visualmente cualquier color.
- La vista previa de contraste muestra como se ve tu color sobre fondo blanco y negro, con proporciones de contraste WCAG.
- Haz clic en cualquier muestra de color en la paleta generada para usar ese color como base.
- Copia cualquier formato con un clic.
Acerca de los formatos de color
HEX, RGB y HSL son tres formas diferentes de representar el mismo color. Los codigos HEX son compactos y ampliamente usados en CSS y HTML. RGB nombra explicitamente los canales rojo, verde y azul. HSL es el mas intuitivo — aumentar la luminosidad hara un color mas claro.
La proporcion de contraste WCAG es critica para la accesibilidad web. El texto debe ser legible sobre su fondo. Esta herramienta calcula la proporcion de contraste contra fondos blancos y negros.
El generador de paleta produce colores complementarios (opuestos en el circulo cromatico), analogos (adyacentes) y variaciones de luminosidad/saturacion — dandote una paleta completa desde un solo color base.
Preguntas frecuentes
Que es un codigo de color HEX? ▼
Un codigo de color HEX es una representacion hexadecimal de colores RGB usada en diseno web. Comienza con # seguido de 6 caracteres (o 3 en forma corta), como #3B82F6. Cada par representa la intensidad de Rojo, Verde y Azul. Los codigos HEX son la forma mas comun de especificar colores en CSS y HTML.
Que es el color RGB? ▼
RGB (Rojo, Verde, Azul) es un modelo de color aditivo donde cada color se define por la intensidad de luz roja, verde y azul. Los valores van de 0 (ninguno) a 255 (intensidad completa). rgb(59, 130, 246) representa el mismo azul que #3B82F6.
Que es el color HSL? ▼
HSL (Tono, Saturacion, Luminosidad) es un modelo de color mas intuitivo. Tono es el angulo en el circulo cromatico (0-360 grados), Saturacion es la intensidad del color (0-100%), y Luminosidad es el brillo (0-100%). HSL facilita encontrar tonos y sombras de un color.
Que es la proporcion de contraste WCAG? ▼
La proporcion de contraste WCAG mide que tan distinguible es el texto de su fondo, de 1:1 a 21:1. WCAG 2.1 requiere un minimo de 4.5:1 para texto normal. Esta herramienta muestra la proporcion de contraste contra fondos blancos y negros.
Como funciona el generador de paleta? ▼
La paleta genera variaciones de color basadas en el color seleccionado: variantes mas claras y oscuras, mas y menos saturadas, y colores complementarios y analogos. Haz clic en cualquier muestra para usar ese color.
Se envian mis datos de color a un servidor? ▼
No. Toda la conversion de color, calculo de contraste y generacion de paleta ocurre instantaneamente en tu navegador. No se envia ni almacena nada.
Cual es la diferencia entre HEX y RGB? ▼
Ambos representan el mismo color pero en diferentes formatos. HEX usa notacion base-16. RGB usa numeros decimales (0-255) para cada canal. #FF5500 es lo mismo que rgb(255, 85, 0).