#DAE7A5 + #BFDFB6 + #9FD4C0 + #7DB1B6 + #567080 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#DAE7A5

Willow Green · Wheat · Apple Green

HEX

#DAE7A5

RGB

rgb(218, 231, 165)

HSL

hsl(72, 58%, 78%)

HSB

hsb(72, 29%, 91%)

CMYK

cmyk(6%, 0%, 29%, 9%)

Oklch

oklch(90.2% 0.087 117.2)

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

#BFDFB6

Celadon · Silver · Apple Green

HEX

#BFDFB6

RGB

rgb(191, 223, 182)

HSL

hsl(107, 39%, 79%)

HSB

hsb(107, 18%, 87%)

CMYK

cmyk(14%, 0%, 18%, 13%)

Oklch

oklch(87.0% 0.065 138.8)

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

#9FD4C0

Jade · LightSteelBlue · Apple Green

HEX

#9FD4C0

RGB

rgb(159, 212, 192)

HSL

hsl(157, 38%, 73%)

HSB

hsb(157, 25%, 83%)

CMYK

cmyk(25%, 0%, 9%, 17%)

Oklch

oklch(82.7% 0.062 169.6)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#7DB1B6

Slate Blue · MediumAquaMarine · Lake Green

HEX

#7DB1B6

RGB

rgb(125, 177, 182)

HSL

hsl(185, 28%, 60%)

HSB

hsb(185, 31%, 71%)

CMYK

cmyk(31%, 3%, 0%, 29%)

Oklch

oklch(72.6% 0.055 203.5)

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

#567080

Slate Blue · DimGray · Navy Blue

HEX

#567080

RGB

rgb(86, 112, 128)

HSL

hsl(203, 20%, 42%)

HSB

hsb(203, 33%, 50%)

CMYK

cmyk(33%, 13%, 0%, 50%)

Oklch

oklch(53.1% 0.040 235.5)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DAE7A5

B3A6E7

Analogous

E7D4A6

DAE7A5

BAE7A6

Triadic

DAE7A5

A6DAE7

E7A6DA

Split-Comp.

DAE7A5

A6BAE7

D4A6E7

Tetradic

DAE7A5

A6E7D4

B3A6E7

E7A6BA

Contrast Matrix WCAG 2.1 Contrast

DAE7A5	BFDFB6	9FD4C0	7DB1B6	567080
—	1.1 Fail	1.3 Fail	1.8 Fail	4.0 AA Large
1.1 Fail	—	1.1 Fail	1.6 Fail	3.6 AA Large
1.3 Fail	1.1 Fail	—	1.4 Fail	3.1 AA Large
1.8 Fail	1.6 Fail	1.4 Fail	—	2.2 Fail
4.0 AA Large	3.6 AA Large	3.1 AA Large	2.2 Fail	—

White BG

1.3Fail

1.5Fail

1.7Fail

2.4Fail

5.2AA

Black BG

16.0AAA

14.4AAA

12.7AAA

8.8AAA

4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0B5

CDCDC0

B6B6C5

9494B5

61617C

Deuteranopia

DFDEB9

CBC9C2

B3AFC6

918DB5

605E7B

Tritanopia

DBC2C4

C1C8C9

A2C9CA

80B4B4

577978

Achromatopsia

DCDCDC

D1D1D1

C2C2C2

A2A2A2

6A6A6A

Shades & Tints Shades & Tints

#DAE7A5

Dark

Light

#BFDFB6

Dark

Light

#9FD4C0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dae7a5;
  --color-2: #bfdfb6;
  --color-3: #9fd4c0;
  --color-4: #7db1b6;
  --color-5: #567080;
}

SCSS

$color-1: #dae7a5;
$color-2: #bfdfb6;
$color-3: #9fd4c0;
$color-4: #7db1b6;
$color-5: #567080;

TAILWIND

colors: {
  'brand-1': '#dae7a5',
  'brand-2': '#bfdfb6',
  'brand-3': '#9fd4c0',
  'brand-4': '#7db1b6',
  'brand-5': '#567080',
}

RGB Array

[218, 231, 165], [191, 223, 182], [159, 212, 192], [125, 177, 182], [86, 112, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #DAE7A5, #BFDFB6, #9FD4C0, #7DB1B6, #567080 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: #dae7a5; --color-2: #bfdfb6; --color-3: #9fd4c0; --color-4: #7db1b6; --color-5: #567080. 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 nature-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