#D7F0C5 + #B8DEC6 + #AEC1CF + #B8A2BD + #6D7DBF · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#D7F0C5

Emerald · LightGray · Mint Green

HEX

#D7F0C5

RGB

rgb(215, 240, 197)

HSL

hsl(95, 59%, 86%)

HSB

hsb(95, 18%, 94%)

CMYK

cmyk(10%, 0%, 18%, 6%)

Oklch

oklch(92.6% 0.063 132.2)

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

#B8DEC6

Celadon · Silver · Apple Green

HEX

#B8DEC6

RGB

rgb(184, 222, 198)

HSL

hsl(142, 37%, 80%)

HSB

hsb(142, 17%, 87%)

CMYK

cmyk(17%, 0%, 11%, 13%)

Oklch

oklch(86.7% 0.052 157.4)

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

#AEC1CF

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#AEC1CF

RGB

rgb(174, 193, 207)

HSL

hsl(205, 26%, 75%)

HSB

hsb(205, 16%, 81%)

CMYK

cmyk(16%, 7%, 0%, 19%)

Oklch

oklch(80.1% 0.029 239.8)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#B8A2BD

Lilac · DarkGray · Lilac Purple

HEX

#B8A2BD

RGB

rgb(184, 162, 189)

HSL

hsl(289, 17%, 69%)

HSB

hsb(289, 14%, 74%)

CMYK

cmyk(3%, 14%, 0%, 26%)

Oklch

oklch(74.0% 0.045 320.0)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#6D7DBF

Azure · SlateBlue · Navy Blue

HEX

#6D7DBF

RGB

rgb(109, 125, 191)

HSL

hsl(228, 39%, 59%)

HSB

hsb(228, 43%, 75%)

CMYK

cmyk(43%, 35%, 0%, 25%)

Oklch

oklch(60.5% 0.102 272.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7F0C5

DFC6F0

Analogous

EDF0C6

D7F0C5

C6F0CA

Triadic

D7F0C5

C6D8F0

F0C6D8

Split-Comp.

D7F0C5

CAC6F0

F0C6ED

Tetradic

D7F0C5

C6EDF0

DFC6F0

F0CAC6

Contrast Matrix WCAG 2.1 Contrast

D7F0C5	B8DEC6	AEC1CF	B8A2BD	6D7DBF
—	1.2 Fail	1.5 Fail	1.9 Fail	3.2 AA Large
1.2 Fail	—	1.3 Fail	1.6 Fail	2.7 Fail
1.5 Fail	1.3 Fail	—	1.3 Fail	2.1 Fail
1.9 Fail	1.6 Fail	1.3 Fail	—	1.7 Fail
3.2 AA Large	2.7 Fail	2.1 Fail	1.7 Fail	—

White BG

1.2Fail

1.5Fail

1.9Fail

2.3Fail

3.9AA Large

Black BG

17.2AAA

14.3AAA

11.3AAA

8.9AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E2CF

C8C9CC

B6B6CC

AEAEB6

7474AF

Deuteranopia

E0DFD2

C6C3CD

B5B4CB

B0B1B5

7372AB

Tritanopia

D8D8D9

BAD0D1

AFC9C8

B7B1B0

6EA2A0

Achromatopsia

E4E4E4

D0D0D0

BDBDBD

ACACAC

808080

Shades & Tints Shades & Tints

#D7F0C5

Dark

Light

#B8DEC6

Dark

Light

#AEC1CF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7f0c5;
  --color-2: #b8dec6;
  --color-3: #aec1cf;
  --color-4: #b8a2bd;
  --color-5: #6d7dbf;
}

SCSS

$color-1: #d7f0c5;
$color-2: #b8dec6;
$color-3: #aec1cf;
$color-4: #b8a2bd;
$color-5: #6d7dbf;

TAILWIND

colors: {
  'brand-1': '#d7f0c5',
  'brand-2': '#b8dec6',
  'brand-3': '#aec1cf',
  'brand-4': '#b8a2bd',
  'brand-5': '#6d7dbf',
}

RGB Array

[215, 240, 197], [184, 222, 198], [174, 193, 207], [184, 162, 189], [109, 125, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #D7F0C5, #B8DEC6, #AEC1CF, #B8A2BD, #6D7DBF 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: #d7f0c5; --color-2: #b8dec6; --color-3: #aec1cf; --color-4: #b8a2bd; --color-5: #6d7dbf. 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