← Back to Editor

#2D305D · #839692 · #97B96C · #CDDA70 · #EBFFCF

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

#2D305D

Indigo · DarkSlateGray · Prussian Blue

HEX
#2D305D
RGB
rgb(45, 48, 93)
HSL
hsl(236, 35%, 27%)
HSB
hsb(236, 52%, 36%)
CMYK
cmyk(52%, 48%, 0%, 64%)
Oklch
oklch(33.1% 0.079 278.3)

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

#839692

Mineral Blue · LightSlateGray · Warm Gray

HEX
#839692
RGB
rgb(131, 150, 146)
HSL
hsl(167, 8%, 55%)
HSB
hsb(167, 13%, 59%)
CMYK
cmyk(13%, 0%, 3%, 41%)
Oklch
oklch(65.7% 0.022 181.5)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

#97B96C

Grass Green · DarkSeaGreen · Olive Green

HEX
#97B96C
RGB
rgb(151, 185, 108)
HSL
hsl(86, 35%, 57%)
HSB
hsb(86, 42%, 73%)
CMYK
cmyk(18%, 0%, 42%, 27%)
Oklch
oklch(74.2% 0.110 128.3)

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

#CDDA70

Fresh Green · BurlyWood · Sunflower

HEX
#CDDA70
RGB
rgb(205, 218, 112)
HSL
hsl(67, 59%, 65%)
HSB
hsb(67, 49%, 85%)
CMYK
cmyk(6%, 0%, 49%, 15%)
Oklch
oklch(85.6% 0.132 115.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#EBFFCF

Willow Green · Beige · Mint Green

HEX
#EBFFCF
RGB
rgb(235, 255, 207)
HSL
hsl(85, 100%, 91%)
HSB
hsb(85, 19%, 100%)
CMYK
cmyk(8%, 0%, 19%, 0%)
Oklch
oklch(97.3% 0.066 126.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D305D
5D5A2D

Analogous

2D485D
2D305D
422D5D

Triadic

2D305D
5D2D30
305D2D

Split-Comp.

2D305D
5D422D
485D2D

Tetradic

2D305D
5D2D48
5D5A2D
2D5D42

Contrast Matrix WCAG 2.1 Contrast

2D305D
839692
97B96C
CDDA70
EBFFCF
—
4.0
AA Large
5.6
AA
8.2
AAA
11.7
AAA
4.0
AA Large
—
1.4
Fail
2.1
Fail
2.9
Fail
5.6
AA
1.4
Fail
—
1.5
Fail
2.1
Fail
8.2
AAA
2.1
Fail
1.5
Fail
—
1.4
Fail
11.7
AAA
2.9
Fail
2.1
Fail
1.4
Fail
—
White BG
12.4AAA
3.1AA Large
2.2Fail
1.5Fail
1.1Fail
Black BG
1.7Fail
6.7AA
9.5AAA
13.9AAA
19.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E52
8B8B93
A6A67F
D3D38A
F4F4DB

Deuteranopia

2E2E50
8A8993
A4A183
D2D190
F3F1DD

Tritanopia

2D4A48
849494
998D91
CE9EA2
ECE4E6

Achromatopsia

343434
909090
A6A6A6
CACACA
F4F4F4

Shades & Tints Shades & Tints

#2D305D

Dark
Light

#839692

Dark
Light

#97B96C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d305d;
  --color-2: #839692;
  --color-3: #97b96c;
  --color-4: #cdda70;
  --color-5: #ebffcf;
}

SCSS

$color-1: #2d305d;
$color-2: #839692;
$color-3: #97b96c;
$color-4: #cdda70;
$color-5: #ebffcf;

TAILWIND

colors: {
  'brand-1': '#2d305d',
  'brand-2': '#839692',
  'brand-3': '#97b96c',
  'brand-4': '#cdda70',
  'brand-5': '#ebffcf',
}

RGB Array

[45, 48, 93], [131, 150, 146], [151, 185, 108], [205, 218, 112], [235, 255, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D305D, #839692, #97B96C, #CDDA70, #EBFFCF 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: #2d305d; --color-2: #839692; --color-3: #97b96c; --color-4: #cdda70; --color-5: #ebffcf. 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