Larry Hudson

Writing about making websites

Generating colour palettes for your website with Components AI

29 March 2021

Components AI is a collection of generative design tools – randomly generating different combinations of variables within certain constraints.

In their new theme builder, you can pick a starting colour palette (for example Bootstrap or Tachyons colours) and then generate different ‘colour modes’ using different combinations of these colours.

I think they’re doing something clever with artificial intelligence, because the colour combinations that it spits out are lovely:

Example colour modes from Components AI
More examples from Components AI

Once you’ve found a colour mode you like, you can export the colours as JSON and use them in your CSS.

In my experience, I had to copy the colour values in the ‘modes’ section of the JSON and then manually write them out as CSS variables.

In my style.css file I declared the variables for the dark theme at the start of the document, then overrode those variables when the user prefers a light colour scheme:

/* Dark theme by default */
:root {
    --color-background: rgb(32, 32, 69);
    --color-text: rgb(236, 233, 251);
    --color-border: hsl(250,69.23%,94.9%);
    --color-primary: hsl(18.11,100%,89.61%);
    --color-accent: hsl(16.78,86.83%,52.35%);
    --color-muted: hsl(247.69,66.1%,88.43%);
@media (prefers-color-scheme: light) {
    :root {
        --color-background: hsl(0,91.3%,95.49%);
        --color-border: hsl(356.13,39.24%,15.49%);
        --color-primary: hsl(234.23,49.06%,41.57%);
        --color-accent: hsl(234.23,49.06%,41.57%);
        --color-muted: hsl(353.57,45.16%,24.31%);