← Back to Editor

#DDF56A · #E7FC82 · #BDCAB5 · #A8AFA3 · #91958E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DDF56A

Willow Green · Khaki · Apple Green

HEX
#DDF56A
RGB
rgb(221, 245, 106)
HSL
hsl(70, 87%, 69%)
HSB
hsb(70, 57%, 96%)
CMYK
cmyk(10%, 0%, 57%, 4%)
Oklch
oklch(92.6% 0.165 118.0)

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

#E7FC82

Willow Green · Khaki · Apple Green

HEX
#E7FC82
RGB
rgb(231, 252, 130)
HSL
hsl(70, 95%, 75%)
HSB
hsb(70, 48%, 99%)
CMYK
cmyk(8%, 0%, 48%, 1%)
Oklch
oklch(95.1% 0.149 117.4)

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

#BDCAB5

Celadon · Silver · Apple Green

HEX
#BDCAB5
RGB
rgb(189, 202, 181)
HSL
hsl(97, 17%, 75%)
HSB
hsb(97, 10%, 79%)
CMYK
cmyk(6%, 0%, 10%, 21%)
Oklch
oklch(82.3% 0.032 133.3)

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

#A8AFA3

Ash · DarkGray · Silver Sand

HEX
#A8AFA3
RGB
rgb(168, 175, 163)
HSL
hsl(95, 7%, 66%)
HSB
hsb(95, 7%, 69%)
CMYK
cmyk(4%, 0%, 7%, 31%)
Oklch
oklch(74.5% 0.019 131.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#91958E

Ash · Gray · Silver Sand

HEX
#91958E
RGB
rgb(145, 149, 142)
HSL
hsl(94, 3%, 57%)
HSB
hsb(94, 5%, 58%)
CMYK
cmyk(3%, 0%, 5%, 42%)
Oklch
oklch(66.4% 0.011 131.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DDF56A
826BF5

Analogous

F5C76B
DDF56A
99F56B

Triadic

DDF56A
6BDEF5
F56BDE

Split-Comp.

DDF56A
6B99F5
C76BF5

Tetradic

DDF56A
6BF5C7
826BF5
F56B99

Contrast Matrix WCAG 2.1 Contrast

DDF56A
E7FC82
BDCAB5
A8AFA3
91958E
—
1.1
Fail
1.4
Fail
1.9
Fail
2.5
Fail
1.1
Fail
—
1.5
Fail
2.0
Fail
2.7
Fail
1.4
Fail
1.5
Fail
—
1.3
Fail
1.8
Fail
1.9
Fail
2.0
Fail
1.3
Fail
—
1.4
Fail
2.5
Fail
2.7
Fail
1.8
Fail
1.4
Fail
—
White BG
1.2Fail
1.1Fail
1.7Fail
2.3Fail
3.0AA Large
Black BG
17.3AAA
18.6AAA
12.3AAA
9.3AAA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E88C
F0F0A0
C3C3BA
ABABA6
939390

Deuteranopia

E6E494
EFEDA7
C2C1BB
ABAAA7
939290

Tritanopia

DEA6AC
E8B7BC
BEBEBF
A8A8A9
919191

Achromatopsia

DEDEDE
E8E8E8
C4C4C4
ACACAC
939393

Shades & Tints Shades & Tints

#DDF56A

Dark
Light

#E7FC82

Dark
Light

#BDCAB5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ddf56a;
  --color-2: #e7fc82;
  --color-3: #bdcab5;
  --color-4: #a8afa3;
  --color-5: #91958e;
}

SCSS

$color-1: #ddf56a;
$color-2: #e7fc82;
$color-3: #bdcab5;
$color-4: #a8afa3;
$color-5: #91958e;

TAILWIND

colors: {
  'brand-1': '#ddf56a',
  'brand-2': '#e7fc82',
  'brand-3': '#bdcab5',
  'brand-4': '#a8afa3',
  'brand-5': '#91958e',
}

RGB Array

[221, 245, 106], [231, 252, 130], [189, 202, 181], [168, 175, 163], [145, 149, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DDF56A, #E7FC82, #BDCAB5, #A8AFA3, #91958E is ideal for: health products, baby brands, fresh-style blogs. 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: #ddf56a; --color-2: #e7fc82; --color-3: #bdcab5; --color-4: #a8afa3; --color-5: #91958e. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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