Selector de Color

WCAG (Web Content Accessibility Guidelines) define las relaciones mínimas de contraste entre el texto y su fondo para garantizar la legibilidad para personas con visión reducida o daltonismo. AA es el mínimo legal en la mayoría de las jurisdicciones: 4.5:1 para texto normal (menos de 18pt/14pt en negrita), 3:1 para texto grande. AAA es el estándar mejorado: 7:1 para texto normal, 4.5:1 para texto grande. Aproximadamente el 8% de los hombres y el 0.5% de las mujeres tienen algún tipo de deficiencia en la visión del color, lo que hace que el cumplimiento del contraste sea esencial para productos orientados al público. El verificador aquí prueba simultáneamente los colores de texto y de fondo y muestra qué combinaciones pasan o fallan.

Ambos usan el Tono (Hue, 0-360 grados) y la Saturación, pero difieren en el tercer canal. HSL (Lightness) establece el 50% como un color puro saturado, el 0% como negro y el 100% como blanco — lo que lo hace intuitivo para CSS y diseño. HSV (Value/Brightness) establece el 100% de Valor como un color puro saturado y el 0% como negro — no hay blanco puro en HSV a menos que la Saturación sea 0%. Adobe Photoshop, Illustrator y la mayoría de los selectores de color de los sistemas operativos nativos utilizan HSV. CSS y las herramientas de diseño web suelen usar HSL. Esta herramienta convierte entre ambos instantáneamente.

Los valores CMYK mostrados son una conversión matemática desde RGB utilizando la fórmula estándar. Son una aproximación útil para flujos de trabajo de digital a impresión, pero el color de impresión en el mundo real depende en gran medida de la impresora específica, la tinta, el papel y el perfil de color ICC en uso. Para trabajos de impresión profesional, siempre verifique los colores finales con pruebas físicas o consulte las especificaciones de color del servicio de impresión. Los valores CMYK aquí funcionan bien para decisiones de color en etapas iniciales y previsualizaciones de impresión.

Haga clic en la sección Presets y elija entre Tailwind CSS o Material Design. Cada paleta muestra la escala completa de colores (por ejemplo, Tailwind blue-50 hasta blue-950, o Material red 100 hasta 900). Haga clic en cualquier muestra para cargar ese color en el selector y obtenga instantáneamente sus valores HEX, RGB, HSL y otros. Esto es útil cuando se construye dentro de un sistema de diseño existente — puede copiar el formato exacto que necesita (por ejemplo, el valor HSL de Tailwind blue-600) sin buscarlo en otra parte.

Los colores guardados se almacenan en el localStorage del navegador — persisten entre sesiones en el mismo dispositivo y navegador, pero no se sincronizan con un servidor ni entre dispositivos. También se eliminan si borra los datos de su navegador. Para los colores que desea conservar a largo plazo, copie los valores HEX a un documento de diseño o guárdelos en la biblioteca de colores de su herramienta de diseño. No se requiere ninguna cuenta ni inicio de sesión.

Sí. Puede escribir o pegar un código HEX directamente en el campo de entrada HEX (con o sin el prefijo #) y el selector y todos los demás campos de formato se actualizarán inmediatamente. También puede ajustar directamente los controles deslizantes de Tono, Saturación y Luminosidad si desea modificar una propiedad específica sin cambiar las demás. Esto es útil cuando tiene un código hex de un archivo de diseño y quiere verificar su contraste o convertirlo a otro formato.

No. Toda la selección de colores, conversión de formatos, cálculos de contraste y el guardado de paletas se ejecutan completamente en su navegador usando JavaScript. No se envían valores de color, ni paletas guardadas, ni datos de uso a ningún servidor. La herramienta funciona totalmente sin conexión una vez que la página se ha cargado.