Color intelligence guide

Three looks

Each picture below was made from the AIKIZI logo the tool ships with. The table under each one is the whole recipe; everything not listed stays as the page opens.

The colors are found from a random start, so your swatches may differ a little. Each picture shows the top of the column; scroll inside the frame for the rest of the contrast grid, the histogram and the mood.

Seen with deuteranopia

The red letters turn olive yellow, while the blue shadow stays blue. A red and blue design keeps its contrast for most people with deuteranopia, but its red loses its meaning.

The swatches, the wheel and the grid still read the true red, so you can compare the two.

Try Protanopia on the same picture: the red turns a darker olive, and the letters lose more of their contrast with the black.

Two colors

With two groups, the dark background and its blue shadow merge into one near-black, and every red becomes one red. The grid is then a single pair, read both ways.

Their WCAG contrast is just over 4:1: fine for large text, not for small text. Tetradic adds three hues a quarter turn apart, so the wheel shows a square.

Raise Colors (k) one step at a time to see where the blue splits off.

Many colors

Sixteen groups split the logo into its shades: pure red, darker reds from the soft edges, several blues and near-blacks. Groups that end up empty are dropped, so there are fewer than sixteen swatches.

Triadic adds two hues a third of the way round, so the wheel shows a triangle. The grid still shows only the first six colors.

The small shares at the end are mostly edge pixels. CSS variables and Hex list copy them all.