← Back to Editor

#4F876E · #467773 · #3E465D · #2C2A3F · #CBB18C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#4F876E

Mineral Blue · DimGray · Olive Green

HEX
#4F876E
RGB
rgb(79, 135, 110)
HSL
hsl(153, 26%, 42%)
HSB
hsb(153, 41%, 53%)
CMYK
cmyk(41%, 0%, 19%, 47%)
Oklch
oklch(57.7% 0.071 163.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#467773

Mineral Blue · DimGray · Mint Ice

HEX
#467773
RGB
rgb(70, 119, 115)
HSL
hsl(175, 26%, 37%)
HSB
hsb(175, 41%, 47%)
CMYK
cmyk(41%, 0%, 3%, 53%)
Oklch
oklch(53.3% 0.054 189.0)

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

#3E465D

Indigo · DarkSlateGray · Prussian Blue

HEX
#3E465D
RGB
rgb(62, 70, 93)
HSL
hsl(225, 20%, 30%)
HSB
hsb(225, 33%, 36%)
CMYK
cmyk(33%, 25%, 0%, 64%)
Oklch
oklch(39.7% 0.040 269.6)

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

#2C2A3F

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#2C2A3F
RGB
rgb(44, 42, 63)
HSL
hsl(246, 20%, 21%)
HSB
hsb(246, 33%, 25%)
CMYK
cmyk(30%, 33%, 0%, 75%)
Oklch
oklch(29.7% 0.038 288.2)

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

#CBB18C

Ginger · Tan · Warm Sun

HEX
#CBB18C
RGB
rgb(203, 177, 140)
HSL
hsl(35, 38%, 67%)
HSB
hsb(35, 31%, 80%)
CMYK
cmyk(0%, 13%, 31%, 20%)
Oklch
oklch(77.4% 0.058 76.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F876E
874F68

Analogous

4F8752
4F876E
4F8487

Triadic

4F876E
6E4F87
876E4F

Split-Comp.

4F876E
874F84
87524F

Tetradic

4F876E
524F87
874F68
84874F

Contrast Matrix WCAG 2.1 Contrast

4F876E
467773
3E465D
2C2A3F
CBB18C
—
1.2
Fail
2.2
Fail
3.3
AA Large
2.0
Fail
1.2
Fail
—
1.9
Fail
2.7
Fail
2.5
Fail
2.2
Fail
1.9
Fail
—
1.5
Fail
4.6
AA
3.3
AA Large
2.7
Fail
1.5
Fail
—
6.8
AA
2.0
Fail
2.5
Fail
4.6
AA
6.8
AA
—
White BG
4.2AA Large
5.1AA
9.4AAA
13.9AAA
2.1Fail
Black BG
5.0AA
4.1AA Large
2.2Fail
1.5Fail
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

676874
5B5C74
414257
2B2B3A
C0C095

Deuteranopia

646076
585574
414056
2B2B39
C1C397

Tritanopia

52797A
487575
3E5352
2C3635
CA9C9E

Achromatopsia

737373
686868
464646
2D2D2D
B5B5B5

Shades & Tints Shades & Tints

#4F876E

Dark
Light

#467773

Dark
Light

#3E465D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f876e;
  --color-2: #467773;
  --color-3: #3e465d;
  --color-4: #2c2a3f;
  --color-5: #cbb18c;
}

SCSS

$color-1: #4f876e;
$color-2: #467773;
$color-3: #3e465d;
$color-4: #2c2a3f;
$color-5: #cbb18c;

TAILWIND

colors: {
  'brand-1': '#4f876e',
  'brand-2': '#467773',
  'brand-3': '#3e465d',
  'brand-4': '#2c2a3f',
  'brand-5': '#cbb18c',
}

RGB Array

[79, 135, 110], [70, 119, 115], [62, 70, 93], [44, 42, 63], [203, 177, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4F876E, #467773, #3E465D, #2C2A3F, #CBB18C is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #4f876e; --color-2: #467773; --color-3: #3e465d; --color-4: #2c2a3f; --color-5: #cbb18c. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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