← Back to Editor

#2F3B3B · #384C4C · #E5EFCE · #A0D626 · #87BD0D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#2F3B3B

Slate Blue · DarkSlateGray · Peacock Green

HEX
#2F3B3B
RGB
rgb(47, 59, 59)
HSL
hsl(180, 11%, 21%)
HSB
hsb(180, 20%, 23%)
CMYK
cmyk(20%, 0%, 0%, 77%)
Oklch
oklch(34.1% 0.016 196.4)

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

#384C4C

Slate Blue · DarkSlateGray · Mint Ice

HEX
#384C4C
RGB
rgb(56, 76, 76)
HSL
hsl(180, 15%, 26%)
HSB
hsb(180, 26%, 30%)
CMYK
cmyk(26%, 0%, 0%, 70%)
Oklch
oklch(40.0% 0.025 196.2)

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

#E5EFCE

Willow Green · Beige · Mint Green

HEX
#E5EFCE
RGB
rgb(229, 239, 206)
HSL
hsl(78, 51%, 87%)
HSB
hsb(78, 14%, 94%)
CMYK
cmyk(4%, 0%, 14%, 6%)
Oklch
oklch(93.6% 0.045 121.0)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#A0D626

Grass Green · GreenYellow · Olive Green

HEX
#A0D626
RGB
rgb(160, 214, 38)
HSL
hsl(78, 70%, 49%)
HSB
hsb(78, 82%, 84%)
CMYK
cmyk(25%, 0%, 82%, 16%)
Oklch
oklch(80.9% 0.197 126.4)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#87BD0D

Grass Green · Olive · Forest Green

HEX
#87BD0D
RGB
rgb(135, 189, 13)
HSL
hsl(78, 87%, 40%)
HSB
hsb(78, 93%, 74%)
CMYK
cmyk(29%, 0%, 93%, 26%)
Oklch
oklch(73.3% 0.188 127.6)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F3B3B
3B3030

Analogous

303B36
2F3B3B
30363B

Triadic

2F3B3B
3B303B
3B3B30

Split-Comp.

2F3B3B
3B3036
3B3630

Tetradic

2F3B3B
36303B
3B3030
363B30

Contrast Matrix WCAG 2.1 Contrast

2F3B3B
384C4C
E5EFCE
A0D626
87BD0D
—
1.3
Fail
9.7
AAA
6.7
AA
5.1
AA
1.3
Fail
—
7.6
AAA
5.3
AA
4.0
AA Large
9.7
AAA
7.6
AAA
—
1.4
Fail
1.9
Fail
6.7
AA
5.3
AA
1.4
Fail
—
1.3
Fail
5.1
AA
4.0
AA Large
1.9
Fail
1.3
Fail
—
White BG
11.6AAA
9.1AAA
1.2Fail
1.7Fail
2.3Fail
Black BG
1.8Fail
2.3Fail
17.6AAA
12.1AAA
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

34343B
41414C
E9E9D6
B7B851
9E9F38

Deuteranopia

34333B
403E4C
E9E8D8
B4B05B
9B9742

Tritanopia

303B3B
394C4C
E5DCDE
A3727A
8A5961

Achromatopsia

373737
464646
E8E8E8
B2B2B2
999999

Shades & Tints Shades & Tints

#2F3B3B

Dark
Light

#384C4C

Dark
Light

#E5EFCE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f3b3b;
  --color-2: #384c4c;
  --color-3: #e5efce;
  --color-4: #a0d626;
  --color-5: #87bd0d;
}

SCSS

$color-1: #2f3b3b;
$color-2: #384c4c;
$color-3: #e5efce;
$color-4: #a0d626;
$color-5: #87bd0d;

TAILWIND

colors: {
  'brand-1': '#2f3b3b',
  'brand-2': '#384c4c',
  'brand-3': '#e5efce',
  'brand-4': '#a0d626',
  'brand-5': '#87bd0d',
}

RGB Array

[47, 59, 59], [56, 76, 76], [229, 239, 206], [160, 214, 38], [135, 189, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F3B3B, #384C4C, #E5EFCE, #A0D626, #87BD0D 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: #2f3b3b; --color-2: #384c4c; --color-3: #e5efce; --color-4: #a0d626; --color-5: #87bd0d. 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