One color into a full professional palette with ready code
Generate a color palette for your website. Choose one brand color and get a nine-color palette with an explanation of when to use each one, plus ready-to-paste CSS code. The palette includes a primary color, a hover shade, a soft shade for backgrounds and tags, a complementary color for spot highlights, two text shades, a surface color for cards, a page background, and a border color. Next to the text shades is a contrast check against white based on a 4.5 threshold. Below, a scale of nine shades from 100 to 900 is displayed, and clicking any color copies its code. Finally, copy the palette as CSS variables into your code or AI building tool. Everything is calculated in the browser.
If you have a logo, take it from there. If not, choose a color that fits your industry: blue for trust, green for health, orange for energy. You can also start from one of the seven ready-made colors.
A way to define a color once and use it throughout the website. The code defines variables like --color-primary, and AI building tools know how to work with them.
It is shifted by 150 degrees on the color wheel from the primary color, almost on the opposite side. The recommendation is to use it on less than 10% of the page.
Its contrast ratio against a white background is lower than 4.5, the threshold required by accessibility standards for regular text. Such a color is better for large text only, or you should darken it.
Yes, there is a field for the code in #RRGGBB format next to the color picker.
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.