HexCode

Encyclopedia

Build authoritative landing pages around every color family.

Each write-up covers positioning, UX applications, sample hex codes, and FAQs, giving you copy blocks you can drop into marketing sites, design system docs, or AI prompts.

Slate

Graphite-leaning blue-grays built for editorial dashboards and technical UI shells.

Slate is the designer's answer to carbon fiber: a cool, serious neutral that keeps interfaces razor sharp without turning pitch black. The subtle blue undertone prevents surfaces from feeling lifeless, which is why modern dev tools, writing apps, and collaborative dashboards lean on Slate for their base layers.

Lean into the 700-900 values for immersive hero surfaces, then climb toward Slate 300 for dividers that feel hand-drawn rather than mechanical. The relatively high chroma makes white typography glow, giving you AAA contrast ratios with less eye strain.

ArchitecturalMethodicalMinimal
Deep dive
  • Slate 900#0f172a

    Primary background for dark UI shells

  • Slate 700#334155

    Persistent navigation rails and cards

  • Slate 300#cbd5e1

    Hairline dividers and muted iconography

Gray

Universally legible grayscale values for product UI, dense typography, and form systems.

Gray remains the most versatile palette in digital design because it behaves predictably under every lighting condition. The 400-700 steps provide balanced contrast ratios that read well in screenshots, presentations, and printed decks, which is why enterprise teams rely on it for design systems.

Treat Gray as the scaffolding of your interface: build surfaces with 900-800, drop copy onto 100-200, then weave accent hues only where intent matters. Because the palette is emotionally neutral, the focus shifts entirely to hierarchy and motion.

TrustworthyUtilitarianExecutive
Deep dive
  • Gray 900#111827

    Primary background for timeless contrast

  • Gray 600#4b5563

    Body copy and subdued icons

  • Gray 300#d1d5db

    Input borders and structural dividers

Zinc

Chrome-like neutrals with subtle violet undertones popular in premium editorial brands.

Zinc mixes a hint of violet into the grayscale, resulting in a futuristic sheen that feels at home in fashion, AI, and publishing experiences. It photographs beautifully, which is why landing pages often swap default blacks for Zinc 900.

Because the palette still behaves like a neutral, you can layer iridescent gradients, noisy textures, or glassmorphism effects without losing clarity. Zinc 200-300 is especially useful for card borders that need to disappear on scroll.

FuturisticEditorialPolished
Deep dive
  • Zinc 900#18181b

    Deep background without pure black

  • Zinc 700#3f3f46

    Control surfaces and modular cards

  • Zinc 200#e4e4e7

    Featherweight dividers and captions

Neutral

Perfect mid-tone neutrals designed for typography, grids, and print-ready systems.

Neutral sits squarely between warm and cool, making it a diplomatic choice for multi-brand design systems. It photographs consistently, exports to PDF without banding, and keeps UI accessible even when the rest of the palette is experimental.

Use Neutral 900-800 in light interfaces when you need elegant typography that is softer than pure black. Step into Neutral 300 for gridlines, kanban lanes, or email templates that require gentle separation.

BalancedEditorialEvergreen
Deep dive
  • Neutral 900#171717

    Primary text for luxury editorial layouts

  • Neutral 600#525252

    Muted iconography and form labels

  • Neutral 200#e5e5e5

    Table dividers and cards in light UI

Stone

Warm greige tones that add organic softness to otherwise technical products.

Stone embraces warmth without drifting into beige, which makes it perfect for wellness products, craft brands, and fintech experiences that want to feel more human. The palette references ceramics and concrete rather than plastic or chrome.

In digital products, Stone 700 can replace the typical dark nav bar, instantly softening the experience. Pair it with deep forest greens or copper gradients to create a boutique aesthetic.

OrganicTactileHospitality
Deep dive
  • Stone 900#1c1917

    Backgrounds that mimic artisan paper

  • Stone 600#57534e

    Navigation, cards, and buttons with warmth

  • Stone 300#d6d3d1

    Soft dividers, charts, and illustration fills

Red

Signal-driven hues for alerts, commerce urgency, and cinematic storytelling.

Red is inherently emotional, so it should be choreographed carefully. The 500-700 steps scream urgency, while the 100-200 range works for subtle badges or KPI deltas. Use motion and copy to reinforce meaning whenever you deploy Red.

In editorial storytelling, pairing deep Red 900 backgrounds with serif typography instantly creates drama. Shift toward Red 400 when you need CTA buttons that still feel premium.

EnergeticAuthoritativeEmotive
Deep dive
  • Red 900#7f1d1d

    Backdrop for dramatic hero imagery

  • Red 600#dc2626

    Primary alert states with AA contrast

  • Red 200#fecaca

    Supportive fills for data visualizations

Orange

Optimistic warmth suited for onboarding flows, fintech activations, and brand reveals.

Orange embodies momentum. It feels friendlier than pure Red yet still commands attention, which is why fintech onramps, climate tech dashboards, and subscription upsells often anchor to Orange gradients.

Use Orange 500-600 for buttons that must pop on both light and dark surfaces. Orange 100-200 makes excellent chart fills because it holds saturation even when opacity drops.

