Generate palettes with consistent luminance.
This generator makes accessibility rules easy for design systems with extended color palettes.
Color palette generator
Rules for this palette
| Background | Text |
|---|---|
| White | Black |
| Black | White |
These rules apply to all colors in your palette.
How to use these rules
This table gives you minimum text color values to use against each background tint.
For example, if a background of tint 200 is showing a text color of tint 600, this means your text must be at least as dark as your 600 tint to be accessible according to WCAG AA.
Where there are no colors that meet AA on a specific background, a warning will appear with the highest contrast value available in your palette.
Swatches are included for one of your base colors as an example.
The problem with colors
As hue changes, our perception of the color's brightness (luminance) also changes, as our eyes are more or less sensitive to them depending on their position on the spectrum of visible light.
If we are using HSL color space (hue, saturation, lightness), this means certain colors such as red, blue and purple need a higher lightness value to be perceived at the same brightness as other colors such as green and yellow.
For designers, a common pitfall when creating color palettes is to not take this difference in perceived lightness into account, instead simply rotating hue to generate palettes for different colors.
This could lead to different colors at the same lightness 'stop' having wildly different perceived lightness, for example these two colors at 60% lightness:
- HSL(10,100,60) has a luminance of 0.28
- HSL(60,100,60) has a luminance of 0.93
How does this generator work?
This generator attempts to generate a palette of colors at defined stops of perceived lightness (luminance).
Since the priority is consistency between colors, there's no guarantee that the provided base color will exist in the palette in its exact form.
To generate these palettes, the generator accepts a base color and maps it to a set of defined luminance values in the OKLAB color space.
The OKLAB color space is ideal for this purpose as it has a dedicated axis for perceived lightness, meaning we can shift hue independently of how bright the color ends up looking. This is also why hue may shift slightly between light and dark color stops.
What's the point of generating palettes this way?
A palette which has consistent luminance across colors is extremely useful when defining accessibility rules for complex design systems.
For example, if one of your 500-stop colors meets the WCAG AA requirement of 4.5:1 contrast against white, this means all 500-stop colors should be accessible against white.
This means the accessibility rules can be set per stop rather than per stop per color, making these rules much easier to document and communicate, particularly to those without a high level of familiarity with WCAG contrast requirements.
What does the "normalise inputs" toggle do?
Since the palette swatches are derived from the base color, changes in the lightness of this base color can affect the palette as a whole.
The "normalise inputs" toggle sets all base color lightness values to 50% before the swatches are generated, which can cause some shifts in saturation.
The result should be more accurate saturation for palettes which have high variance in perceived lightness across base colors.