Color Chart
With Tailwind CSS, flat design, Material design and web safe color charts you’re sure to find the perfect color scheme for your website or app.
Spectrum Color Matrix
Click any cell to pick the color and view its complete lightness spectrum in the top bar.
Understanding Digital Color Systems
Color charts serve as the foundational blueprint for modern web design and UI development. Whether choosing an accessible primary action color from the Tailwind CSS scale, selecting intuitive semantic feedback tones from Material Design, or choosing retro Web-Safe hues, digital color palettes organize visual hierarchy and ensure consistent brand experiences across all devices and screens.
Tailwind CSS Scale (50–950)→
A scientifically balanced 11-step scale across 22 color families with full class names and hex codes.
Material Design 500→
Google’s standard UI design palette across 19 primary families with consistent saturation tiers.
Flat Design 20
Clean, vibrant, high-contrast colors designed specifically for modern flat interfaces, SaaS dashboards, and minimalist vector illustrations.
216 Web-Safe Colors→
The historic standard 6×6×6 RGB color cube with full table data and individual color inspection.
Frequently Asked Questions
How does the shade picker in the top bar work?▼
When you select any color in the chart, the top inspector automatically computes 11 proportional tints and shades across its exact hue. The white dot indicates the active shade, and you can click any segment in the bar to inspect or copy its exact Hex, RGB, HSL, and OKLCH color codes.
What is OKLCH and why is it included?▼
OKLCH is a modern CSS Color Level 4 color space. Unlike legacy RGB and HSL, OKLCH is perceptually uniform, meaning two colors with identical lightness values actually look equally bright to the human eye. Modern browsers support it natively via oklch() in CSS.