Color Charts
Curated colour charts — Tailwind CSS, Material Design, Flat UI and the 216-colour web-safe palette, each with hex and RGB and click-to-copy.
Ready-made colour systems, each on one page with hex and RGB and click-to-copy.
Which color chart should you use?
A color chart is a ready-made system: a fixed set of colors, each with its hex and RGB code, chosen to work together so you do not have to build a palette from scratch. The right one depends on your stack. If you build with utility classes, the Tailwind CSS chart maps every bg-* and text-* class to its exact value. If you work on Android or with Material components, the Material Design chart covers every hue and weight of the Material 2 palette. For quick flat-design mockups, the Flat UI chart gives you 20 pre-balanced colors. And the web-safe chart is the classic evenly-spaced 216-color grid.
Every chart on this site works the same way: click a swatch to copy its hex code, hover for the RGB value. The colors are reference data — official published values, not our invention — so you can cite them with confidence.
Beyond the ready-made charts
If none of these fit, build your own. The palette generator turns any seed color into a harmony plus an 11-step light-to-dark ramp, the same structure Tailwind and Material use. The color wheel shows complementary, triadic and analogous relationships visually. For the standard browser color keywords, the 140 CSS color names reference has every one with its hex, RGB and HSL, and the color library groups 245+ named shades by family.