Color palettes
This section is the published palette mirror for major design languages: the same HEX strings you will find in Material docs, Tailwind’s default theme, Bootstrap’s Sass maps, and so on — with search and one-click copy so you are not retyping from PDFs. It is intentionally read-only; use the tools area when you need to generate ramps, check contrast, or export tokens.
Material Design
Classic Material palette shades
Open → 🌊Tailwind CSS
Extended default v3 scales
Open → 📝HTML color names
140+ CSS named keywords
Open → 🔤CSS named colors
Color Module keyword list
Open → ▣Flat UI
Twenty flat UI classics
Open → 🅱Bootstrap 5
Theme + gray ramp
Open → ◈Ant Design
Primary color steps
Open → 🪟Fluent Design
Microsoft theme colors
Open → ⚛Chakra UI
Default React theme scales
Open → 🔲Web safe colors
216-color RGB cube
Open → 🎨Pantone
COTY & spot classics
Open → 🏭RAL colors
Industrial coating codes
Open → 🖍Crayola
Crayon names & HEX
Open → 🏠Paint colors
Interior paint names
Open →How this differs from “random palettes”
Each child page tracks a named system (versioned defaults from Bootstrap, Tailwind, Ant Design, and
so on). That matters for code review: when you say “Tailwind slate-600”, everyone should paste the same
HEX — these tables exist to make that frictionless.
How to use the palette pages
- Open the system you are implementing — the filter box scopes long lists (especially Tailwind and HTML names).
- Tap a row’s copy control to grab HEX for CSS, JSON tokens, or handoff notes.
- When you need semantic ramps (primary-50…950) for your own brand, switch to the CSS variables or Tailwind snippet generators instead of overloading these defaults.
When official docs should win
Frameworks ship point releases; token names and optional colors can change. If your build pins a specific version, diff against upstream release notes — ChromaXP snapshots a practical subset, not an automated mirror of every token.
FAQ
Will you add more systems (Radix, iOS HIG, etc.)?
New tables land when we can ship accurate data and maintenance bandwidth. Request patterns help — if a system has a stable public JSON of colors, it is a good candidate.
Why HEX and not only OKLCH?
Most design files and legacy pipelines still speak HEX first. Individual palette pages call out where OKLCH-first workflows make sense; use the converter when you need another string format.
Is this the same as the Tailwind page inside Tools?
The palette mirror is optimized for browsing and copy. The Tailwind config generator emits theme.extend blocks from your anchor colors — different job.