100 Beautiful Hex Color Codes
Every Designer Should Know

A curated collection of timeless, trending, and deeply satisfying colors — from whisper-soft pastels to bold, electric hues — organized by mood and use case.

Color is the most immediate communicator in design. Before a user reads a word, they feel your palette. A great color code is more than a string of six characters — it's a shorthand for an emotion, an era, a brand identity.

This hand-curated list spans 10 moods and categories, featuring 100 hex codes that professional designers return to again and again. Whether you're building a landing page, designing a brand identity, or painting a UI from scratch, these are the colors worth bookmarking.

🔴 Reds & Corals

Passion, urgency, warmth — these reds range from deep crimson to sun-kissed coral.

Bittersweet

#FF6B6B

Imperial Red

#E63946

Venetian Red

#C1121F

Wild Watermelon

#FF4D6D

Flamingo Pink

#FF8FA3

Sandy Brown

#F4A261

Burnt Sienna

#E76F51

Tomato

#FF6347

Brick Red

#CB4154

Atomic Tangerine

#FF9F68

🟠 Oranges & Ambers

Energy, optimism, creativity — these warm hues make anything feel alive.

Dark Orange

#FF8C00

Pumpkin

#FB8500

Amber

#FFAA00

Sunglow

#FFD166

Peach

#FEC89A

Persimmon

#FF6B2B

Golden

#D4A017

Deep Amber

#FF9100

Mustard Gold

#FFBA49

Okra Gold

#E9C46A

🟡 Yellows & Limes

Sunlit and sharp — these colors radiate joy and attention-grabbing energy.

Minion Yellow

#FFD93D

Lemon Chiffon

#F7EF8A

Corn Silk

#EFEE9D

Electric Lime

#C9E003

Chartreuse

#ACE63A

Maize

#F4D35E

Canary

#FFF176

Laser Lemon

#E8F44D

Olive Zest

#B5CC18

Mindaro

#DAFF7D

🟢 Greens

From forest depth to neon vibrancy — green speaks of growth, health, and nature.

Emerald

#06D6A0

Mantis

#6BCB77

Persian Green

#2A9D8F

Jade

#52B788

Hunter Green

#1B4332

Celadon

#95D5B2

Sea Green

#40916C

Harlequin

#70E000

Mint Cream

#B7E4C7

Forest

#386641

🔵 Blues

Trust, calm, and clarity — the most universally beloved family in design.

Cornflower

#4D96FF

Royal Blue

#023E8A

Sky Blue

#48CAE4

Pacific

#0096C7

Airy Blue

#ADE8F4

Space Cadet

#1D3557

Air Force Blue

#457B9D

Columbia Blue

#90E0EF

Cerulean

#0077B6

Teal Blue

#005F73

🟣 Purples & Violets

Mystery, luxury, creativity — purple holds the balance between warmth and cool.

Amethyst

#845EC2

Mauve

#D4A5FF

Deep Violet

#5C4A8F

Lavender

#B39DDB

Byzantium

#7B2D8B

Thistle

#EAD7FF

Grape

#6A0572

Ultra Violet

#9B5DE5

Heliotrope

#C77DFF

Soft Lilac

#E0AAFF

🩷 Pinks & Magentas

Playful to fierce — this spectrum covers everything from blush to electric fuchsia.

Hot Pink

#FF6FA8

Magenta

#F72585

Baby Pink

#FFB3C6

Razzle Pink

#FF0080

Blush

#FFC2D1

Ruby

#D62246

Paradise Pink

#EF476F

Tea Rose

#FFCAD4

Cranberry

#C9184A

Pink Lace

#FFADC7

🩵 Teals & Cyans

Where blue meets green — fresh, modern, and deeply calming.

Medium Turquoise

#4ECDC4

Aquamarine

#00F5D4

Vivid Cerulean

#00B4D8

Turquoise

#80FFDB

Tiffany Blue

#72EFDD

Sea Foam

#34D1BF

Teal

#0E9594

Pale Aqua

#A0E9D6

Caribbean

#00CFB4

Capri

#56CFE1

🤎 Neutrals & Earth Tones

The backbone of every design — grounding, timeless, and effortlessly sophisticated.

Sage Green

#C9CBA3

Caramel

#A07855

Champagne

#D4B896

Chocolate

#6B4226

Linen

#E8DCCC

Warm Taupe

#9E8476

Cocoa

#5C4033

Cream

#F0E6D3

Dusty Blush

#C8B6A6

Dark Mauve

#796465

🖤 Darks & Moody Tones

Deep, dramatic, and unforgettable — these darks anchor any composition with authority.

Rich Black

#0D1B2A

Midnight Navy

#1A1A2E

Oxford Blue

#16213E

Onyx

#2D2D2D

Jet

#3D3D3D

Dark Slate

#212F3D

Dark Plum

#1C0221

Dark Purple

#240046

Eerie Black

#1B1B1B

Slate Blue

#4A4E69

🎨 Designer-Approved Palette Combinations

Great design isn't one color — it's how colors talk to each other.

Neon Noir #1A1A2E · #9B5DE5 · #F72585 · #FFD93D
Earth & Grain #F0E6D3 · #C9CBA3 · #A07855 · #6B4226
Ocean Deep #023E8A · #0096C7 · #00B4D8 · #ADE8F4
Tropical Canopy #1B4332 · #40916C · #95D5B2 · #DAFF7D
Sunset & Sea #FFD93D · #FF8C00 · #E63946 · #1D3557
Lavender Dreams #EAD7FF · #B39DDB · #845EC2 · #240046

💡 How to Use Hex Colors Like a Pro

  • Always define your color palette as CSS variables at the :root level so changes cascade instantly across your entire project.
  • Limit your primary palette to 3–5 hex codes. Introduce more only for semantic purposes (success, warning, danger, info).
  • Test every color pair for WCAG contrast ratio. A ratio of at least 4.5:1 is required for body text to meet accessibility standards.
  • Dark colors punch differently on screen vs print. Always preview hex codes in both contexts before committing to a brand palette.
  • Tints (adding white) and shades (adding black) of a single hex code can build an entire coherent UI palette — you don't always need 10 different colors.
  • Use the 60-30-10 rule: 60% dominant color, 30% secondary, 10% accent. This keeps any palette balanced and visually comfortable.
  • When pairing warm and cool colors, let one family dominate. Equal amounts of warm and cool often cancel each other out and feel unresolved.
Note: All 100 hex codes in this collection are production-ready and widely supported across all modern browsers. Hex codes are case-insensitive — #FF6B6B and #ff6b6b are identical. For CSS custom properties, SCSS variables, Tailwind config, or Figma styles, simply paste the hex code directly. Happy designing! 🎨