Why do gray bases use lightness variants?

A gray color has no saturation, so changing hue alone would repeat the same color. Every mode deliberately varies gray lightness.

Are the suggested colors accessible together?

A palette is a design suggestion. Check the actual foreground/background pairs, text sizes and interactive states before using it.

Generate hue or lightness palette suggestions.

Base color (HEX)

Palette mode

Hue-based suggestions preserve the base color. Check contrast before pairing text and backgrounds.

#00e9f3
#00adf3
#0070f3
#0033f3
#0a00f3

Design Tools Local processing

Choose a six-digit HEX base and palette mode, then copy individual values or the full list.

Use an opaque six-digit HEX color.

Select analogous, complementary, triadic, tetradic or monochromatic. Gray bases use lightness variations because hue has no visible effect.

Copy one HEX value or the current list. Invalid edits disable current output.

Inputs are processed in your browser. Analytics and advertising can make separate network requests.

Why do gray bases use lightness variants?: A gray color has no saturation, so changing hue alone would repeat the same color. Every mode deliberately varies gray lightness.
Are the suggested colors accessible together?: A palette is a design suggestion. Check the actual foreground/background pairs, text sizes and interactive states before using it.