Understanding Color Families

Color families are how WebShades organizes colors by hue. Understanding families helps you predict how your control color will be interpreted and what scales will be generated.

How Families Are Defined

Color families are organized into hue buckets—ranges of hue values that group similar colors together. When you input a control color, WebShades:

Extracts the hue value from your color (in OKLCH)
Maps it to the nearest family bucket (e.g., red, orange, yellow, green, blue, purple, pink)
Uses that family's characteristics to generate the color scale

Each family has its own lightness and chroma curves, which determine how colors get lighter or darker as you move through the shade scale (50 → 950).

Neutral Families and Why They're Different

Neutral families (grays, warm grays, cool grays) behave differently from chromatic families. They have special characteristics:

Chroma Clamping

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

Temperature System

Neutrals can be warm (slightly yellow/red tinted) or cool (slightly blue tinted). WebShades can generate both warm and cool neutral families based on your control color and settings.

Lightness Bias

The neutral lightness bias setting lets you control whether neutrals tend toward lighter or darker overall. This is useful for matching your design aesthetic.

How Roles Derive from Families

Semantic roles (like primary, success, danger, warning) are automatically assigned based on your color family. For example:

A blue family typically becomes the "primary" role
A green family becomes the "success" role
A red family becomes the "danger" role
A yellow/orange family becomes the "warning" role

These assignments are semantic and intent-based, meaning they represent the purpose of the color in your UI, not just its appearance.

Your Control Color

Scale Generation

Feedback