← Back to Editor

#0C2B57 · #66908F · #F1E0C2 · #DCAA87 · #C96A6E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#0C2B57

Indigo · MidnightBlue · Deep Sea Blue

HEX
#0C2B57
RGB
rgb(12, 43, 87)
HSL
hsl(215, 76%, 19%)
HSB
hsb(215, 86%, 34%)
CMYK
cmyk(86%, 51%, 0%, 66%)
Oklch
oklch(29.4% 0.088 258.0)

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

#66908F

Mineral Blue · SlateGray · Mint Ice

HEX
#66908F
RGB
rgb(102, 144, 143)
HSL
hsl(179, 17%, 48%)
HSB
hsb(179, 29%, 56%)
CMYK
cmyk(29%, 0%, 1%, 44%)
Oklch
oklch(62.2% 0.046 194.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#F1E0C2

Goose Yellow · Bisque · Peach Orange

HEX
#F1E0C2
RGB
rgb(241, 224, 194)
HSL
hsl(38, 63%, 85%)
HSB
hsb(38, 20%, 95%)
CMYK
cmyk(0%, 7%, 20%, 5%)
Oklch
oklch(91.3% 0.044 81.9)

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

#DCAA87

Apricot · BurlyWood · Warm Sun

HEX
#DCAA87
RGB
rgb(220, 170, 135)
HSL
hsl(25, 55%, 70%)
HSB
hsb(25, 39%, 86%)
CMYK
cmyk(0%, 23%, 39%, 14%)
Oklch
oklch(77.6% 0.076 56.3)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#C96A6E

Crimson · LightCoral · Passion Red

HEX
#C96A6E
RGB
rgb(201, 106, 110)
HSL
hsl(357, 47%, 60%)
HSB
hsb(357, 47%, 79%)
CMYK
cmyk(0%, 47%, 45%, 21%)
Oklch
oklch(63.5% 0.121 18.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0C2B57
55370C

Analogous

0C4F55
0C2B57
120C55

Triadic

0C2B57
550C2A
2A550C

Split-Comp.

0C2B57
55120C
4F550C

Tetradic

0C2B57
550C4F
55370C
0C5512

Contrast Matrix WCAG 2.1 Contrast

0C2B57
66908F
F1E0C2
DCAA87
C96A6E
—
4.0
AA Large
10.8
AAA
6.8
AA
3.8
AA Large
4.0
AA Large
—
2.7
Fail
1.7
Fail
1.0
Fail
10.8
AAA
2.7
Fail
—
1.6
Fail
2.8
Fail
6.8
AA
1.7
Fail
1.6
Fail
—
1.8
Fail
3.8
AA Large
1.0
Fail
2.8
Fail
1.8
Fail
—
White BG
14.0AAA
3.5AA Large
1.3Fail
2.1Fail
3.6AA Large
Black BG
1.5Fail
6.0AA
16.2AAA
10.1AAA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

191A4C
78798F
EAE9C9
C6C68F
A09F6D

Deuteranopia

18154A
76738F
EBECCB
C9CD92
A5AD6D

Tritanopia

0E4442
688F8F
F0CFD0
DA9698
C46C6C

Achromatopsia

272727
838383
E2E2E2
B5B5B5
878787

Shades & Tints Shades & Tints

#0C2B57

Dark
Light

#66908F

Dark
Light

#F1E0C2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0c2b57;
  --color-2: #66908f;
  --color-3: #f1e0c2;
  --color-4: #dcaa87;
  --color-5: #c96a6e;
}

SCSS

$color-1: #0c2b57;
$color-2: #66908f;
$color-3: #f1e0c2;
$color-4: #dcaa87;
$color-5: #c96a6e;

TAILWIND

colors: {
  'brand-1': '#0c2b57',
  'brand-2': '#66908f',
  'brand-3': '#f1e0c2',
  'brand-4': '#dcaa87',
  'brand-5': '#c96a6e',
}

RGB Array

[12, 43, 87], [102, 144, 143], [241, 224, 194], [220, 170, 135], [201, 106, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0C2B57, #66908F, #F1E0C2, #DCAA87, #C96A6E is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #0c2b57; --color-2: #66908f; --color-3: #f1e0c2; --color-4: #dcaa87; --color-5: #c96a6e. 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 tech, SaaS, healthcare, eco industries. 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