Palette, scale, and contrast report in one file
Choose one base color and get a complete brand kit. This includes a full color palette with a complementary color, a nine-shade scale, a spacing scale, and text sizes, all ready as CSS variables to paste into your project. The kit also includes a contrast report that tests every color against white and black. For any color that fails, it offers a readable alternative that changes only the brightness while keeping the hue. This is where most brand kits break in practice, because a beautiful color on the designer's screen turns into gray text on a gray background for the user.
A CSS file with the color variables, a scale file with spacing increments and text sizes, a palette board image for sharing, and a textual contrast report.
Because a beautiful brand color is not necessarily readable. The report shows exactly where text will fall below the AA standard, and provides an alternative that changes only the brightness and not the hue.
They are in the sRGB color space, which is what screens display. For printing, you should verify with the print shop, because some saturated hues cannot be accurately reproduced in ink.
The tool rotates the hue of the base color by 150 degrees on the color wheel, placing it close to the opposite color but not exactly across from it. This color is intended for specific highlights, up to about 10% of the page.
Klix could not load
Try reloading the page first. If a new version just went out, a reload fixes it straight away.
If reloading did not help, your browser may be too old. Klix runs the tools on your own device rather than on a server, so it needs a browser from 2022 or later. What to do: update Chrome or Firefox, then open klixtools.com again.