Colors: names, codes and shades
Find colors by name or code: HEX, RGB, HSL, OKLCH, lighter and darker shades, complementary and matching colors.
Click a color to show its details.
Reference colors
Web named colors (CSS)
These names can be used directly in CSS, for example color: tomato;
No color found. Type a code like #1245B4 to see its details.
Collections created by KSPNAI, free to use.
About this tool
This free online color library helps you find a color by name or by code. It brings together reference colors with common names (terracotta, sage green, duck blue, burgundy…) and the named CSS colors such as tomato or navy. Each color has its own page with HEX, RGB, HSL and OKLCH codes ready to copy into a website, a document or a design app.
The details also show a range of lighter and darker shades, the complementary color, analogous colors and a triad, plus a hint on whether dark or light text reads better on top. Filter by family (reds, blues, browns…) or type any HEX code to see its details. Links then open the color in the palette generator, the Tailwind shades tool or the contrast checker.
- Search by color name or HEX code
- Copy HEX, RGB, HSL and OKLCH codes
- Lighter and darker shades of each color
- Complementary, analogous and triadic colors
- Filter by color family
How to use it
- Type a name or code in the search box, or pick a family.
- Click a color to show its details.
- Click Copy next to the HEX, RGB, HSL or OKLCH code you need.
- Click a shade or related color to open its own details.
Frequently asked questions
What is the HEX code of a color like sage green or duck blue?
Type its name in the search box and click it: the details show its HEX code and its RGB, HSL and OKLCH equivalents. These values reflect the shade chosen by KSPNAI; other color charts may use a slightly different tone.
Can I see details for a color that is not in the list?
Yes. Type a HEX code such as #1245B4: if no color in the list matches, its full details are shown anyway.
What do HSL and OKLCH mean?
They are other ways to write a color in CSS. HSL describes it by hue, saturation and lightness; OKLCH uses a more even perceived lightness, which helps when building consistent shades.
Is it free, and do my searches stay private?
Yes, it is free with no account. The colors come with the page and searching happens in your browser, without sending anything.