NerdBible
Sign in

Tools

More
All toolsAudioCalculatorsColour & CSSDeveloperEverydayHardware TestsImagePDF & DocumentsSecurity & PrivacyTextWeb & Marketing
More
Aspect ratioColoursContrastCSSCSS unitsPalette

Colour Palette Generator

Harmonious palettes from one colour.

Free tools that run in your browser. Nothing you type, open or create is uploaded to NerdBible or anyone else.

Full page for #2a54c4

Export

Code




Harmonies turn the hue around the HSL colour wheel. The 50 to 950 scale keeps the hue and steps lightness in OKLCH, so each step looks evenly lighter or darker. Random colours come from your browser's cryptographic random generator.



  
How to use it

  
  1. Enter a base colour to see its complementary, analogous, triadic and tetradic partners, plus tints, shades and a full 50 to 950 scale.
  2. Or open Random palette, lock the colours you want to keep and generate again until the rest fit.
  3. Choose a palette and a format under Export, then copy or download it as CSS variables, JSON or a Tailwind-style object.





  
Questions

  
What is a complementary colour?
The colour opposite yours on the colour wheel, 180 degrees away. Complementary pairs give strong contrast, so they work well for a call to action against a main brand colour.
Which harmony should I use for a website?
Analogous and monochrome palettes are calm and easy to use for backgrounds and text. Complementary, triadic and tetradic palettes are livelier and work best with one main colour and the others as small accents.
How do I use the Tailwind-style export?
Paste the object into the colours section of your Tailwind configuration, or use it as a plain JavaScript object of colour tokens. The 50 to 950 scale uses the same step names as Tailwind's own colours.
Will these colours be accessible?
Not automatically. Check every text and background pair with a contrast checker before you use it; lighter tints usually need dark text and darker shades need white text.




        

    
About this tool

    
About the colour palette generator
Picking one brand colour is easy; finding the colours that go with it, and the lighter and darker steps a real interface needs, takes longer. This tool builds both from a single starting colour.
From one colour
  • Harmonies: complementary, analogous, triadic and tetradic partners, found by turning the hue around the colour wheel.
  • Tints and shades of your colour.
  • A 50 to 950 scale that keeps the hue and steps lightness in OKLCH, so each step looks evenly lighter or darker. The step names match those used by Tailwind.
Random palette
Switch to Random palette, lock the colours you like, and generate again until the rest fit. Randomness comes from your browser's cryptographic random generator.
Choosing a harmony
Analogous and monochrome palettes are calm and easy to use for backgrounds and text. Complementary, triadic and tetradic palettes are livelier; they work best with one main colour and the others as small accents, such as a call to action against a main brand colour.
Export
Copy or download any palette as CSS variables, JSON or a Tailwind-style object. Before using a pair for text, check it with a contrast checker: lighter tints usually need dark text and darker shades white text.
Everything is generated in your browser.
  

        

    
Related tools