Getting Started
OverviewYour Control ColorUnderstanding Families
Generating Colors
Scale GenerationRole SystemNeutral Engine
Using Your Palette
ExportingAccessibility
Palette Workflow
Saving & Projects

Overview

WebShades is a semantic OKLCH palette generator built for modern UI design. It creates consistent, accessible color scales, semantic themes, and export-ready design tokens from a single starting color.

What WebShades Does

WebShades solves the problem of creating consistent, accessible color systems for design teams. Instead of manually creating dozens of color variations, WebShades generates complete color scales, semantic roles, and dark mode variants automatically from a single control color.

The tool uses the OKLCH color space, which provides perceptually uniform color relationships. This means colors that appear equally different to the human eye are mathematically equally different, resulting in smoother gradients and more predictable contrast ratios.

Why Designers and Developers Use WebShades

WebShades is designed for teams building design systems, component libraries, and modern web applications. It helps you:

  • Create accessible color palettes that meet WCAG AA and AAA standards
  • Generate consistent color scales with proper lightness and chroma relationships
  • Export ready-to-use CSS variables, Tailwind configs, and JSON tokens
  • Automatically generate dark mode variants that maintain proper contrast
  • Save and organize multiple palettes for different projects or brands

Basic Workflow

Using WebShades is straightforward:

1. Pick Your Control Color

Enter a hex value or use the color picker to select your starting color. This color becomes the foundation for your entire palette.

2. Adjust Settings

Fine-tune contrast, saturation, and other parameters to match your design needs. WebShades provides real-time previews as you adjust.

3. View Scales, Roles, and Accessibility

Explore the generated color scales, semantic roles (like text, surface, border), and check contrast ratios in the accessibility matrix.

4. Save or Export Your Palette

Save your palette for later use, or export it as CSS variables, Tailwind config, JSON, or other formats ready for your design system.

Next Steps

Ready to create your first palette? Start by learning about your control color and how WebShades interprets it to generate your color system.

Your Control Color

WebShades is an OKLCH-based color palette generator for UI design and Tailwind CSS. Built by Drew Poling.

PrivacyTermsDocs