Stop manually building palettes. Automate your entire color workflow.
The control color is the single input that drives WebShades' entire color generation system. Understanding how it works will help you create better palettes.
The control color is the starting point for your entire palette. It's the color you enter in the color picker or input field at the top of the WebShades interface. This single color determines:
WebShades analyzes your control color using OKLCH to extract its hue value. The hue is then mapped to one of WebShades' predefined color families. These families are organized into hue buckets that group similar colors together.
For example, a color with a hue around 250° might be assigned to the "blue" family, while a hue around 330° might be assigned to the "purple" family. This family assignment determines which color scales and semantic roles will be generated.
WebShades automatically detects which shade level (50, 100, 200, etc.) your control color most closely matches. This is called "anchor shade detection."
The generator uses this anchor shade to ensure your exact input color appears at the correct position in the generated scale. If you input a medium blue, it will appear as shade 500 or 600, not as shade 50 or 900.
This means you can input any shade of a color, and WebShades will intelligently place it in the correct position within the scale.
Start with your primary brand color. WebShades will generate a complete scale around it, ensuring all shades maintain your brand's character.
Medium-toned colors (around 40-60% lightness) work best as control colors. Very light or very dark colors can limit the range of the generated scale.
Moderately saturated colors (not too vibrant, not too muted) produce the most versatile scales. You can always adjust saturation bias in the settings.
Try inputting different shades of the same hue to see how the scale changes. A darker control color will produce a different scale than a lighter one, even with the same hue.
WebShades uses the L600/C600 anchor logic, which means it analyzes your control color's lightness (L) and chroma (C) values and maps them to the appropriate shade level (typically 500 or 600).
This ensures that when you input a specific color, it appears exactly where you'd expect it in the generated scale. The generator then creates lighter and darker shades above and below your anchor point, maintaining consistent relationships throughout the scale.
WebShades is an OKLCH-based color palette generator for UI design and Tailwind CSS. Built by Drew Poling.