Neutral Engine

Neutral colors are special in WebShades. They require different handling than chromatic colors to maintain their neutral character across all shades. The semantic surface family is auto assigned to the neutral family that best harmonizes with your chromatic control color.

How WebShades Picks Harmonious Neutrals

When generating neutral families, WebShades doesn't just create grays. Instead, it creates neutrals that harmonize with your chromatic colors. The generator:

Analyzes the hue of your control color
Generates neutrals with a subtle tint that complements your chromatic palette
Ensures neutrals work seamlessly with your primary, success, danger, and other semantic colors

This creates a more cohesive design system where neutrals feel like they belong with your brand colors, rather than appearing as generic grays.

Why Neutrals Clamp Chroma + Lightness

True neutrals have very low chroma (saturation) values. WebShades clamps chroma for neutrals to ensure they remain neutral across all shades:

Chroma Clamping

Neutrals are forced to have chroma values near zero, preventing them from becoming tinted or colored. This ensures they work as true backgrounds, borders, and text colors.

Lightness Clamping

Lightness is also controlled to ensure neutrals don't become too light or too dark, maintaining proper contrast ratios for accessibility.

Temperature System (Warm vs Cool)

Neutrals can have subtle temperature differences:

Warm Neutrals

Have a subtle yellow or red tint. They feel cozy and work well with warm color palettes (oranges, reds, yellows).

Cool Neutrals

Have a subtle blue tint. They feel crisp and work well with cool color palettes (blues, greens, purples).

WebShades can generate both warm and cool neutral families. The temperature is determined by your control color's hue and the neutral temperature bias setting.

How User Bias Affects Neutral Behavior

Two bias settings control neutral generation:

Neutral Lightness Bias

Controls whether neutrals tend toward lighter or darker overall. Positive bias creates lighter neutrals (good for light mode emphasis), negative bias creates darker neutrals (good for dark mode emphasis).

Neutral Saturation Bias

Controls how much color tint neutrals have. Higher values create more tinted neutrals that harmonize with your chromatic colors, lower values create more pure grays.

These biases let you fine-tune neutrals to match your design aesthetic, whether you want pure grays or subtly tinted neutrals that complement your palette.

Role System

Exporting

Feedback

Unlock Exports