What are the hex codes in the Beige & Navy palette?

The Beige & Navy color palette consists of Linen #F4EDE1, Oat #DCCFB9, Dusk #3C5880, Ink #0E1F35.

How should I use the Beige & Navy palette on a website?

Use Linen #F4EDE1 as the background, Ink #0E1F35 for text, Dusk #3C5880 for buttons and links, and Oat #DCCFB9 for accents. 4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Linen on Ink at 14.25:1.

Which colors in Beige & Navy have enough contrast for text?

The highest-contrast pair is #F4EDE1 on #0E1F35 with a ratio of 14.25:1, which passes WCAG AA for normal text.

#F4EDE1Linen

#DCCFB9Oat

#3C5880Dusk

#0E1F35Ink

Beige & Navy color palette

Modern Dark Muted Minimal White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Linen	`#F4EDE1`	`rgb(244, 237, 225)`	`hsl(38, 46%, 92%)`	`oklch(94.8% 0.018 81)`
Oat	`#DCCFB9`	`rgb(220, 207, 185)`	`hsl(38, 33%, 79%)`	`oklch(85.9% 0.033 81)`
Dusk	`#3C5880`	`rgb(60, 88, 128)`	`hsl(215, 36%, 37%)`	`oklch(45.7% 0.074 257)`
Ink	`#0E1F35`	`rgb(14, 31, 53)`	`hsl(214, 58%, 13%)`	`oklch(23.7% 0.048 256)`

Why it works and how to use it

Beige & Navy is a complementary color palette tagged modern, dark, muted. Near-complementary hues (about 177° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Dusk takes the lead while the rest support. Lightness runs from 13% to 92%. Well suited to websites, presentations and branding.

Background: Linen (#F4EDE1) is the lightest color, so it belongs on large surfaces.
Text: Ink (#0E1F35) on #F4EDE1 gives 14.25:1, passing WCAG AAA.
Primary: Dusk (#3C5880) is the most saturated mid-tone; use it for buttons and links (6.22:1 against the background, fine for UI elements).
Accent: Oat (#DCCFB9) for highlights, badges and hover states.

4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Linen on Ink at 14.25:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Beige & Navy

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#F4EDE1

#DCCFB9

#3C5880

#0E1F35

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#F4EDE1` on `#0E1F35`	Aa	14.25:1	AAA
`#DCCFB9` on `#0E1F35`	Aa	10.8:1	AAA
`#F4EDE1` on `#3C5880`	Aa	6.22:1	AA
`#DCCFB9` on `#3C5880`	Aa	4.71:1	AA
`#3C5880` on `#0E1F35`	Aa	2.29:1	Fail
`#F4EDE1` on `#DCCFB9`	Aa	1.32:1	Fail

Similar palettes 24 more in this mood