ptools.io

Color Palette Generator

One color in, a matching set out, in eight kinds of harmony.

Runs entirely in your browser

Loading the tool…




    


    

      
        
Give it one colour and it works out a set around it. The eight harmonies are
        positions on the colour wheel rather than opinions: complementary is the hue opposite,
        analogous the neighbours either side, triadic three evenly spaced, tetradic four.
        Monochromatic, shades and tints keep the hue and move the lightness instead.

        
A harmony is a starting point, not a palette. Colour picked by
        geometry gives you hues that sit together; it says nothing about which one is the
        background, which carries the text, or how much of each to use. The common failure is
        using them in equal measure, which reads as loud. The usual advice is roughly 60% of
        one, 30% of a second and 10% of an accent.

        
Check the pairs you intend to put text on. Two colours from the
        same harmony are frequently a similar lightness, which looks deliberate and fails
        contrast badly, because contrast is about light and dark rather than hue. The
        contrast checker is the next stop for any pair you
        plan to set type in.

        
Every swatch is labelled in whichever of black or white reads on it, worked out
        with the same arithmetic. Click one to copy its code, or take the whole set from the
        box below.


      
How to use it

      
    

  1. Put in a base colour, or use the picker.
    2. 

  2. Choose a harmony. The palette rebuilds as you change it.
    3. 

  3. Click any swatch to copy its code, or copy the whole set at once.
    4. 
      


      
Questions


What is a complementary color?
The hue directly opposite on the colour wheel, 180 degrees round. It gives the strongest contrast of hue available, which makes it good for an accent and difficult for large areas: two complementaries in equal amounts fight rather than agree. Split complementary uses the two neighbours of the opposite instead, which keeps most of the contrast and much less of the tension.


What is the difference between shades, tints and monochromatic?
Shades add black, tints add white, and monochromatic moves both lightness and saturation while keeping the hue. All three give you a set that cannot clash, which is their strength and their limit: they are what you want for a single-colour interface and what makes a page look flat if it is the whole palette.


How many colors should a color palette have?
Fewer than these give you. A common working set is one dominant colour, one secondary and one accent, in roughly 60, 30 and 10 percent. The harmony here suggests which hues get on; deciding which is the background and which is the accent is the part that is design rather than geometry.


Will these colors pass a contrast check?
Often not, and it is worth checking rather than assuming. Colours from one harmony frequently share a lightness, and contrast is computed from lightness rather than hue, so a pair that looks strikingly different can be nearly unreadable. Take any pair you plan to set text in to the contrast checker.


Is anything uploaded?
No. The palette is worked out in WebAssembly in this tab, and the page is served with a header that forbids it from connecting anywhere. Nothing you pick is recorded and it works offline.



      
Your data stays on your device

      
Everything above runs inside your browser as WebAssembly compiled from Rust. Nothing you type is uploaded, logged or stored on a server. You can load this page once, go offline, and it still works.

      
This page makes no requests at all, to anywhere. That is not a promise in the copy: it is a Content-Security-Policy header your browser enforces, and connect-src on it is none. Open the network tab and watch nothing happen.