Color palette generator
Generate beautiful color palettes with the space bar. Lock colors, pick schemes and moods, check contrast, and export to CSS, Tailwind, ASE, or PNG.
Color chart
Tailwind v4 and v3, Material Design, Flat UI, web-safe, and HTML color charts with hex codes. Click any swatch to copy HEX, RGB, HSL, or OKLCH.
How to use Color chart
A complete color chart of the palettes designers and developers use every day, with every hex code one click away.
- Tailwind CSS v4 and v3 — all 22 color families from 50 to 950 (v4 values in OKLCH)
- Material Design — every primary shade and A100–A700 accent
- Flat UI — the 20 classic flat design colors
- Web safe colors — all 216
- HTML color names — all 148 CSS named colors
Choose whether a click copies HEX, RGB, HSL, OKLCH or the class name (for example blue-600).
Color chart FAQs
Is Color chart free?
Color chart is a free online tool on ReallyUseful.Tools. No account is required.
Does Color chart run in my browser?
Color chart is designed to run in your browser where supported, so files can stay on your device instead of being uploaded to a server.
More Colors
Color picker & converter
Pick any color and get HEX, RGB, HSL, CMYK, OKLCH, and code values. Eyedropper, color names, harmonies, tints and shades, and contrast.
Color wheel
Interactive color wheel for complementary, analogous, triadic, and other color schemes. Switch between the artist's RYB wheel and the RGB wheel.
Color palette from image
Extract a color palette from any photo or design. Drag markers to fine-tune colors, then export CSS, Tailwind, JSON, Adobe ASE, or PNG.
CSS gradient generator
Design linear, radial, and conic CSS gradients visually. Drag color stops, blend in OKLab, add easing, and export CSS, Tailwind, SVG, or PNG.