Colour Palette Generator
Pick a base colour and choose a scheme. You get complementary, analogous, triadic, tetradic or monochrome colours, ready to copy.
Este conteúdo está em inglês.
Select a colour to copy its HEX code
Exemplos resolvidos
Complementary partner for an orange
Base colour #ff4a1f with the complementary option
Base #ff4a1f with a complementary colour of about #1fd2ff, which sits opposite it on the colour wheel.
Complementary colours are found by adding 180 degrees to the hue, which takes the orange hue of 12 degrees to 192 degrees.
Palette from a single blue
Base colour #0066cc with a palette of related shades
A short set of colours built from the hue of #0066cc, starting with the base colour itself.
The palette keeps the same hue, so the colours work together, though exact shades depend on the option chosen.
Sobre Colour Palette Generator
A colour palette generator takes one colour you already like and works out the others that fit with it. This tool starts from a base colour, which you can choose with the picker or type as a HEX code, and then builds a set of matching colours from its hue. Complementary and triadic schemes give strong contrast, analogous schemes keep things calm and related, and monochrome schemes use lighter and darker versions of a single colour for a clean, cohesive look.
Each colour in the palette is shown with its HEX code, and selecting any swatch copies that code straight away. When you are ready to use the palette in a project, the export gives you a block of CSS custom properties that you can paste into a stylesheet. Naming the colours as variables means you change them in one place later, rather than hunting through every rule for an old value. The result is a practical starting point for brand colours, dashboards, illustrations and websites.
Como usar Colour Palette Generator
- Pick a base colour with the colour picker, or type its HEX code in the box.
- Choose a colour scheme from the list, such as triadic or monochrome.
- Select any swatch to copy its HEX code, or use the labels to see each colour's role.
- Copy the CSS variables from the box and paste them into your stylesheet.
Usos comuns
- Choosing an accent colour and its supporting shades for a website
- Building a palette for a slide deck, report or chart series
- Creating a set of colour tokens for a design system
- Finding colours that sit well together for an illustration or logo
Perguntas frequentes
What is a complementary colour scheme?
A complementary scheme uses two colours that sit opposite each other on the colour wheel. Your base colour is paired with the colour exactly 180 degrees away in hue. The pair gives strong contrast and makes each colour look more vivid, which suits calls to action and highlights. Use one of the pair for most of the design and the other sparingly so the page stays balanced and easy to read.
What is the difference between analogous and triadic colours?
Analogous colours sit next to each other on the colour wheel, with the base colour in the middle and one colour on either side, 30 degrees apart. They look harmonious and calm. Triadic colours are three colours spaced evenly, 120 degrees apart. They give a lively, balanced look with more contrast than analogous colours, so they work well when you want energy without clashing tones.
How do I use the CSS variables in my stylesheet?
Paste the exported block into your stylesheet, usually at the top of the file. Each colour gets a name such as --color-1 and holds its HEX value. Refer to a colour in any rule with var(--color-1), for example as a background or text colour. If you later decide on a different shade, you only need to change the value in the variable, and every rule that uses it updates.
What does monochrome mean in a colour palette?
A monochrome palette uses one hue at several levels of lightness. This tool makes two darker shades and two lighter tints from your base colour, so the five swatches all look related. Monochrome palettes are easy to balance and are often used for backgrounds, borders and text in interfaces, where a single accent colour stands out against calm neutral shades.
Can I use these colours for text that people need to read?
Some colour combinations are hard to read, so a palette alone does not guarantee readable text. Check each pair of text and background colours with the Colour Contrast Checker on this site. The WCAG 2.2 guidelines suggest a contrast ratio of at least 4.5:1 for normal text. Pick a light or dark swatch from the palette for text and keep the other colours for accents and decoration.