← Back to Editor

#003F66 · #5B6272 · #B6887E · #F9D9A5 · #FFF7D9

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#003F66

Lake Blue · MidnightBlue · Deep Sea Blue

HEX
#003F66
RGB
rgb(0, 63, 102)
HSL
hsl(203, 100%, 20%)
HSB
hsb(203, 100%, 40%)
CMYK
cmyk(100%, 38%, 0%, 60%)
Oklch
oklch(35.5% 0.088 244.4)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#5B6272

Indigo · DimGray · Prussian Blue

HEX
#5B6272
RGB
rgb(91, 98, 114)
HSL
hsl(222, 11%, 40%)
HSB
hsb(222, 20%, 45%)
CMYK
cmyk(20%, 14%, 0%, 55%)
Oklch
oklch(49.6% 0.027 266.7)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#B6887E

Crimson · DarkSalmon · Passion Red

HEX
#B6887E
RGB
rgb(182, 136, 126)
HSL
hsl(11, 28%, 60%)
HSB
hsb(11, 31%, 71%)
CMYK
cmyk(0%, 25%, 31%, 29%)
Oklch
oklch(66.8% 0.059 32.5)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#F9D9A5

Goose Yellow · Wheat · Peach Orange

HEX
#F9D9A5
RGB
rgb(249, 217, 165)
HSL
hsl(37, 88%, 81%)
HSB
hsb(37, 34%, 98%)
CMYK
cmyk(0%, 13%, 34%, 2%)
Oklch
oklch(90.0% 0.076 79.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FFF7D9

Goose Yellow · Beige · Lemon Cream

HEX
#FFF7D9
RGB
rgb(255, 247, 217)
HSL
hsl(47, 100%, 93%)
HSB
hsb(47, 15%, 100%)
CMYK
cmyk(0%, 3%, 15%, 0%)
Oklch
oklch(97.5% 0.040 94.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

003F66
662700

Analogous

00665A
003F66
000C66

Triadic

003F66
66003F
3F6600

Split-Comp.

003F66
66000C
665A00

Tetradic

003F66
5A0066
662700
0C6600

Contrast Matrix WCAG 2.1 Contrast

003F66
5B6272
B6887E
F9D9A5
FFF7D9
—
1.8
Fail
3.6
AA Large
8.1
AAA
10.3
AAA
1.8
Fail
—
2.0
Fail
4.5
AA
5.7
AA
3.6
AA Large
2.0
Fail
—
2.3
Fail
2.9
Fail
8.1
AAA
4.5
AA
2.3
Fail
—
1.3
Fail
10.3
AAA
5.7
AA
2.9
Fail
1.3
Fail
—
White BG
11.0AAA
6.1AA
3.1AA Large
1.4Fail
1.1Fail
Black BG
1.9Fail
3.4AA Large
6.8AA
15.5AAA
19.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1B1C5D
5E5E6E
A2A280
EBEBB2
FCFBE0

Deuteranopia

18135A
5E5D6D
A5A881
EDEFB5
FCFDE2

Tritanopia

035553
5B6B6A
B48283
F7BCBE
FFE6E7

Achromatopsia

313131
626262
959595
DDDDDD
F6F6F6

Shades & Tints Shades & Tints

#003F66

Dark
Light

#5B6272

Dark
Light

#B6887E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #003f66;
  --color-2: #5b6272;
  --color-3: #b6887e;
  --color-4: #f9d9a5;
  --color-5: #fff7d9;
}

SCSS

$color-1: #003f66;
$color-2: #5b6272;
$color-3: #b6887e;
$color-4: #f9d9a5;
$color-5: #fff7d9;

TAILWIND

colors: {
  'brand-1': '#003f66',
  'brand-2': '#5b6272',
  'brand-3': '#b6887e',
  'brand-4': '#f9d9a5',
  'brand-5': '#fff7d9',
}

RGB Array

[0, 63, 102], [91, 98, 114], [182, 136, 126], [249, 217, 165], [255, 247, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #003F66, #5B6272, #B6887E, #F9D9A5, #FFF7D9 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #003f66; --color-2: #5b6272; --color-3: #b6887e; --color-4: #f9d9a5; --color-5: #fff7d9. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color