Create

Function

@palette

A list of colors that go together, as oklch() values separated by commas. The doodle's seed picks the palette, so every render gets a new one. Click the example to see another: 

@grid: 5x1 / 60vmin 20vmin;
background: @pn(@palette());
Open in playground

Syntax

  • @palette([<count>])
  • @palette([<count>], <color>)

The count and the color are told apart by what they look like, so they can come in either order.

count
How many colors, from 1 to 256. Defaults to 5. It can be arithmetic, as in @palette(2 * 3), and decimals are cut to whole numbers.
color
A color to build the palette around. Any CSS color works, such as tomato, oklch(70% .12 250) or var(--brand).

Using the colors

The list goes where a list of values does. @p picks one at random for each cell: 

@grid: 80x1 / 60vmin;
clip-path: @tile.voronoi(gap: .8);
background: @p(@palette());
Open in playground

A gradient blends them:

@grid: 1 / 60vmin;
background: radial-gradient(@palette(3));
Open in playground

@stripe turns them into bands: 

@grid: 1 / 60vmin;
border-radius: 50%;
background: conic-gradient(@stripe(@palette(6)));
Open in playground

One palette per doodle

Every cell gets the same list, and so does :doodle. Calling @palette takes nothing from the random values of @r and @p, so adding it to a doodle leaves the rest of it as it was. Here :doodle takes the first color, the ground, as its background: 

@grid: 12 / 60vmin;
:doodle {
  background: @palette(1);
}
margin: 15%;
border-radius: 50%;
background: @p(@palette(4));
Open in playground

A seed keeps the same palette from one render to the next.

Around a color

Given a color, the palette comes back with it second, exactly as written, after a ground picked to stand out from it. Its hue often returns in the colors after it. A palette built around a color is never a gradient: 

@grid: 5x1 / 60vmin 20vmin;
background: @pn(@palette(5, #e6437d));
Open in playground

How the colors are chosen

Most seeds give distinct colors. The first is a ground: a paper white, an ink dark or a muted middle, lightly tinted. The second is the ink, the strongest color against it. Each one after is drawn away from the ones already in the list, often in a hue the palette already has, so the colors stay apart and still go together. A larger count keeps the smaller one as its start: @palette(3) is the first three colors of @palette(5).

About one seed in four gives a gradient instead: a smooth curve through three colors in the OKLab color space, sampled evenly from one end to the other, so every count starts and ends with the same two colors. Click the example until one shows up: 

@grid: 9x1 / 60vmin 20vmin;
background: @pn(@palette(9));
Open in playground

The colors are not fully random. Dark ones lean towards blue and light ones towards warm hues, and some palettes keep to a narrow band of lightness. Every color is kept inside sRGB, the range any screen can show.

See also