#DDE4B8 + #B9C29B + #98AA80 + #C16B6B + #D1143E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DDE4B8

Willow Green · Wheat · Mint Green

HEX

#DDE4B8

RGB

rgb(221, 228, 184)

HSL

hsl(70, 45%, 81%)

HSB

hsb(70, 19%, 89%)

CMYK

cmyk(3%, 0%, 19%, 11%)

Oklch

oklch(90.2% 0.058 114.9)

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

#B9C29B

Willow Green · Tan · Apple Green

HEX

#B9C29B

RGB

rgb(185, 194, 155)

HSL

hsl(74, 24%, 68%)

HSB

hsb(74, 20%, 76%)

CMYK

cmyk(5%, 0%, 20%, 24%)

Oklch

oklch(79.7% 0.054 118.2)

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

#98AA80

Grass Green · DarkSeaGreen · Olive Green

HEX

#98AA80

RGB

rgb(152, 170, 128)

HSL

hsl(86, 20%, 58%)

HSB

hsb(86, 25%, 67%)

CMYK

cmyk(11%, 0%, 25%, 33%)

Oklch

oklch(71.3% 0.062 126.8)

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

#C16B6B

Crimson · LightCoral · Passion Red

HEX

#C16B6B

RGB

rgb(193, 107, 107)

HSL

hsl(0, 41%, 59%)

HSB

hsb(0, 45%, 76%)

CMYK

cmyk(0%, 45%, 45%, 24%)

Oklch

oklch(62.5% 0.110 20.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#D1143E

Vermilion · Crimson · Passion Red

HEX

#D1143E

RGB

rgb(209, 20, 62)

HSL

hsl(347, 83%, 45%)

HSB

hsb(347, 90%, 82%)

CMYK

cmyk(0%, 90%, 70%, 18%)

Oklch

oklch(55.1% 0.213 18.5)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDE4B8

C0B9E4

Analogous

E4D6B9

DDE4B8

C7E4B9

Triadic

DDE4B8

B9DDE4

E4B9DD

Split-Comp.

DDE4B8

B9C7E4

D6B9E4

Tetradic

DDE4B8

B9E4D6

C0B9E4

E4B9C7

Contrast Matrix WCAG 2.1 Contrast

DDE4B8	B9C29B	98AA80	C16B6B	D1143E
—	1.4 Fail	1.9 Fail	2.8 Fail	4.1 AA Large
1.4 Fail	—	1.3 Fail	2.0 Fail	2.9 Fail
1.9 Fail	1.3 Fail	—	1.5 Fail	2.2 Fail
2.8 Fail	2.0 Fail	1.5 Fail	—	1.4 Fail
4.1 AA Large	2.9 Fail	2.2 Fail	1.4 Fail	—

White BG

1.3Fail

1.9Fail

2.5Fail

3.8AA Large

5.4AA

Black BG

15.9AAA

11.3AAA

8.4AAA

5.6AA

3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0C3

BDBDA4

A0A08A

9C9B6B

7F7D34

Deuteranopia

E0DFC5

BCBCA7

9F9D8D

A1A76B

8A9831

Tritanopia

DDCBCD

B9ACAE

999294

BD6B6B

C82C2A

Achromatopsia

DDDDDD

BBBBBB

A0A0A0

858585

515151

Shades & Tints Shades & Tints

#DDE4B8

Dark

Light

#B9C29B

Dark

Light

#98AA80

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dde4b8;
  --color-2: #b9c29b;
  --color-3: #98aa80;
  --color-4: #c16b6b;
  --color-5: #d1143e;
}

SCSS

$color-1: #dde4b8;
$color-2: #b9c29b;
$color-3: #98aa80;
$color-4: #c16b6b;
$color-5: #d1143e;

TAILWIND

colors: {
  'brand-1': '#dde4b8',
  'brand-2': '#b9c29b',
  'brand-3': '#98aa80',
  'brand-4': '#c16b6b',
  'brand-5': '#d1143e',
}

RGB Array

[221, 228, 184], [185, 194, 155], [152, 170, 128], [193, 107, 107], [209, 20, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDE4B8, #B9C29B, #98AA80, #C16B6B, #D1143E is ideal for: corporate websites, product showcases, portfolios. 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: #dde4b8; --color-2: #b9c29b; --color-3: #98aa80; --color-4: #c16b6b; --color-5: #d1143e. 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. 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