Color intelligence guide
Overview
Color intelligence finds the main colors of a picture and tells you how they work together.
A picture holds thousands of slightly different colors. The tool groups them into a few with k-means clustering: it picks a few pixels as starting centers, sorts every pixel to the nearest one, and moves each center to the average of its group. After 15 rounds the centers are the palette. You choose how many with Colors (k); see clusters.
Each swatch shows its hex code and its share of the picture. The largest share comes first; that is the main color.
The largest color with a clear hue, not a grey, near-black or near-white one, is placed on a hue wheel. A harmony rule adds the hues that go with it, such as the opposite hue or a triangle of three.
A grid gives the WCAG contrast ratio of every pair of the first six colors. It is worked out from each color's relative luminance and says whether text in one color stays readable on the other: 3:1 passes AA for large text, 4.5:1 passes AA, and 7:1 passes AAA. See accessibility.
Under the grid, a histogram shows how much of the picture sits at each level of red, green and blue, and a mood line reads the picture's average HSL as warm, cool or neutral. See warmth.
The picture itself can be shown as people with protanopia, deuteranopia or tritanopia see it. See color blindness.
Open Color intelligence Start here
In this guide
- StartWhat you need, your first reading, and how to copy it.
- Every controlEvery control in the panel, one line each.
- Three looksThree readings of the sample and the settings behind them.
- Keep your workThe palette as code, one hex at a time, and the image.
- HelpWhat to do when something goes wrong.
It opens with a small AIKIZI logo, 96 pixels square. Try with sample loads the same logo at 192 pixels.
It runs in your browser on a 2D canvas and needs no WebGL. Nothing is uploaded. A mouse, a trackpad and a finger all work. The readings form one column that scrolls inside the frame.