Chromatic Gray
A gray that carries a subtle but discernible hue — warmer, cooler, or tinted compared to a pure achromatic gray.
What it means
A chromatic gray is what most people mean when they say "gray" in design. True achromatic gray (OKLCH chroma = 0) is rare in production interfaces because it feels sterile and lifeless. Most design systems use grays with a subtle color cast — a blue-gray for tech products, a warm gray for lifestyle brands, a green-gray for sustainability themes.
The difference between chromatic and achromatic gray is often only 1-3% chroma, but it's enough to give the gray personality. Side by side, a chromatic gray next to a pure achromatic gray looks obviously tinted.
Why it matters in palette design
Chromatic grays are how designers inject brand identity into the 60-80% of a UI that's "neutral." PerfectPalette uses pure achromatic grays (zero chroma) specifically so user palettes are the only color on screen — but for your product, choosing a chromatic gray family is one of the highest-leverage decisions. It sets the undertone for the entire interface.
Common confusion
Chromatic gray vs. neutral: A neutral can be chromatic — "neutral" means low chroma, not zero chroma. Beiges, warm grays, cool slates, and tinted off-whites are all neutrals. A chromatic gray is specifically a gray (mid-range lightness) that carries visible hue, while a neutral is any low-chroma color regardless of lightness.
Example
Tailwind's default gray scale ("gray") has a slight blue undertone — it's a chromatic gray. Their "neutral" scale has less hue bias, and "zinc" splits the difference. Choosing between these for your project means choosing the undertone that will pervade 80% of your UI surfaces.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.