Herramientas de color FREE
Elige, convierte y genera colores, paletas, escalas y degradados, con contraste WCAG, sugerencias accesibles y simulación del daltonismo. Todo se calcula en tu navegador.
Selector y conversiones
Todas las notaciones
Detalles técnicos
Contraste
APCA (borrador, información adicional)
APCA es el modelo de contraste perceptual redactado para WCAG 3. Hoy no es un requisito de conformidad y difiere de WCAG 2 en ambos sentidos, así que se muestra como información adicional y nunca como aprobado o suspenso.
Cómo queda
Paletas
Qué pares son legibles
Cada color como texto sobre cada otro. El número es la relación de contraste WCAG; AA son 4,5:1 para texto normal y 3:1 para texto grande y componentes de interfaz.
Copiar la paleta
Escalas
Once pasos construidos en OKLCH, para que los saltos parezcan uniformes y no solo sean números uniformes. El resultado tiene la forma que espera un framework de utilidades donde va una escala; es la escala propia de esta herramienta y no la paleta de ningún framework.
Ajustar la escala
Degradados
Desde una imagen
Suelta una imagen aquí o elige una
Se lee en esta pestaña y nunca se sube. No queda nada al salir de la página.
Visión del color
Un modelo de lo que pierde un par de colores bajo las formas comunes de daltonismo, calculado con la proyección de Vienot, Brettel y Mollon. Es una simulación y no una fotografía de lo que ve una persona concreta.
Pares que dejan de distinguirse
Tomados de la paleta. Solo se listan pares claramente distintos en visión normal: dos colores que ya se parecen son una decisión de diseño, no un hallazgo.
Cada conversión, cada paleta y cada valor de contraste de esta página se calcula en tu navegador. Una imagen que sueltes aquí se lee en un canvas de esta pestaña y nunca se sube.
Qué significan estas cifras y qué no
Calculado aquí, a partir de fórmulas publicadas
Las conversiones siguen CSS Color Level 4, incluida la curva de transferencia sRGB real en lugar de una aproximación, y el contraste sigue la definición de WCAG 2.2. Que un par de colores cumpla el requisito de contraste no hace accesible una página: el contraste es un criterio de conformidad entre muchos, y esta herramienta mide ese. Todo se ejecuta en tu navegador y nada se envía a ningún sitio.
FAQ
¿Se envían mis colores o mis imágenes a algún sitio?
No. Cada conversión, cada paleta, cada escala y cada valor de contraste se calcula en esta pestaña. Una imagen se lee aquí en un canvas y nunca se sube; los colores recientes y tu paleta se guardan en el almacenamiento propio de este navegador, y puedes borrar ambos.
¿Por qué OKLCH y no HSL?
Porque la luminosidad de HSL es un promedio de canales, no algo que mida el ojo. Gira un tono 120 grados en HSL y uno de los tres resultados sale visiblemente más oscuro que los otros; hazlo en OKLCH y los tres se leen como una familia. Lo mismo ocurre con una rampa de tintes: pasos iguales de luminosidad HSL se apelotonan en los extremos. HSL se sigue mostrando, porque es el modelo en el que está escrito mucho código.
¿Superar la comprobación de contraste hace accesible mi página?
No, y aquí la redacción es cuidadosa con eso. Un par de colores cumple un requisito de contraste. El contraste es un criterio de conformidad entre muchos - el orden de foco, las etiquetas, los recorridos de teclado, el movimiento y la estructura son otros tantos - y una página con contraste perfecto puede seguir siendo inservible. Úsalo para zanjar la cuestión del color, no la cuestión entera.
¿Qué es APCA y por qué está en un panel aparte?
Es el modelo de contraste perceptual redactado para WCAG 3. Modela cómo se lee realmente el contraste a un tamaño y un grosor dados, cosa que WCAG 2 no hace, pero es un borrador y hoy no se mide nada contra él. Ponerlo junto a los veredictos WCAG como un igual tergiversaría a los dos, así que vive tras un desplegable y dice lo que es.
¿Cuán fiel es la simulación de daltonismo?
Es la proyección de Vienot, Brettel y Mollon, aplicada en luz lineal, que es la forma habitual de modelar la dicromacia. Muestra lo que pierde un PAR de colores, que es la pregunta que importa: si dos cosas siguen distinguiéndose. Es un modelo de una forma de la condición, no una fotografía de lo que ve una persona concreta, y así lo dice el panel.
¿Se puede pegar la escala generada en la configuración de mi framework?
Sí: la exportación incluye una forma que encaja donde un framework de utilidades espera una escala de color, junto a propiedades personalizadas CSS, variables SCSS y JSON. La rampa es propia de esta herramienta, construida en OKLCH a partir del color que le diste; no es la paleta de ningún framework y no se presenta como tal.
Crea una web mejor, más rápido.
Creamos software y soluciones a medida adaptadas a tus necesidades.




