Color Scale Generator
Generate a smooth N-step colour scale between two colours instantly. Choose start and end colours with native pickers or 10 preset pairs, set 2-50 steps, and toggle between RGB and HSL interpolation to see the difference. View each step's HEX, RGB, and HSL values, and export the scale as a CSS gradient, CSS custom properties, or Tailwind configuration. Fully private, 100% free, and no signup required.
Preset Pairs
Colors
Settings
RGB interpolates linearly in RGB space - good for simple gradients.
Color Scale
Why Use Our Color Scale Generator?
Customizable Step Count & Modes
The colour scale generator lets you choose 2-50 steps and switch between RGB linear interpolation and HSL interpolation modes. Adjust the number of steps with a slider, pick from 10 preset colour pairs, or enter custom HEX values to fine-tune your scale.
RGB & HSL Interpolation Modes
RGB interpolation creates a smooth linear transition between the two colours in RGB space, while HSL interpolation travels through the HSL colour space for perceptually smoother gradients. Toggle between modes instantly to compare the difference.
100% Private - No Upload
All colour scale generation happens locally in your browser. Your colour values never leave your device and are never sent to any server - safe for client projects and proprietary design systems.
Free & No Limits
Generate unlimited colour scales with no signup, no subscription, and no usage caps. The colour scale generator is completely free forever with no ads blocking the interface.
Common Use Cases for Color Scale Generator
CSS Design Tokens & Variables
Design system maintainers use the colour scale generator to create stepped colour scales for CSS custom properties. Generate consistent colour tokens like --scale-1 through --scale-10 with evenly distributed steps between two brand colours for use across an entire application.
Design System Color Palettes
Designers use the colour scale generator to build structured colour palettes from brand colours. The generated steps provide intermediate values that can be used for hover states, active states, borders, and backgrounds - ensuring visual consistency across all UI components.
Data Visualization & Charts
Data visualisation developers use the colour scale generator to create sequential colour scales for charts, graphs, and heatmaps. The evenly distributed steps ensure that each data point has a visually distinct colour while maintaining a coherent gradient across the visualisation.
Temperature & Severity Maps
Analytics dashboards use the colour scale generator to create colour scales for temperature maps, severity indicators, and progress bars. From red to green or blue to orange, the stepped scale provides clear visual differentiation for each threshold level.
Tailwind CSS Custom Configurations
Developers using Tailwind CSS can export the generated colour scale directly as Tailwind configuration tokens. Each step becomes a named colour entry that can be used throughout a project with Tailwind utility classes like bg-scale-3 or text-scale-7.
Print & Digital Brand Guidelines
Brand managers use the colour scale generator to document gradient transitions for brand collateral. The intermediate HEX values ensure that brand colour transitions can be precisely reproduced across both digital and print materials.
Understanding Color Scale Generation
What is a Color Scale?
A colour scale is a sequence of evenly spaced colours that transition smoothly between a start colour and an end colour. Each step in the scale represents an intermediate colour at a specific position between the two endpoints. The colour scale generator computes these intermediate values using mathematical interpolation, producing a set of colours that can be used in design systems, data visualisations, and UI component libraries.
How Our Color Scale Generator Works
- Choose your colours: Pick a start and end colour using the native colour picker or enter HEX values directly. You can also select from 10 preset colour pairs like Sunset, Ocean, or Lavender to get started quickly. Click Swap to reverse the direction of your scale.
- Set the number of steps: Use the slider or number input to choose between 2 and 50 steps. More steps create a finer gradient with smaller colour differences between each adjacent step.
- Choose interpolation mode: RGB mode interpolates linearly through the RGB colour cube, while HSL mode interpolates through the HSL cylinder for perceptually smoother transitions. Toggle between them to see which works best for your colour pair.
- Explore and export: Click any swatch to see its detailed HEX, RGB, and HSL values. Export the full scale as HEX values, CSS gradient code, CSS custom properties, or Tailwind config tokens.
RGB vs HSL Interpolation
- RGB interpolation transitions each colour channel (Red, Green, Blue) independently using linear interpolation. This is the simplest and fastest method, producing a direct straight-line path through the RGB colour cube. RGB interpolation works well for most colour pairs and creates natural-looking gradients.
- HSL interpolation converts both colours to the HSL colour space (Hue, Saturation, Lightness) and interpolates each component independently. The hue value uses shortest-path interpolation to avoid going the long way around the colour wheel. HSL interpolation often produces more perceptually uniform transitions, especially when the start and end colours have different hues.
- Choosing the right mode: RGB is generally preferred for simple brand-to-brand gradients where colour accuracy matters. HSL is better for colour scales used in data visualisation where perceptual uniformity is important. Experiment with both modes to see which produces the most visually pleasing result for your specific colour pair.
Privacy, Security & Availability
100% client-side processing: Our colour scale generator runs entirely in your browser using JavaScript. No colour values are ever uploaded, stored, or transmitted to any server. This makes it safe for sensitive client projects and proprietary design systems.
No signup or limits: The colour scale generator is completely free with no account required, no usage caps, and no premium features. Generate unlimited colour scales instantly without any restrictions.
Related Color Tools
Tint & Shade Generator
Generate tints (mixed with white) and shades (mixed with black) from any base colour with 5-12 steps, CSS variables, and Tailwind config export.
Color Gradient Generator
Build linear, radial, and conic CSS gradients visually with up to 8 colour stops, direction controls, and copy CSS output.
Color Mixer
Blend any two colours at a custom ratio in sRGB, Linear, or Oklab mode with an 11-step gradient preview and multiple output formats.
Random Color Generator
Generate random colours with one click showing HEX, RGB, HSL, CMYK, and HWB. Lock channels, set ranges, and batch generate up to 50 colours.
Frequently Asked Questions About Color Scale Generator
A colour scale generator creates a sequence of evenly spaced colours that transition smoothly between a start colour and an end colour. Our colour scale generator lets you choose between 2 and 50 steps, supports RGB and HSL interpolation modes, and provides the intermediate HEX, RGB, and HSL values for each step. You can export the scale as CSS gradient code, CSS custom properties, or Tailwind configuration tokens.
First, pick a start colour and end colour using the colour pickers or enter HEX values directly. You can also click any preset pair (like Sunset or Ocean) to quickly load commonly used combinations. Then use the Steps slider to choose how many intermediate colours you want (2-50). Finally, toggle between RGB and HSL interpolation modes to see which produces the best gradient for your colours.
RGB interpolation linearly transitions each colour channel (Red, Green, Blue) between the two colours, creating a direct straight-line path through the RGB colour cube. HSL interpolation converts the colours to the HSL colour space and interpolates Hue, Saturation, and Lightness separately - with shortest-path hue interpolation to avoid going the wrong way around the colour wheel. HSL often produces more perceptually uniform gradients, especially between colours with different hues.
The colour scale generator supports 2 to 50 steps. The optimal number depends on your use case - 5-10 steps work well for design system colour tokens, 8-15 steps are ideal for data visualisation scales, and 20-50 steps create a very fine gradient suitable for heatmaps or continuous colour ramps.
Yes. All colour scale generation happens 100% client-side in your browser using JavaScript. Your colour values are never sent to any server, never stored, and never transmitted anywhere. The colour scale generator is completely private and processes everything locally on your device.
The colour scale generator provides multiple export options. You can copy all HEX values as a comma-separated list, copy the CSS gradient string for use in background properties, copy CSS custom properties (CSS variables) for use in stylesheets, or copy a Tailwind CSS configuration snippet with named colour tokens like scale-1 through scale-N. Each step can also be clicked to reveal its individual HEX, RGB, and HSL values.
A tint and shade generator starts with one colour and produces lighter (tint) and darker (shade) variations by mixing with white and black respectively. A colour scale generator interpolates between two distinct colours, producing a gradient that can go from one hue to a completely different hue - for example from red to blue or green to purple.
Yes. The colour scale generator is 100% free with no signup required, no premium features, and no usage limits. Generate unlimited colour scales without any restrictions or hidden costs. There are no ads blocking the interface.