Color Palette Generator

Tints · shades · CSS custom properties

The Color Palette Generator builds color scales (50–950) from one or more base colors, with saturation curves and HSL, OKLCH, or LAB-style algorithms. Export :root with semantic variables, copy token JSON, and review WCAG contrast for typical text and background pairs — ideal for aligning Figma and CSS.

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 —

                                                

                                            

                                        

                                        

                                            

                                        

                                    

                                

                            

                        

                    


                    

                        
Why use a palette generator

                        
  • Design system consistency: 50–950 steps aligned with conventions like Tailwind simplify theming and dark mode.
  • Ready-to-paste export: custom properties in :root, optional HSL, and semantic names for UI parts.
  • Accessibility: a WCAG view to sanity-check text/background pairs on your tokens.
Use it alongside the Spacing Scale Generator and Design Token Formatter for a full token set.