OptimisticEnergeticInventive
Deep dive
  • Orange 700#c2410c

    Headline gradients and CTA backgrounds

  • Orange 500#f97316

    Buttons and pills with instant visibility

  • Orange 200#fed7aa

    Chart fills and empty states

Amber

Golden hour hues crafted for premium commerce, luxury hospitality, and data highlights.

Amber sits between Orange and Yellow, offering the richness of molten metal with better legibility. It photographs like jewelry, which is why hospitality and premium commerce brands lean on it for accents.

Deploy Amber 400-500 as focus states or KPI highlights when you want sophistication without aggression. The deeper 700-900 values can entirely replace gold gradients in CSS-only implementations.

LuxuriousWarmCelebratory
Deep dive
  • Amber 700#b45309

    Deep gold substitute for hero bands

  • Amber 500#f59e0b

    Buttons, chips, and interactive accents

  • Amber 200#fde68a

    Soft glows and analytic markers

Yellow

High-energy illumination that doubles as warning states and playful highlights.

Yellow communicates luminosity and optimism. The 400-600 steps are bright enough for attention banners, while the 100-200 levels behave like real sunlight inside gradients.

In UX, avoid using Yellow for long bodies of text—it flickers on LCD displays. Instead, use it to underline, annotate, and spotlight critical data or steps in a How-To flow.

ImaginativePlayfulClever
Deep dive
  • Yellow 600#ca8a04

    Caution badges and chip backgrounds

  • Yellow 400#facc15

    Metric highlights and timeline dots

  • Yellow 200#fef08a

    Illustration fills and chart overlays

Lime

Electric citrus hues perfect for climate tech, AI visualizations, and futuristic branding.

Lime captures the feeling of living energy—photosynthesis, neon circuitry, bio data. Designers reach for Lime when they need to signal innovation without leaning on stereotypical greens.

Keep Lime 400-500 as your brightest accent and anchor it with deep charcoals or midnight blues. Even small chips or micro-interactions feel high-tech with Lime as the focus.

EnergeticFuturisticExperimental
Deep dive
  • Lime 600#65a30d

    Bold accents on dark backgrounds

  • Lime 400#a3e635

    Charts and radial progress visuals

  • Lime 200#d9f99d

    Glows, halos, and focus rings

Green

Natural growth tones spanning wellness, finance, and success indicators.

Green is shorthand for “success” in UX. The palette ranges from minty highlights to forest-dense anchors, covering onboarding confetti, KPI deltas, and trust-building brand moments.

Pair Green with warm neutrals when telling wellness stories, or with Slate/Zinc when building fintech dashboards. Because the palette is familiar, you can push typography and layout while keeping the palette grounded.

RestorativeTrustworthyGrounded
Deep dive
  • Green 700#15803d

    Primary buttons in fintech experiences

  • Green 500#22c55e

    Success toasts and progress bars

  • Green 200#bbf7d0

    Illustration fills and secondary chips

Emerald

Polished jewel tones with luxurious depth for fintech, sustainability, and culture brands.

Emerald turns standard greens into couture. The palette has enough blue to feel stable yet rich, making it ideal for wealth management, impact funds, and editorial layouts about craft.

Use Emerald 800-900 as the foundation of dark mode experiences, then layer Emerald 300 glows or glass panels for depth. The palette pairs beautifully with brass, champagne, and soft peach accents.

LuxuriousGroundedHeritage
Deep dive
  • Emerald 800#065f46

    Hero backgrounds and modal shells

  • Emerald 500#10b981

    CTA buttons and chart highlights

  • Emerald 200#a7f3d0

    Glimmers, focus rings, and gradients

Teal

Balanced blue-green hues ideal for health tech, ocean narratives, and mindful productivity.

Teal straddles land and sea. It carries the trust of blue with the life of green, which is why health-tech platforms, mindfulness apps, and ocean-focused NGOs gravitate toward it.

Because Teal holds saturation even when muted, it performs well in charts and iconography. Teal 500-600 reads clearly against both light and dark shells.

CalmReliableMindful
Deep dive
  • Teal 700#0f766e

    Navigation and card backgrounds

  • Teal 500#14b8a6

    Primary buttons and toggles

  • Teal 200#99f6e4

    Charts, avatars, and illustration accents

Cyan

Signal-bright aquas built for motion design, futuristic assistants, and data highlights.

Cyan feels like lasers and fiber optics. It is inherently digital, making it perfect for AI assistants, crypto dashboards, and immersive motion graphics.

Because Cyan can become overpowering, use it for pulses, focus states, and key data points. Cyan 300 retains clarity when rendered as a translucent overlay or shader.

High-TechEnergeticOptimistic
Deep dive
  • Cyan 700#0e7490

    Dark UI nav bars with neon energy

  • Cyan 500#06b6d4

    Buttons, toggles, and slider thumbs

  • Cyan 200#a5f3fc

    Glow effects and visualizations

Sky

Airy blues optimized for onboarding, educational UI, and complex data visualizations.

Sky captures the optimism of open air. Designers lean on it for onboarding flows, education platforms, and long scrollytelling experiences because it keeps viewers calm while guiding attention.

