Why is this useful?
Most color palette generators create visually appealing gradients, but they often fall short when it comes to practical application. The WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text, yet traditional linear color scales frequently fail to provide sufficient contrast between adjacent colors—making them unsuitable for real-world interfaces where text readability and visual hierarchy are critical.
This tool takes a fundamentally different approach by leveraging non-linear power distribution combined with the OKLCH color space. Unlike HSL
where lightness is not consistent across hue axes, OKLCH uses perceptual lightness, providing better accessibility. By adjusting the distribution
curve rather than spacing colors evenly, you can strategically
cluster colors at the extremes of your palette—maximizing contrast
between colors that will actually be used together (like color-1 paired with color-6 for text on backgrounds).
Beyond aesthetics: Accessibility-first design
Color contrast is the #1 accessibility violation on the web, affecting 83.6% of all websites. This makes the real-time A11Y contrast matrix the cornerstone of this tool. As you adjust parameters, the grid instantly calculates WCAG contrast ratios for every color pair in your palette, clearly marking which combinations pass AA (4.5:1) or AAA (7:1) standards. This allows you to design with confidence, knowing your color system supports both light and dark modes while maintaining accessibility compliance.
Unlike centered palettes that prioritize aesthetic symmetry, this generator focuses on perceptual contrast at the boundaries—where your darkest and lightest colors create the strongest visual hierarchy. OKLCH's perceptual uniformity ensures that color transitions feel natural, making it easier to fine-tune accessible color scales for design systems.
Note: The A11Y grid provides the most value on desktop displays where you can view the full contrast matrix.
