Editor de Colores
Ajusta y refina colores con precisión. Modifica el tono, la saturación y la luminosidad, genera escalas de tonos y verifica el contraste de accesibilidad para textos.
Sobre esta herramienta
El Editor de Colores es una herramienta completa para ajustar y perfeccionar cualquier color con precisión. Introduce un color en formato HEX, RGB, HSL o incluso por nombre y utiliza los controles deslizantes para modificar el Tono (la tonalidad del color), la Saturación (la intensidad del color) y la Luminosidad (qué tan claro u oscuro es el color). Los cambios se aplican en tiempo real, lo que te permite visualizar el resultado al instante y verificar la legibilidad con textos claros y oscuros. Además, la herramienta convierte automáticamente el color a los formatos más utilizados en diseño y desarrollo web, incluyendo HEX, RGB, HSL, HSV y OKLCH.
Funcionalidades
Para Qué Usar el Editor de Colores
- Crear paletas consistentes para design systems, componentes e interfaces web
- Verificar si las combinaciones de color pasan los criterios de accesibilidad WCAG y APCA antes de publicar
- Adaptar el color de marca para diferentes contextos, como modo oscuro, hover y estados deshabilitados
- Generar escalas de tonos al estilo Tailwind para exportar como variables CSS o tokens de diseño
- Convertir colores entre HEX, RGB, HSL y OKLCH al integrar diferentes herramientas de diseño y desarrollo
Cómo Usar el Editor de Colores
Introduce el color base
Escribe cualquier valor HEX, RGB, HSL o nombre de color en el campo Color Base. La herramienta carga el color automáticamente y lo convierte a todos los formatos disponibles
Ajusta con los sliders
Usa los controles de Tono, Saturación y Luminosidad para modificar el color en tiempo real. Todas las salidas y la escala de tonos se actualizan al instante
Verifica el contraste
La sección de accesibilidad muestra la tasa de contraste con texto blanco y negro en los modelos WCAG 2.1 y APCA, indicando si la combinación pasa o falla los criterios
Copia los valores
Haz clic en cualquier bloque de formato (RGB, HSL, HSV, OKLCH) para copiar el valor directamente. El HEX se muestra en el preview principal
Exporta la escala de tonos
En la sección Tints & Shades, elige el formato de exportación (CSS, SCSS, JSON, Tailwind) y el formato de color (HEX, RGB, HSL u OKLCH). Haz clic en Copiar para usarlo en tu proyecto
Preguntas Frecuentes
WCAG 2.1 utiliza una fórmula matemática simple para calcular el contraste entre colores. APCA (Accessible Perceptual Contrast Algorithm) es un modelo más moderno que considera cómo el ojo humano percibe la luminosidad en diferentes contextos de lectura. Para textos normales, un valor APCA de 60 o más se considera adecuado.
Selecciona el formato de exportación Tailwind y el formato de color deseado. El código generado puede pegarse directamente en tailwind.config.js o en un archivo CSS como propiedades personalizadas. Si usas OKLCH, es compatible nativamente con Tailwind 4.
OKLCH es un espacio de color perceptualmente uniforme, lo que significa que modificar la luminosidad o el croma produce resultados visualmente predecibles. Es el formato adoptado internamente por Tailwind 4 y CSS Color Level 4, siendo ideal para generar escalas de tonos más consistentes que HSL.