Monochromatic
One hue, varied from pale tints to deep shades. The shared colour keeps everything feeling connected.
#EDF5F2#B7D7C8#77AB94#35745B#183D30
Use it for: Quiet interfaces, focused product pages and a cohesive brand mood.
// color_lab
Color Palettes
Colour combinations with background, text, primary, accent and surface roles.
Palette types & colour hierarchy
Analogous
Neighbours on the colour wheel, such as yellow, orange and red. Close relatives give variety without a sharp clash.
#FFF4D6#F4CD63#EEA04B#DF6945#8F3439
Use it for: Warm editorial stories, lifestyle brands and gentle transitions.
Complementary
Two hues opposite each other on the wheel. Their contrast makes a small accent feel especially vivid.
#F2F5FA#B8CEE6#3869A1#F2A15A#233449
Use it for: A clear focal point, a standout action or a bold brand contrast.
Split-complementary
One main hue plus the two neighbours of its opposite. You get lively contrast with a little more flexibility.
#F5F1FA#8063AE#D9C2ED#A9C96C#F2C76B
Use it for: Creative products and illustrations that need several distinct accents.
Triadic
Three hues spaced evenly around the wheel. Let one lead and use the other two in smaller doses.
#F8F5EE#D95265#EBCB58#4F83C4#29313F
Use it for: Playful brands, education and expressive graphic design.
Tetradic / double-complementary
Two complementary pairs give you four hue families. A dominant colour and plenty of neutral space keep the mix from competing.
#F5F4EF#C95E78#72A875#5798BB#E6AF61
Use it for: Rich illustrations, multi-category systems and colourful editorial work.
Colour hierarchy
A palette is a family. Hierarchy gives everyone a job.
Palette types describe how hues relate. Primary, secondary, accent and neutral describe how you use them. They are roles, not a requirement to use four different hues.
- Primary
- Your lead brand colour. Reserve it for the most important actions and recognisable moments.
- Secondary
- A supporting colour for quieter actions or distinct sections, without competing with the primary.
- Accent
- A small highlight for a badge, detail or moment of emphasis. A little goes a long way.
- Neutral
- The background, surfaces and everyday text. Neutrals give the other colours room to work.
Start with mostly neutral surfaces, one dominant colour and a smaller accent. Check every text/background combination for readability; a harmonious palette is not automatically an accessible one.
Sources & credit
Descriptions are written in our own words. Learn more at:
Palette collection
Miami Sunset.clr
Background
#2B0F54Text
#FDF0FFPrimary
#FF71CEAccent
#01CDFESurface
#3D1A78
#2B0F54Text
#FDF0FFPrimary
#FF71CEAccent
#01CDFESurface
#3D1A78
Preview
A page in Miami Sunset
Cards and panels sit on the surface color.
Primary buttonVaporwave neon at dusk
Styles: Vaporwave, Synthwave / Retrowave
Newsprint Ink.clr
Background
#F4F1EAText
#111111Primary
#B22222Accent
#5A5A5ASurface
#E8E3D7
#F4F1EAText
#111111Primary
#B22222Accent
#5A5A5ASurface
#E8E3D7
Preview
A page in Newsprint Ink
Cards and panels sit on the surface color.
Primary buttonBlack ink on warm paper
Styles: Newspaper / Print, Editorial / Magazine
Terracotta Studio.clr
Background
#F5EFE6Text
#2E2A24Primary
#C96442Accent
#7A8B5CSurface
#EAE1D3
#F5EFE6Text
#2E2A24Primary
#C96442Accent
#7A8B5CSurface
#EAE1D3
Preview
A page in Terracotta Studio
Cards and panels sit on the surface color.
Primary buttonWarm, earthy, calm
Styles: Organic / Natural, Warm Neutral / Earthy
Swiss Signal.clr
Background
#FFFFFFText
#111111Primary
#E30613Accent
#D9D9D9Surface
#F4F4F4
#FFFFFFText
#111111Primary
#E30613Accent
#D9D9D9Surface
#F4F4F4
Preview
A page in Swiss Signal
Cards and panels sit on the surface color.
Primary buttonObjective, punchy red
Styles: Swiss / International, Bauhaus
Acid Brutal.clr
Background
#FFFFFFText
#000000Primary
#C6FF00Accent
#FF3EA5Surface
#F0F0F0
#FFFFFFText
#000000Primary
#C6FF00Accent
#FF3EA5Surface
#F0F0F0
Preview
A page in Acid Brutal
Cards and panels sit on the surface color.
Primary buttonLoud, raw, unapologetic
Styles: Brutalism, Anti-design
Candy Pop Brutal.clr
Background
#FFF4E0Text
#000000Primary
#FFDE59Accent
#FF6B6BSurface
#A0E7E5
#FFF4E0Text
#000000Primary
#FFDE59Accent
#FF6B6BSurface
#A0E7E5
Preview
A page in Candy Pop Brutal
Cards and panels sit on the surface color.
Primary buttonNeo-brutal candy
Styles: Neo-Brutalism, Playful / Whimsical
Midnight Linear.clr
Background
#08090AText
#F7F8F8Primary
#5E6AD2Accent
#8A8F98Surface
#141516
#08090AText
#F7F8F8Primary
#5E6AD2Accent
#8A8F98Surface
#141516
Preview
A page in Midnight Linear
Cards and panels sit on the surface color.
Primary buttonPrecise, focused dark UI
Cyber Hazard.clr
Background
#0D0221Text
#E8E8E8Primary
#FCEE0AAccent
#00F0FFSurface
#1B0A3A
#0D0221Text
#E8E8E8Primary
#FCEE0AAccent
#00F0FFSurface
#1B0A3A
Preview
A page in Cyber Hazard
Cards and panels sit on the surface color.
Primary buttonNeon warning on black
Styles: Cyberpunk
Gilded Noir.clr
Background
#0B0B0BText
#F5E6C8Primary
#D4AF37Accent
#1F3A3DSurface
#161616
#0B0B0BText
#F5E6C8Primary
#D4AF37Accent
#1F3A3DSurface
#161616
Preview
A page in Gilded Noir
Cards and panels sit on the surface color.
Primary buttonArt deco glamour
Styles: Art Deco, Luxury / Premium
Nordic Morning.clr
Background
#F7F5F2Text
#2E2E2EPrimary
#7D9D9CAccent
#C9B8A6Surface
#EDE9E3
#F7F5F2Text
#2E2E2EPrimary
#7D9D9CAccent
#C9B8A6Surface
#EDE9E3
Preview
A page in Nordic Morning
Cards and panels sit on the surface color.
Primary buttonPale, quiet, natural
Styles: Scandinavian / Nordic, Minimalism
Game Boy.clr
Background
#9BBC0FText
#0F380FPrimary
#306230Accent
#8BAC0FSurface
#CADC9F
#9BBC0FText
#0F380FPrimary
#306230Accent
#8BAC0FSurface
#CADC9F
Preview
A page in Game Boy
Cards and panels sit on the surface color.
Primary button4-shade handheld nostalgia
Styles: Pixel Art / 8-bit
Memphis Party.clr
Background
#FFF8E7Text
#1A1A1APrimary
#FF6F91Accent
#00C9A7Surface
#FFC75F
#FFF8E7Text
#1A1A1APrimary
#FF6F91Accent
#00C9A7Surface
#FFC75F
Preview
A page in Memphis Party
Cards and panels sit on the surface color.
Primary buttonPostmodern confetti
Styles: Memphis, Retro / 80s
Botanical Plate.clr
Background
#F3EAD3Text
#3C3A2EPrimary
#6B8F71Accent
#A0522DSurface
#E8DCBF
#F3EAD3Text
#3C3A2EPrimary
#6B8F71Accent
#A0522DSurface
#E8DCBF
Preview
A page in Botanical Plate
Cards and panels sit on the surface color.
Primary buttonEngraved, aged, scientific
Holo Foil.clr
Background
#F8F6FFText
#1E1B2EPrimary
#B78CFFAccent
#7DF9FFSurface
#FFE3F3
#F8F6FFText
#1E1B2EPrimary
#B78CFFAccent
#7DF9FFSurface
#FFE3F3
Preview
A page in Holo Foil
Cards and panels sit on the surface color.
Primary buttonIridescent Y2K shimmer
Styles: Holographic / Iridescent, Y2K