BuildUtilities

Color Scale Generator – Free Online Tool

Generate full color scales with adjustable dark/light steps, hue shifting, and saturation control.

✦ FreeNo SignupInstantDesignColor Contrast & AccessibilityColor Theory for DevelopersDesign Tokens & CSS Variables Guide
#195308
#0d660c
#117826
#178a47
#1d9a6c
#20c2a5
#2de0e1
#50ccea
#74c2f1
#9ac3f7
#c1d0fb

Dark Shades

4
50%
-51°
14%

Light Tints

6
80%
67°
20%
#195308
#0d660c
#117826
#178a47
#1d9a6c
#20c2a5
#2de0e1
#50ccea
#74c2f1
#9ac3f7
#c1d0fb
--color-0: #195308;
--color-100: #0d660c;
--color-200: #117826;
--color-300: #178a47;
--color-400: #1d9a6c;
--color-500: #20c2a5;
--color-600: #2de0e1;
--color-700: #50ccea;
--color-800: #74c2f1;
--color-900: #9ac3f7;
--color-1000: #c1d0fb;
colors: {
  brand: {
    0: '#195308',
    100: '#0d660c',
    200: '#117826',
    300: '#178a47',
    400: '#1d9a6c',
    500: '#20c2a5',
    600: '#2de0e1',
    700: '#50ccea',
    800: '#74c2f1',
    900: '#9ac3f7',
    1000: '#c1d0fb',
  }
}

Example

Input

Base: #1D9A6C, 4 dark steps, 6 light steps

Output

#0A2F51, #0E4D64, #137177, #188977, #1D9A6C, #39A96B, #56B870, #74C67A, #99D492, #BFE1B0, #DEEDCF

An 11-step green scale with hue rotation toward blue in darks and yellow in lights.

How to Use Color Scale Generator

  1. 1

    Pick Base Color

    Choose the middle color for your scale.

  2. 2

    Adjust Dark Shades

    Set the number of dark steps, darkness amount, hue shift, and saturation shift.

  3. 3

    Adjust Light Tints

    Set the number of light steps, lightness amount, hue shift, and saturation shift.

  4. 4

    Copy Output

    Copy individual colors, CSS variables, or Tailwind config.

Common Use Cases

  • ✦Building design system color tokens
  • ✦Creating Tailwind custom color scales
  • ✦Generating accessible color ramps for data visualization
  • ✦Crafting CSS variable palettes for theming

More Design Tools

Tools for accessibility, color, and visual asset generation.

Aa Color Contrast Checker◈ Favicon Generator🎨 Color Palette Generator🌈 Gradient Palette Generator🔄 Color Format Converter👁️ Color Blindness Simulator
View all Design tools
Tip Jar