Color Palette Generator

Tints · shades · CSS custom properties

Enter a brand colour and get a 10-step scale (50–900) with HEX, RGB and HSL values. Every swatch is automatically checked for WCAG contrast against white and black text.

Base color
H 263°
S 76%
L 56%
Palette colors
Scale
Steps
Algorithm
Saturation curve
CSS output
Include :root
Include raw HSL
OKLCH format
Semantic variables
Name prefix 

                                        

                                        

                                            

                                                
Text on background contrast —

                                                

                                            

                                        

                                        

                                            

                                        

                                    

                                

                            

                        

                    


                    

                        
A consistent colour system is the foundation of every professional design system: defining a structured palette with light tints and dark shades allows colours to be used systematically in UI, ensuring visual consistency and accessibility compliance.
This generator:
  • Takes a base colour in HEX, RGB or HSL
  • Generates 10 lightness steps (50, 100, 200, 300, 400, 500, 600, 700, 800, 900)
  • Shows values in HEX, RGB and HSL for every swatch
  • Checks WCAG AA/AAA contrast against white and black text
  • Exports CSS custom properties for the WordPress theme
  • Generates a SCSS colour map
Use it alongside the Spacing Scale Generator and Design Token Formatter for a full token set.