About the Color Palette Generator
This Color Palette Generator builds a set of colours that work together from one base colour. Enter a colour as a hex code, an rgb() value or a name such as teal, or pick it with the colour swatch, and choose a scheme from the colour wheel: complementary, analogous, triadic, tetradic (square), split-complementary or monochromatic with five shades. There is also a random mode for a new palette of 3 to 12 colours on every click. The palette appears as large swatches showing the hex, RGB and HSL values. Click a swatch to copy its hex code. A contrast checker shows how readable each colour is as text on each other colour, with AA and AAA labels. You can copy the palette as a hex list, CSS variables or JSON. Schemes are starting points based on the colour wheel, not a guarantee that the result looks good, and colours can look different on other screens.
Updated September 2026
How to use the Color Palette Generator
- 1Type a base colour, or use the colour swatch to pick one.
- 2Choose a scheme, such as Analogous or Triadic, or Random for a fresh set.
- 3Click a swatch to copy its hex code, and check the contrast checker for readable text pairs.
- 4Copy the whole palette as a hex list, CSS variables or JSON.
Colour schemes on the colour wheel
Colours are arranged in a circle by hue, and the distance around the circle decides how colours relate. Analogous colours are neighbours and feel harmonious. Complementary colours sit opposite and give strong contrast. Triadic colours form a triangle, tetradic ones a square, and a split-complementary scheme uses the two colours beside the opposite one, which is easier to balance than a direct complement.
The monochromatic scheme keeps a single hue and varies only the lightness, giving five shades from dark to light. It is a safe way to build a calm interface.
Picking a base colour
The tool keeps your base colour's saturation and lightness, so a muted base gives a muted palette and a bright base gives a bright one. You can type a hex code like #3366FF, an rgb() or hsl() value, or a name such as teal. If the colour cannot be read, the tool tells you and shows an example. Use Color Converter if you need the value in another format, or the Image Color Picker to take a colour from a photo.
Checking contrast and accessibility
Readable text needs enough difference in brightness between the text and the background. The web standard measures this as a ratio from 1 to 21. Normal text needs at least 4.5 for level AA and 7 for level AAA. The checker lists every pair, so you can see which colours are safe for text and which are for decoration only.
A palette that looks good is not automatically accessible. Always check the pairs you plan to use, and remember that colour alone should not carry meaning. Turn a chosen colour into code with the CSS Gradient Generator, or a code with the HEX to RGB Converter.
Using the palette in CSS and design tools
- Copy the CSS variables into a :root block and use them with var(--color-1).
- Copy the hex list to paste into design tools, one code per line.
- Copy the JSON to use in scripts or a design token file.
- Colours can look different on other screens and in print, so test on the devices that matter.
Features
- Six colour-wheel schemes and a random mode
- Base colour from hex, rgb(), hsl() or a name
- Hex, RGB and HSL shown on every swatch
- Click a swatch to copy its hex code
- Contrast checker with AA and AAA results
- Export as a hex list, CSS variables or JSON
- Random palettes of 3 to 12 colours
Frequently asked questions
What is a complementary colour?
It is the colour directly opposite another on the colour wheel, 180 degrees away. Red and cyan, or blue and orange, are complementary pairs. Together they give the strongest contrast, and they work best with one colour dominant and the other used as an accent.
How do I make a colour palette from one colour?
Enter your base colour and pick a scheme. The tool keeps the base colour's saturation and lightness and turns the hue around the wheel by fixed steps, so a triadic palette has three colours 120 degrees apart. The monochromatic scheme keeps the hue and changes only the lightness.
What is the difference between analogous and triadic schemes?
An analogous scheme uses colours next to each other on the wheel, 30 degrees either side of the base, so it looks calm and harmonious. A triadic scheme uses three colours evenly spaced 120 degrees apart, which looks livelier and more varied.
How do I check that my colours are readable?
Look at the contrast checker under the palette. For every pair it shows the contrast ratio. Normal text should reach 4.5 to 1 for AA, or 7 to 1 for AAA. Pairs below 4.5 are marked Fail, and you should not use them for body text.
Can I get CSS variables for my palette?
Yes. Press Copy CSS variables and paste the result into your stylesheet. You get a :root block with custom properties named --color-1, --color-2 and so on, holding the hex codes. Rename them to match your design, for example --brand or --accent.
How do I choose a brand colour palette?
Start from the colour that best represents the brand and try a few schemes. Keep one main colour, one or two supporting colours and a neutral. Check the contrast of text on every background, and look at the palette on real screens. Treat the result as a first draft that a designer can refine.