WebShades is a color-system generator built for modern UI design. It creates consistent, accessible color scales, semantic themes, and export-ready design tokens from a single starting color. This page explains how to use the tool effectively and what each control does.
Enter a hex value or pick a color from the selector. WebShades analyzes your color using the OKLCH color space, which models lightness, chroma, and hue more accurately than HSL or RGB. This gives you smooth scales with predictable contrast and saturation as they get lighter or darker.
Controls how dramatic the light–dark range is across the scale. Higher contrast → deeper shadows, brighter highlights.
Changes how many stops appear in the scale (default is 11: 50–950). More steps = finer control for design systems.
Fine-tunes the neutral family chosen for surfaces and text:
• Lightness bias makes neutrals brighter or darker overall
• Saturation bias makes them warmer/cooler and more colorful/gray
You rarely need to adjust these unless you're targeting a specific aesthetic.
A complete set of color variables for every family: --color-{family}-{step}
Example: --color-blue-600: 0 122 222;
These scales are mathematically balanced:
• consistent spacing
• smooth contrast curves
• hue-corrected for predictable transitions
These are ideal for Tailwind, CSS variables, and UI themes.
WebShades automatically builds a semantic theme: primary, surface, text, border, success / warning / danger / info, optional accent families
These map the technical color scales to roles that make sense in UI design.
Example: --color-text-default → neutral-900 (light) or neutral-100 (dark)
You don't have to manually assign any of these.
Once you pick a color:
• The generator finds the closest color family
• A harmonious neutral is chosen for surfaces
• A full light and dark version of the palette is built
You can toggle dark/light mode to preview how your theme behaves.
The preview area uses only the live-generated variables. Switching colors instantly updates:
• buttons
• cards
• typography
• surfaces
• borders
• accents
This lets you see how real UI components look with your palette.
From the export panel, you can copy the theme in multiple formats:
• CSS variables
• Tailwind config
• JSON tokens
• Design system presets (coming soon)
Everything you see in the preview is exactly what you export.
Pick a saturated color for your primary More chroma = better-looking scales.
Use neutrals for surface and text Your primary color should NOT be the background of your UI.
Keep steps at 11 unless you're building a design system Most interfaces don't need more.
Don't trust HSL/RGB for UI colors OKLCH output will generally look cleaner, more readable, and more consistent.
You don't need to understand any of this to use it, but here's what's happening under the hood:
• maps your color to the closest family
• applies contrast curves
• adjusts hue drift to avoid muddy transitions
• picks a neutral family that harmonizes with your primary
• balances chroma so mid-tones aren't washed out or neon
• builds semantic tokens
• constructs gradients
• generates light and dark themes
All from one starting color.
WebShades is an OKLCH-based color palette generator for UI design and Tailwind CSS. Built by drewpoling2.