← Back to Editor

#D6E697 · #698204 · #191A18 · #32754C · #5F9674

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatile

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D6E697

Willow Green · Khaki · Apple Green

HEX
#D6E697
RGB
rgb(214, 230, 151)
HSL
hsl(72, 61%, 75%)
HSB
hsb(72, 34%, 90%)
CMYK
cmyk(7%, 0%, 34%, 10%)
Oklch
oklch(89.5% 0.103 117.9)

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

#698204

Grass Green · Olive · Forest Green

HEX
#698204
RGB
rgb(105, 130, 4)
HSL
hsl(72, 94%, 26%)
HSB
hsb(72, 97%, 51%)
CMYK
cmyk(19%, 0%, 97%, 49%)
Oklch
oklch(56.6% 0.136 122.2)

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

#191A18

Ink Black · Black · Jet Black

HEX
#191A18
RGB
rgb(25, 26, 24)
HSL
hsl(90, 4%, 10%)
HSB
hsb(90, 8%, 10%)
CMYK
cmyk(4%, 0%, 8%, 90%)
Oklch
oklch(21.6% 0.004 128.7)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#32754C

Celadon · SeaGreen · Forest Green

HEX
#32754C
RGB
rgb(50, 117, 76)
HSL
hsl(143, 40%, 33%)
HSB
hsb(143, 57%, 46%)
CMYK
cmyk(57%, 0%, 35%, 54%)
Oklch
oklch(50.7% 0.095 154.2)

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

#5F9674

Celadon · SlateGray · Olive Green

HEX
#5F9674
RGB
rgb(95, 150, 116)
HSL
hsl(143, 22%, 48%)
HSB
hsb(143, 37%, 59%)
CMYK
cmyk(37%, 0%, 23%, 41%)
Oklch
oklch(62.5% 0.078 156.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D6E697
A898E6

Analogous

E6CF98
D6E697
B0E698

Triadic

D6E697
98D7E6
E698D7

Split-Comp.

D6E697
98B0E6
CF98E6

Tetradic

D6E697
98E6CF
A898E6
E698B0

Contrast Matrix WCAG 2.1 Contrast

D6E697
698204
191A18
32754C
5F9674
—
3.3
AA Large
13.0
AAA
4.1
AA Large
2.6
Fail
3.3
AA Large
—
4.0
AA Large
1.3
Fail
1.3
Fail
13.0
AAA
4.0
AA Large
—
3.1
AA Large
5.1
AA
4.1
AA Large
1.3
Fail
3.1
AA Large
—
1.6
Fail
2.6
Fail
1.3
Fail
5.1
AA
1.6
Fail
—
White BG
1.3Fail
4.4AA Large
17.5AAA
5.5AA
3.4AA Large
Black BG
15.6AAA
4.8AA
1.2Fail
3.8AA Large
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDAA
747422
191918
4F5056
77777C

Deuteranopia

DCDBAF
72712A
191919
4B4658
74707E

Tritanopia

D7B9BD
6A3B40
191919
355E5F
628384

Achromatopsia

D8D8D8
6C6C6C
191919
5C5C5C
828282

Shades & Tints Shades & Tints

#D6E697

Dark
Light

#698204

Dark
Light

#191A18

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d6e697;
  --color-2: #698204;
  --color-3: #191a18;
  --color-4: #32754c;
  --color-5: #5f9674;
}

SCSS

$color-1: #d6e697;
$color-2: #698204;
$color-3: #191a18;
$color-4: #32754c;
$color-5: #5f9674;

TAILWIND

colors: {
  'brand-1': '#d6e697',
  'brand-2': '#698204',
  'brand-3': '#191a18',
  'brand-4': '#32754c',
  'brand-5': '#5f9674',
}

RGB Array

[214, 230, 151], [105, 130, 4], [25, 26, 24], [50, 117, 76], [95, 150, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D6E697, #698204, #191A18, #32754C, #5F9674 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: #d6e697; --color-2: #698204; --color-3: #191a18; --color-4: #32754c; --color-5: #5f9674. 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