Color Shade Generator with OKLCH Scales

Generate lighter and darker shades from one color with OKLCH lightness controls. Copy HEX values, check contrast, and export CSS or Tailwind for free.

Free · Unlimited use · No account needed

Base color

Nearest CSS name: royalblue · approximate

Change the color to update the result.

Number of shadesGeneration modeDistribution curveLightest LDarkest LHue transition (degrees)

Generated shades

Gamut mapped

Click a shade to copy its HEX. This result is not added to a project automatically.

Your result

Copy or download this result for free. Saving to a workspace is optional.

Output format

:root {
  --base-50: #F0F5FF;
  --base-100: #E5EEFF;
  --base-200: #C8DBFF;
  --base-300: #9DBFFF;
  --base-400: #699BFF;
  --base-500: #3170F9;
  --base-600: #114CCD;
  --base-700: #002E9D;
  --base-800: #001D6D;
  --base-900: #00124E;
  --base-950: #051434;
}

Create a color shade scale from one base color

Enter a HEX color, choose the number of steps, and compare the lighter and darker swatches. Use the lightness controls to set the range. A small range is useful for subtle surfaces; a wider range gives you more options for text and backgrounds.

How this differs from a tints and shades generator

Traditional tints mix a color with white, and shades mix it with black. This tool changes OKLCH lightness instead. It builds a perceptual scale for interfaces, so its values can differ from RGB mixing tools. Colors outside sRGB are mapped into the displayable range.

Choose steps for the components you need

Start with 11 steps, then inspect which values work for your surfaces, borders and button states. A numbered step is a label, not an accessibility score. Check the actual foreground and background together before using a swatch for text.

Export the scale

Click a swatch to copy its HEX value, or choose CSS variables or Tailwind v4 in Your result. Calculations and basic downloads are free and repeatable. Save to workspace only when you want to keep the result in a project.

Check contrast for your chosen pair

Use the result now. Save it when you need to.

Each tool handles one color task at a time. Repeat calculations, copy values and download basic formats without creating a project or using a project slot.

Choose Save to workspace to keep a result in an existing or new project. Workspace project limits and advanced Pro features apply there.

Need a quick conversion? Open the color converter.