Stop manually building palettes. Automate your entire color workflow.
WebShades uses OKLCH color space and sophisticated algorithms to generate smooth, perceptually uniform color scales from your control color.
WebShades uses the OKLCH color space, which separates color into three components:
The generator creates curves for lightness and chroma that vary smoothly across the shade scale (50 → 950). These curves ensure that each shade step feels like an equal visual change, which is why OKLCH produces better results than HSL or RGB.
WebShades generates shades at standard intervals: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. These numbers represent lightness levels, where:
You can adjust the number of steps in the settings to create more or fewer shades, but the standard 11-step scale works well for most design systems.
When you input a control color, WebShades analyzes its lightness (L) and chroma (C) values. The generator uses the L600/C600 anchor logic to determine which shade level your color should occupy.
This means:
The lightness value of your control color is compared to the expected lightness curve. The shade level that most closely matches the expected lightness curve is used as the anchor shade.
Similarly, the chroma value determines the saturation level. The generator ensures your control color's chroma matches the expected chroma for its assigned shade level.
Each color family has its own delta values—how much lightness and chroma change between shades. A blue family might have different deltas than a red family, ensuring each family's character is preserved.
Adjusts the overall lightness range of the scale. Higher contrast creates more separation between light and dark shades, while lower contrast creates a more compressed range.
Controls how saturated the colors are. Positive bias increases saturation across all shades, negative bias decreases it. This is particularly useful for neutrals.
Controls how many shades are generated. More steps create finer granularity, fewer steps create a simpler scale.
Thanks to anchor shade detection, your control color always appears at the shade level that matches its actual lightness and chroma. If you input a medium blue, it won't appear as shade 50 or 950—it will appear as shade 500 or 600, where medium tones belong.
The generator then creates lighter shades above your anchor and darker shades below, maintaining consistent relationships throughout the scale. This ensures your brand color appears exactly where you expect it in the generated palette.
WebShades is an OKLCH-based color palette generator for UI design and Tailwind CSS. Built by Drew Poling.