Color Scale Generator

Generate stepped color scales between two colors for charts, maps, and UI usage. Export scales for use in data visualization libraries and design systems.

Base Color

Steps5

Scale Type

Base Color Info

#6366F1

H: 239° S: 84% L: 67%

Scale Preview

Generated Color Scale

#04052F

100

#0C0E8D

200

#1418EB

300

#7274F3

400

#D0D1FB

500

Scale Details

Step	HEX	RGB	HSL	Usage
100	#04052F	rgb(4, 5, 47)	hsl(239, 84%, 10%)	Background
200	#0C0E8D	rgb(12, 14, 141)	hsl(239, 84%, 30%)	Background
300	#1418EB	rgb(20, 24, 235)	hsl(239, 84%, 50%)	Background
400	#7274F3	rgb(114, 116, 243)	hsl(239, 84%, 70%)	Text/Accent
500	#D0D1FB	rgb(208, 209, 251)	hsl(239, 84%, 90%)	Text/Accent

What Is a Color Scale?

A color scale is a sequence of colors progressing from light to dark (or vice versa) in consistent steps. Unlike a simple gradient, a scale gives you discrete color values you can use individually — perfect for design systems, data visualization, and UI states.

Scale Types Explained

Lightness Scale

Adjusts only the L in HSL. Creates a progression from near-white through your base color to near-black. Most common for UI design.

Saturation Scale

Adjusts only the S in HSL. Goes from gray (0% saturation) to fully vibrant (100% saturation). Useful for showing intensity.

Hue Scale

Rotates through the color wheel. Creates a rainbow effect. Good for categorical data where each value needs a distinct color.

Diverging Scale

Two colors meeting in the middle. Useful for showing positive/negative, hot/cold, or any bipolar data range.

How Many Steps Do You Need?

The step count determines granularity:

3-5 steps: Simple states (light, base, dark) or (low, medium, high)
6-8 steps: Standard design system scales (like Tailwind's 50-900)
9-12 steps: Fine-grained control for data visualization
13-15 steps: Maximum precision for specialized applications

Real Use Cases

Design System Color Tokens

Generate a 10-step scale for your primary brand color. Name them primary-50 through primary-900. Use consistently across all components.

Data Visualization

A choropleth map showing population density uses a 7-step lightness scale. Light colors for low density, dark for high density.

Interactive States

Button states: 100 for disabled, 300 for hover, 500 for default, 700 for active. All from the same scale, guaranteed to work together.

Tailwind CSS Extension

Export as Tailwind config and get classes like bg-brand-400, text-brand-600. Matches Tailwind's naming convention perfectly.

Export Formats

CSS Variables export:

:root {
  --scale-50: #eff6ff;
  --scale-100: #dbeafe;
  --scale-200: #bfdbfe;
  --scale-300: #93c5fd;
  --scale-400: #60a5fa;
  --scale-500: #3b82f6;
  --scale-600: #2563eb;
  --scale-700: #1d4ed8;
  --scale-800: #1e40af;
  --scale-900: #1e3a8a;
}

Tailwind export integrates directly into your tailwind.config.js for utility class generation.

Frequently Asked Questions

Why do some steps look uneven?

Human perception of lightness isn't linear. Equal HSL lightness steps might not look equally spaced. For perceptually uniform scales, consider using LAB or LCH color spaces (not yet supported).

Can I create a custom range?

This tool generates full scales from your base. For custom start/end points, use the Gradient Step Generator which lets you specify exact boundary colors.

How do I use diverging scales?

Select "Diverging" scale type, pick two endpoint colors (like blue for cold, red for hot), and choose your step count. The middle step will be a neutral blend.

What's the difference between this and Shade Tint Tone Generator?

Shade/Tint/Tone generates three separate lists (darker, lighter, muted). This tool creates one continuous scale with consistent steps between each color.

Can I export for React or Vue?

Export as JSON and import directly into your component library. The JSON format works with any JavaScript framework.

How do I name my scale colors?

Follow Tailwind's convention: 50 (lightest) to 900 (darkest) in steps of 50. The 500 step should be your base color.

Tips for Better Color Scales

Test in grayscale. Convert your scale to black and white. If you can still distinguish the steps, the lightness progression works.

Consider accessibility. Ensure adjacent steps have enough contrast for users with low vision. Check critical combinations with the Contrast Checker.

Start with a good base. A base color around 50-60% lightness gives you room to go both lighter and darker.

Use the right scale type. Lightness scales for UI, hue scales for categories, diverging scales for bipolar data. Match the scale to your use case.

Other Free Color Tools

Search tools