← Back to Editor

#2F5B7E · #4E7E88 · #D1C08C · #59431A · #292116

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

#2F5B7E

Slate Blue · DarkSlateBlue · Prussian Blue

HEX
#2F5B7E
RGB
rgb(47, 91, 126)
HSL
hsl(207, 46%, 34%)
HSB
hsb(207, 63%, 49%)
CMYK
cmyk(63%, 28%, 0%, 51%)
Oklch
oklch(45.6% 0.075 244.6)

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

#4E7E88

Slate Blue · SlateGray · Mint Ice

HEX
#4E7E88
RGB
rgb(78, 126, 136)
HSL
hsl(190, 27%, 42%)
HSB
hsb(190, 43%, 53%)
CMYK
cmyk(43%, 7%, 0%, 47%)
Oklch
oklch(56.3% 0.054 212.3)

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

#D1C08C

Ginger · Tan · Sunflower

HEX
#D1C08C
RGB
rgb(209, 192, 140)
HSL
hsl(45, 43%, 68%)
HSB
hsb(45, 33%, 82%)
CMYK
cmyk(0%, 8%, 33%, 18%)
Oklch
oklch(80.9% 0.071 92.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#59431A

Ochre · DarkOliveGreen · Cinnamon

HEX
#59431A
RGB
rgb(89, 67, 26)
HSL
hsl(39, 55%, 23%)
HSB
hsb(39, 71%, 35%)
CMYK
cmyk(0%, 25%, 71%, 65%)
Oklch
oklch(39.8% 0.064 80.5)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#292116

Ochre · Black · Cinnamon

HEX
#292116
RGB
rgb(41, 33, 22)
HSL
hsl(35, 30%, 12%)
HSB
hsb(35, 46%, 16%)
CMYK
cmyk(0%, 20%, 46%, 84%)
Oklch
oklch(25.4% 0.023 75.3)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F5B7E
7F532F

Analogous

2F7F7B
2F5B7E
2F337F

Triadic

2F5B7E
7F2F5B
5B7F2F

Split-Comp.

2F5B7E
7F2F33
7F7B2F

Tetradic

2F5B7E
7B2F7F
7F532F
337F2F

Contrast Matrix WCAG 2.1 Contrast

2F5B7E
4E7E88
D1C08C
59431A
292116
—
1.6
Fail
4.0
AA Large
1.3
Fail
2.2
Fail
1.6
Fail
—
2.5
Fail
2.1
Fail
3.5
AA Large
4.0
AA Large
2.5
Fail
—
5.2
AA
8.8
AAA
1.3
Fail
2.1
Fail
5.2
AA
—
1.7
Fail
2.2
Fail
3.5
AA Large
8.8
AAA
1.7
Fail
—
White BG
7.2AAA
4.5AA
1.8Fail
9.4AAA
15.9AAA
Black BG
2.9Fail
4.7AA
11.6AAA
2.2Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

424276
636386
CAC999
4F4F24
262519

Deuteranopia

403C73
605C85
CBCC9C
515226
262719

Tritanopia

316F6D
508483
D0A3A5
582C2D
291B1B

Achromatopsia

525252
717171
BFBFBF
454545
222222

Shades & Tints Shades & Tints

#2F5B7E

Dark
Light

#4E7E88

Dark
Light

#D1C08C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f5b7e;
  --color-2: #4e7e88;
  --color-3: #d1c08c;
  --color-4: #59431a;
  --color-5: #292116;
}

SCSS

$color-1: #2f5b7e;
$color-2: #4e7e88;
$color-3: #d1c08c;
$color-4: #59431a;
$color-5: #292116;

TAILWIND

colors: {
  'brand-1': '#2f5b7e',
  'brand-2': '#4e7e88',
  'brand-3': '#d1c08c',
  'brand-4': '#59431a',
  'brand-5': '#292116',
}

RGB Array

[47, 91, 126], [78, 126, 136], [209, 192, 140], [89, 67, 26], [41, 33, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F5B7E, #4E7E88, #D1C08C, #59431A, #292116 is ideal for: tech websites, dark mode UIs, game UIs, 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: #2f5b7e; --color-2: #4e7e88; --color-3: #d1c08c; --color-4: #59431a; --color-5: #292116. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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