← Back to Editor

#03616B · #CD7044 · #D6A348 · #E1C0B7 · #FBD8D4

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

#03616B

Lake Blue · Teal · Peacock Green

HEX
#03616B
RGB
rgb(3, 97, 107)
HSL
hsl(186, 95%, 22%)
HSB
hsb(186, 97%, 42%)
CMYK
cmyk(97%, 9%, 0%, 58%)
Oklch
oklch(45.1% 0.076 207.2)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#CD7044

Tangerine · Chocolate · Warm Sun

HEX
#CD7044
RGB
rgb(205, 112, 68)
HSL
hsl(19, 58%, 54%)
HSB
hsb(19, 67%, 80%)
CMYK
cmyk(0%, 45%, 67%, 20%)
Oklch
oklch(64.2% 0.131 44.9)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D6A348

Ginger · SandyBrown · Warm Sun

HEX
#D6A348
RGB
rgb(214, 163, 72)
HSL
hsl(38, 63%, 56%)
HSB
hsb(38, 66%, 84%)
CMYK
cmyk(0%, 24%, 66%, 16%)
Oklch
oklch(74.6% 0.123 79.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#E1C0B7

Peach Pink · LightPink · Coral Red

HEX
#E1C0B7
RGB
rgb(225, 192, 183)
HSL
hsl(13, 41%, 80%)
HSB
hsb(13, 19%, 88%)
CMYK
cmyk(0%, 15%, 19%, 12%)
Oklch
oklch(83.4% 0.040 35.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FBD8D4

Peach Pink · Bisque · Cherry Blossom

HEX
#FBD8D4
RGB
rgb(251, 216, 212)
HSL
hsl(6, 83%, 91%)
HSB
hsb(6, 16%, 98%)
CMYK
cmyk(0%, 14%, 16%, 2%)
Oklch
oklch(91.0% 0.040 25.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

03616B
6D0D03

Analogous

036D43
03616B
032D6D

Triadic

03616B
6D0363
636D03

Split-Comp.

03616B
6D032D
6D4303

Tetradic

03616B
43036D
6D0D03
2D6D03

Contrast Matrix WCAG 2.1 Contrast

03616B
CD7044
D6A348
E1C0B7
FBD8D4
—
2.0
Fail
3.1
AA Large
4.2
AA Large
5.4
AA
2.0
Fail
—
1.5
Fail
2.1
Fail
2.6
Fail
3.1
AA Large
1.5
Fail
—
1.4
Fail
1.7
Fail
4.2
AA Large
2.1
Fail
1.4
Fail
—
1.3
Fail
5.4
AA
2.6
Fail
1.7
Fail
1.3
Fail
—
White BG
7.2AAA
3.5AA Large
2.3Fail
1.7Fail
1.3Fail
Black BG
2.9Fail
6.0AA
9.2AAA
12.4AAA
15.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2D69
A5A44F
C0BF5E
D3D2B9
ECECD5

Deuteranopia

261F68
AAB151
C3C763
D5D7BA
EEF1D5

Tritanopia

086766
C85759
D36F73
DFBBBB
F9D6D6

Achromatopsia

464646
878787
A8A8A8
C9C9C9
E2E2E2

Shades & Tints Shades & Tints

#03616B

Dark
Light

#CD7044

Dark
Light

#D6A348

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #03616b;
  --color-2: #cd7044;
  --color-3: #d6a348;
  --color-4: #e1c0b7;
  --color-5: #fbd8d4;
}

SCSS

$color-1: #03616b;
$color-2: #cd7044;
$color-3: #d6a348;
$color-4: #e1c0b7;
$color-5: #fbd8d4;

TAILWIND

colors: {
  'brand-1': '#03616b',
  'brand-2': '#cd7044',
  'brand-3': '#d6a348',
  'brand-4': '#e1c0b7',
  'brand-5': '#fbd8d4',
}

RGB Array

[3, 97, 107], [205, 112, 68], [214, 163, 72], [225, 192, 183], [251, 216, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #03616B, #CD7044, #D6A348, #E1C0B7, #FBD8D4 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: #03616b; --color-2: #cd7044; --color-3: #d6a348; --color-4: #e1c0b7; --color-5: #fbd8d4. 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