Khroma

An AI color matching tool for designers: first select your favorite colors to train the algorithm, then generate an unlimited number of color combinations. It supports filtering by hue and color value, and provides hexadecimal codes, CSS codes and WCAG contrast ratings.

AI Art Generator#AI Design#Brand Visuals#Creative Tools

Updated: 2026-10-27

What is Khroma?

Khroma is an AI color palette tool for designers. Its approach is the opposite of "randomly generating a bunch of color swatches": first, you pick dozens of colors you like, and a small neural network is trained in the browser. All subsequent color palettes generated will align with your preferences, and colors you dislike can be marked and blocked. The official claims that its algorithm has learned from thousands of popular manually created color combinations on the internet, so the generated combinations are more like those handpicked by humans.

Who is it for?

UI/UX designers: Quickly define a set of primary and secondary colors at the start of a new project and verify that the text contrast meets the standards.
Brand Visual and Graphic Designers: See the actual visual effect of the same color scheme on posters, packaging, and gradient backgrounds.
Front-end engineers: Need ready-to-use hex and CSS codes, and also need to pass accessibility checks.
Independent developers building small products: Without a designer on hand, they also need a visually decent interface color scheme.
Design teaching: Use the process of "color selection - generation - comparison" to explain color matching logic.

Key features

Personalized Algorithm

You are initially presented with a set of colors to choose from, and the selection process trains the model; colors rated low are blocked and will not appear in subsequent generations, making the tool more aligned with your preferences the longer you use it.

Unlimited Color Scheme Generation

The official claims it can generate an unlimited number of combinations. Trained on thousands of manually created color schemes, it balances harmony with practically usable contrast relationships.

Four preview modes

For the same color scheme, you can switch to four views: typography, gradients, solid color swatches, and custom images, to directly see how it looks on headings, buttons, and real photos.

Search by dimensions

The generator supports filtering by hue, lightness, brightness, color name, as well as hex and RGB values. When you have a target color in mind, you don't have to keep scrolling down.

Collection Library & Standardized Output

Unlimited number of color palettes can be saved. For each palette, you can obtain the color name, hex, RGB, CSS code, as well as the WCAG accessibility rating of the pairing, so there is no need to look up additional information when handing it over to the front-end team.

Pure browser-based operation

Training and generation are both completed in the browser; no plug-ins or client applications need to be installed, and you can continue using it by logging into your account on another device.

How to use Khroma

Don't skimp on time at the beginning: Select dozens of colors, as the training quality determines all subsequent results.
the official claims you can get a dedicated generator in just a few minutes.
Create separate libraries for different scenarios: Train one set for brand colors, one for back-end interfaces, and one for illustrations.
Mixing them will cause mutual interference and result in inaccurate palettes in the end.
Take WCAG ratings as a hard threshold: Any color scheme with insufficient text contrast for the main body cannot be used, no matter how good it looks, especially for forms and buttons.
Copy the CSS directly into your code instead of manually typing out the hex codes.
missing even one digit will cause a white screen and take ages to debug.
The color scheme itself is usually not protected by copyright, but you should still avoid being highly similar to well-known brands.
recheck it according to the project specifications before commercial use.
Show the final color scheme to non-design colleagues before finalizing: ask them which brand it looks like at first glance, as they are more likely to spot problems than designers who stare at the screen all the time.