CDRN

Generate a harmonious color palette

  • Dashboard
  • Documentation
  • API
builds harmonious color palettes given the number of colors and the harmony rule (complementary, analogous, triadic, etc.).

How to use the colour palette generator?

Specify the desired number of colours and the colour rule in the form. You can use the generated palettes in your projects following the example.

The first parameter sets the main colour.

The second parameter sets the number of colours. Note that depending on the chosen rule, the quantity choice may not be taken into account.

The third parameter sets the colour rule to use (complementary, analogous, triadic, etc.).

Palette examples

Monochromatic palette

<div class="p-4" style="background-color: #ff5733;"></div>
<div class="p-4" style="background-color: #ffab99;"></div>
<div class="p-4" style="background-color: #ffffff;"></div>

Analogous palette

<div class="p-4" style="background-color: #ff5733;"></div>
<div class="p-4" style="background-color: #ffbb32;"></div>
<div class="p-4" style="background-color: #dcff32;"></div>

Triadic palette

<div class="p-4" style="background-color: #ff5733;"></div>
<div class="p-4" style="background-color: #32ff54;"></div>
<div class="p-4" style="background-color: #5432ff;"></div>

Frequently asked questions

Which palette rule should I pick for a brand identity?

A monochromatic palette gives a calm, professional feel, ideal for corporate or editorial sites. Analogous palettes offer a soft, natural variation, useful for green or ocean moods. The complementary or triadic rule brings strong contrast, perfect for CTAs and e-commerce sites looking to catch attention.

Why is the requested number of colours not always honoured?

Some rules enforce a fixed number of colours. A complementary palette always returns 2 colours (the hue and its opposite on the colour wheel), a triadic palette returns 3, a tetradic one returns 4. The quantity parameter is only respected for the monochromatic and analogous rules.

Is the computation done on HSL or RGB?

Generation relies on the HSL space, which is more natural to handle the hue (rotation on the colour wheel) and lightness. The returned colours are then converted to HEX for direct integration in CSS. If you need RGB, use the colour converter on each generated code.

How do I match the generated palette with an existing image?

Start by extracting the dominant colour from your image with the palette extractor, take the main hue as the reference colour, then feed it into the generator with an analogous or triadic rule. You will get colours consistent with your visual to dress the rest of the site.

Are the generated palettes WCAG accessible?

The generator does not check contrast ratios. A colour only becomes accessible in relation to another background colour. To validate a text/background pair, export the HEX codes and use a contrast checker that computes the ratio against WCAG requirements (4.5:1 for normal text in AA, 7:1 in AAA).

Can the palette be exported in a specific format?

The palette is returned as HEX codes, ready to paste into a CSS file, a SASS variables file, a Tailwind theme or a design tokens system. To get the RGB or HSL equivalents, run each code through the colour converter.

Example request

curl -X POST https://cdrn.fr/api/v1/tools/color-generator/execute \
  -H "Content-Type: application/json" \
  -d '{"color_base":"...","quantity":1,"rules":"complementary"}'

Input schema

Field Type Required Default
color_base string ✓ –
quantity integer ✓ –
rules choice (complementary, analogous, triadic, tetradic, monochromatic, shade, split_complementary) ✓ –

Endpoints

  • GET https://cdrn.fr/api/v1/tools - lists every available tool
  • GET https://cdrn.fr/api/v1/tools/color-generator - returns the schema for this tool
  • POST https://cdrn.fr/api/v1/tools/color-generator/execute - runs this tool with a JSON payload