Dark Mode Color Palette: Official Hex Codes for Canvas, Cards & Text
Build eye-friendly dark interfaces using Material #121212, elevated surface tokens, off-white typography, and WCAG-verified accent ramps.
Identify any hex code with the Color Name Finder, generate harmonious schemes in the Palette Generator, verify readability with our WCAG Contrast Checker, and preview colors live on real UI mockups.
Sage Green
Exact MatchHEX #B2AC88 · RGB(178, 172, 136) · HSL(51°, 18%, 62%)
WCAG 2.1 Contrast Check
#36454F on #FFFDD0
Every tool runs directly in your browser with instant hex, RGB, and HSL conversion—no account or signup required.
Enter any Hex or RGB value—or use the visual picker—to instantly find the closest official color name, CSS token, and complementary harmonies.
Generate balanced 5-swatch color schemes (complementary, analogous, triadic, monochromatic) from any base color with 1-click hex copy.
Test foreground text and background hex pairs against WCAG AA (4.5:1) and AAA (7:1) standards for body copy, headings, and UI buttons.
Preview your 5-color brand palette live on realistic SaaS Dashboard, Marketing Landing Page, and Mobile App UI mockups before writing CSS.
Blend any two colors using realistic subtractive RYB paint theory or digital RGB ratios and inspect exact midpoint hex codes.
Create 10-step lighter tint and darker shade ladders from a single hex code—ready to paste into Tailwind, Figma variables, or CSS tokens.
Click any hex badge below to copy the color code immediately, or open the full guide for 10+ shades, RGB values, and Canva instructions.
Calm botanical sage balanced with sun-baked terracotta clay, soft linen cream, and grounded charcoal type.
View 10 shades & guide→Layered low-glare dark surfaces (#313338, #2B2D31, #1E1F22) paired with high-legibility ash text and Blurple.
View 10 shades & guide→Warm golden-hour transition from radiant orange and coral red through magenta-pink into deep twilight violet.
View 10 shades & guide→Soft dusty mauve (#E0B0FF) and vibrant magenta-purple (#BF34CA) anchored by deep plum and charcoal.
View 10 shades & guide→Rich evergreen (#228B22 and #065F46) stepping smoothly into emerald and mint for trustworthy interfaces.
View 10 shades & guide→Authoritative web navy (#000080) and steel blue paired with warm metallic gold (#FFD700) and crisp alabaster.
View 10 shades & guide→WCAG-tested dark canvas (#121212) and elevated card surfaces (#1E1E1E) with soft indigo interactive accents.
View 10 shades & guide→Deep burgundy (#800020) and oxblood paired with antique gold and warm stationery cream (#FFF8F0).
View 10 shades & guide→Direct Hex & Color Reference Index
Explore our most-referenced guides—then test any combination in the Color name finder or Palette generator or Contrast checker or Live UI palette preview or Color mixing simulator or Tint & shade generator.
Every guide includes copy-ready Hex, RGB, and HSL tables, shade ladders, and WCAG contrast notes.
Build eye-friendly dark interfaces using Material #121212, elevated surface tokens, off-white typography, and WCAG-verified accent ramps.
Copy the canonical sage green hex code (#B2AC88), RGB(178, 172, 136), 10 light to dark sage shades, and custom Canva brand kit swatches.
Copy every Discord dark theme token: primary chat canvas (#313338), channel sidebar (#2B2D31), app frame (#1E1F22), and Blurple (#5865F2).
What color sits between pink and purple? Compare visual swatches and exact hex codes for Mauve (#E0B0FF), Magenta, Fuchsia, Orchid, and Berry.
See the exact color pink and purple make across 7 mixing ratios (from 90/10 rose magenta to 50/50 vibrant magenta #BF34CA and 10/90 deep violet).
Explore Instagram’s OLED-friendly #000000 canvas, #121212 elevated cards, #0095F6 action blue, and the 5-stop Story ring gradient hex codes.
Six complete sunset color palettes—from tropical golden hour to desert dusk—with copy-ready hex codes, RGB values, and CSS gradients.
Sun-baked clay as a digital swatch (#E2725B): 10 shades from linen to burnt umber, plus sage green, cream, and navy blue pairings.
Compare CSS forestgreen (#228B22) with deep evergreen UI tokens (#065F46), 10 pine-to-mint shades, and WCAG contrast tips.
Canonical web navy (#000080) and 10 shades from Alice blue to midnight navy—with gold, coral, and crisp white brand pairings.
Deep teal-slate chat backgrounds (#111B21), incoming/outgoing message bubble tokens (#202C33, #005C4B), and #25D366 accent green.
Master the 60% dominant, 30% secondary, 10% accent proportion rule with real website, dashboard, and interior hex examples.
See how blue and yellow blend across 7 ratios—from deep teal-green and forest to balanced green (#008000), chartreuse, and lime.
Explore 7 red-to-yellow mixing steps with visual swatches and copy-ready hex codes for red-orange, burnt orange, true orange (#FF8000), and amber.
Complete breakdown of WCAG 2.1 Level AA (4.5:1) and AAA (7:1) contrast requirements, non-text UI component rules, and pass/fail hex pairs.
Copy burgundy (#800020), wine (#722F37), and oxblood (#4A0E0E) hex codes with luxury gold, cream, and collegiate navy pairings.
Compare Spotify’s #121212 canvas and #1DB954 green accent with elevated card surfaces (#181818, #282828) and subdued metadata text.
Design primary CTAs, outline buttons, focus rings, and inline text links that pass 4.5:1 text contrast and 3:1 non-text contrast.