Color intelligence guide
Every control
Every control in the panel, top to bottom. Histogram starts closed; tap its title to open it.
Load and save
They stay at the top while the panel scrolls. Your pictures stay on this device for every lab tool until you press × on a tile; Reset puts the controls back and leaves them.
- Image AButton
- Your picture. Press it to open one from your device, or drop one on the frame; two at once fill A and B. It is kept on this device, never uploaded, and every lab tool that takes a picture opens with it until you press × on its corner. See palette from image.
- SwapButton
- Changes which tile Color intelligence uses, so a picture you added as B in another tool can be used here. When the other tile is empty, the logo the page opens with comes back.
- Image BButton
- A second kept picture. Color intelligence reads one picture at a time: the tile it is not using is dimmed and says Not used here, and pressing it only says so.
- Try with sampleButton
- Loads the AIKIZI logo at 192 pixels, twice the size of the one the page opens with, and reads it.
- CSS variablesButton
- Copies the palette as CSS variables, --color-1 for the first swatch and so on. See CSS variables.
- TailwindButton
- Copies the palette as Tailwind colors named palette, with shades 100, 200 and so on. See Tailwind colors.
- Hex listButton
- Copies the hex codes, one per line. See hex color.
- Copy imageButton
- Copies the picture at the top, as shown, with the vision mode applied. See clipboard.
Image
The line under Image shows the picture's width and height in pixels and how many colors were found, such as 96 × 96 · 6 colors. It reads Loading the sample while the page opens, and No image yet if the sample could not load.
Palette
- Colors (k)Slider · 2 to 16 · starts at 6
- How many colors to look for, from 2 to 16. The number changes as you drag; the picture is read again when you let go. Groups that end up empty are dropped, so a picture with few colors can show fewer swatches than you asked for. See clusters.
- ResampleButton
- Reads the picture again from a new random start. Every reading below the picture is redone.
Harmony
The wheel starts from the largest swatch with a clear hue: a saturation of at least 20% and a lightness from 10% to 90%. Red sits at the top, and the wheel draws that hue and the hues the rule adds as dots joined by a line. The squares under the wheel show those hues at a saturation of at least 50% and a lightness of at least 40%; press one to copy its hex code.
- Complementary · Analogous · Triadic · Tetradic · Split complementaryPick one
- The rule that picks the hues that go with the base color. See color harmony.
- Complementary: The hue opposite, half way round the wheel. See complementary colours.
- Analogous: The two neighbours, 30 degrees either side. See analogous colours.
- Triadic: Two more hues, a third of the way round each way, making a triangle. See triadic colours.
- Tetradic: Three more hues, a quarter of the way apart, making a square. See tetradic colours.
- Split complementary: The two hues on either side of the opposite one, 150 and 210 degrees round. See split-complementary.
Vision
Only the picture at the top changes. The readings under it stay on the true colors.
- Normal · Protanopia · Deuteranopia · TritanopiaPick one
- How the picture at the top is shown. See color blindness.
- Normal: The picture as it is.
- Protanopia: As seen without red-sensitive cones: reds and greens both turn olive. See protanopia.
- Deuteranopia: As seen without green-sensitive cones: reds turn olive yellow and greens turn a dull brown. See deuteranopia.
- Tritanopia: As seen without blue-sensitive cones: blues turn teal and yellows turn pink. See tritanopia.
Histogram
- Show luminanceOn or off · starts off
- Adds a white curve for brightness over the red, green and blue ones. See luminance and color histogram.
Reset
Every control goes back to how the page opened, and the picture is read again. The picture you opened stays.
- ResetButton
- Puts Colors (k), Harmony, Vision and Show luminance back to how the page opened, and reads the picture again.