Sky 400-500 is vibrant enough for CTAs, while Sky 100-200 can span the entire background without overwhelming copy. Gradients from Sky to Indigo create a natural atmospheric perspective.

OptimisticFriendlyAssured
Deep dive
  • Sky 700#0369a1

    High-impact headings and CTA states

  • Sky 500#0ea5e9

    Buttons, icons, and empty-state illustrations

  • Sky 200#bae6fd

    Section backgrounds or cards

Blue

The definitive trust signal for SaaS, fintech, documentation, and navigation components.

Blue has dominated interface design for two decades because it is legible, emotionally neutral, and universally associated with trust. The 500-700 steps remain the backbone of navigation bars, buttons, and data highlights across industries.

To modernize Blue, mix it with intelligent typography and gradient overlays. Deep Blue 900 backgrounds paired with creamy serif type read like flagship editorial layouts.

TrustworthyIntelligentStructured
Deep dive
  • Blue 800#1e40af

    Navigation rails and hero backgrounds

  • Blue 600#2563eb

    Primary buttons and key metrics

  • Blue 300#93c5fd

    Charts, badges, and onboarding hints

Indigo

Moody academic blues suited for knowledge products, developer tooling, and culture brands.

Indigo sits between Blue and Violet, bringing a scholarly, almost nocturnal tone to digital products. It feels premium without being flashy, which is why developer tools, academies, and museums frequently adopt it.

Use Indigo 900 for backgrounds that mimic midnight paper, then layer Indigo 400 text or outlines for luminous contrast. Pair with copper or amber to add warmth when needed.

ScholarlyMysticalFocused
Deep dive
  • Indigo 900#312e81

    Hero panels and marketing modals

  • Indigo 600#4f46e5

    Primary interactions with depth

  • Indigo 300#a5b4fc

    Charts, secondary buttons, and glows

Violet

Dreamy violets crafted for product storytelling, music platforms, and Web3 aesthetics.

Violet carries an ethereal quality that works beautifully for music tech, creator tools, and speculative design. The palette transitions seamlessly into gradients, making it a favorite for hero sections.

Mix Violet 500-600 with Cyan or Pink to create iridescent effects. Violet 100 backgrounds keep interfaces light while still on-brand.

ExpressiveEtherealProgressive
Deep dive
  • Violet 800#5b21b6

    Immersive hero backgrounds

  • Violet 500#8b5cf6

    Buttons and interactive components

  • Violet 200#ddd6fe

    Cards, chips, and light surfaces

Purple

Confident royals perfect for leadership brands, community products, and premium SaaS.

Purple blends the creativity of Violet with the steadiness of Blue, resulting in a palette that feels both premium and decisive. Community platforms, leadership brands, and productivity tools often choose Purple to signal confident creativity.

Purple 600-700 works beautifully for dark navigation bars. When paired with Neutral or Slate copy, you get contrast-rich UI that still feels vibrant.

ConfidentCulturedMagnetic
Deep dive
  • Purple 800#6b21a8

    Hero panels and complex data viz

  • Purple 600#9333ea

    Primary CTAs and switches

  • Purple 300#d8b4fe

    Cards, backgrounds, and avatars

Fuchsia

Electric magentas for nightlife brands, AI art tools, and bold consumer experiences.

Fuchsia is unapologetically vibrant. It’s the go-to hue for nightlife, creator tools, and AI art platforms because it instantly communicates experimentation and flair.

Because the palette is intense, reserve it for gradients, glows, and hero typography. Pair with deep charcoals or Indigo to keep contrast high.

BoldExpressiveAvant Garde
Deep dive
  • Fuchsia 700#a21caf

    Immersive hero backgrounds and overlays

  • Fuchsia 500#d946ef

    Buttons and toggles that demand attention

  • Fuchsia 200#f5d0fe

    Gradients, charts, and badges

Pink

Soft-yet-confident palette for wellness, commerce, and community products.

Pink has evolved beyond cliché. The Tailwind palette ranges from whisper-light blush to decisive magenta, giving you everything needed for wellness commerce, modern bridal, or skin-care tech.

Use Pink 200-300 for backgrounds that feel like premium packaging. Pink 600 can serve as a confident CTA without reading as harsh.

NurturingModernPlayful
Deep dive
  • Pink 700#be185d

    Statement headlines and overlays

  • Pink 500#ec4899

    Primary buttons and inputs

  • Pink 200#fbcfe8

    Backgrounds, cards, and promo blocks

Rose

Romantic reds tuned for editorial storytelling, food tech, and immersive campaigns.

Rose is a softer, more narrative-driven sibling of Red. It carries emotion without panic, making it ideal for editorial stories, culinary brands, and heartfelt campaigns.

Pair Rose 600 with Stone or Neutral backgrounds for romantic hero sections. Rose 200 washes keep product photography warm and on-brand.

RomanticArtfulInviting
Deep dive
  • Rose 700#be123c

    Immersive hero bands and gradients

  • Rose 500#f43f5e

    Buttons, pricing, and highlight cards

  • Rose 200#fecdd3

    Image overlays, charts, and backgrounds