copy a color
analogous
Gruvbox Color Palette
The Gruvbox color palette is a triadic scheme featuring #282828, #cc241d, #98971a, #d79921. Optimized for web, UI design systems, digital illustrations, and brand packaging.
Interactive Palette Swatches
Live InspectorClick any swatch below to inspect color conversions, tints, shades, and WCAG contrast in real time.
Active:#282828
Live UI Component Preview
Interactive UI Preview
Live MockupSee how Gruvbox renders across real interface components.
✦Gruvbox
FeaturesTokensDocs
triadic
✦Design System Ready
Next-Gen Interfaces with Gruvbox
Harmonized visual balance with 4 calibrated tones. Engineered for seamless typography legibility, balanced surfaces, and high-converting action buttons.
Loved by 2,400+ designers
Assigned Roles:
Button Contrast:✓5.8:1 (Passes AA)
Color Science & Harmony Analysis
Triadic schemes use three colors evenly spaced around the color spectrum, resulting in vibrant energy and balanced visual contrast. Perfect for youth-focused apps, energetic marketing campaigns, and punchy call-to-action buttons.
To preserve visual hierarchy, apply the 60-30-10 rule: anchor roughly 60% of your interface canvas with the dominant neutral shade, allocate 30% for cards and surfaces, and reserve the most vibrant 10% accent strictly for interactive action buttons.
Design Implementation Checklist
🎨
UI & Product
Anchor background surfaces with the lightest or darkest tone and use mid-tones for borders and active tags.
💻
Frontend Code
Copy CSS custom properties or Tailwind tokens directly from the Design Studio on the right.
✏️
Brand & Print
Triadic balance ensures consistency across presentation decks and physical packaging.
Color Specs
#282828Tints (Lightness Mix)Click to copy
Shades (Darkness Mix)Click to copy
WCAG Accessibility Ratio
Best Pair for #282828:✓5.94:1 · Passes AA
#282828 texton #D79921 bg
On White (#FFF)14.7:1
On Black (#000)1.4:1
Export Design Tokens
CSS Gradient
:root {
--gruvbox-1: #282828;
--gruvbox-2: #cc241d;
--gruvbox-3: #98971a;
--gruvbox-4: #d79921;
}Related Color Palettes
Explore other curated schemes sharing similar chromatic tones.