#8D6B7B + #977681 + #C4AF9A + #E5ECB6 + #F9FDCA · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#8D6B7B

Dark Violet · Gray · Camellia

HEX

#8D6B7B

RGB

rgb(141, 107, 123)

HSL

hsl(332, 14%, 49%)

HSB

hsb(332, 24%, 55%)

CMYK

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

Oklch

oklch(56.7% 0.049 348.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#977681

Dark Violet · Gray · Rose Pink

HEX

#977681

RGB

rgb(151, 118, 129)

HSL

hsl(340, 14%, 53%)

HSB

hsb(340, 22%, 59%)

CMYK

cmyk(0%, 22%, 15%, 41%)

Oklch

oklch(60.1% 0.044 356.6)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#C4AF9A

Ginger · Tan · Warm Sun

HEX

#C4AF9A

RGB

rgb(196, 175, 154)

HSL

hsl(30, 26%, 69%)

HSB

hsb(30, 21%, 77%)

CMYK

cmyk(0%, 11%, 21%, 23%)

Oklch

oklch(76.6% 0.038 67.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#E5ECB6

Fresh Green · Wheat · Lemon Cream

HEX

#E5ECB6

RGB

rgb(229, 236, 182)

HSL

hsl(68, 59%, 82%)

HSB

hsb(68, 23%, 93%)

CMYK

cmyk(3%, 0%, 23%, 7%)

Oklch

oklch(92.4% 0.071 113.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F9FDCA

Fresh Green · Beige · Lemon Cream

HEX

#F9FDCA

RGB

rgb(249, 253, 202)

HSL

hsl(65, 93%, 89%)

HSB

hsb(65, 20%, 99%)

CMYK

cmyk(2%, 0%, 20%, 1%)

Oklch

oklch(97.8% 0.066 111.3)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8D6B7B

6B8E7E

Analogous

8E6B8D

8D6B7B

8E6D6B

Triadic

8D6B7B

7C8E6B

6B7C8E

Split-Comp.

8D6B7B

6B8E6D

6B8D8E

Tetradic

8D6B7B

8D8E6B

6B8E7E

6D6B8E

Contrast Matrix WCAG 2.1 Contrast

8D6B7B	977681	C4AF9A	E5ECB6	F9FDCA
—	1.2 Fail	2.2 Fail	3.8 AA Large	4.4 AA Large
1.2 Fail	—	1.9 Fail	3.3 AA Large	3.8 AA Large
2.2 Fail	1.9 Fail	—	1.7 Fail	2.0 Fail
3.8 AA Large	3.3 AA Large	1.7 Fail	—	1.2 Fail
4.4 AA Large	3.8 AA Large	2.0 Fail	1.2 Fail	—

White BG

4.6AA

4.0AA Large

2.1Fail

1.2Fail

1.1Fail

Black BG

4.5AA

5.2AA

9.9AAA

17.0AAA

19.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7E77

89887E

BBBB9F

E8E8C3

FBFBD6

Deuteranopia

808376

8B8D7E

BCBEA0

E8E7C6

FBFAD9

Tritanopia

8B7473

957C7C

C3A3A4

E5CDD0

F9E0E2

Achromatopsia

777777

818181

B3B3B3

E4E4E4

F6F6F6

Shades & Tints Shades & Tints

#8D6B7B

Dark

Light

#977681

Dark

Light

#C4AF9A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8d6b7b;
  --color-2: #977681;
  --color-3: #c4af9a;
  --color-4: #e5ecb6;
  --color-5: #f9fdca;
}

SCSS

$color-1: #8d6b7b;
$color-2: #977681;
$color-3: #c4af9a;
$color-4: #e5ecb6;
$color-5: #f9fdca;

TAILWIND

colors: {
  'brand-1': '#8d6b7b',
  'brand-2': '#977681',
  'brand-3': '#c4af9a',
  'brand-4': '#e5ecb6',
  'brand-5': '#f9fdca',
}

RGB Array

[141, 107, 123], [151, 118, 129], [196, 175, 154], [229, 236, 182], [249, 253, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #8D6B7B, #977681, #C4AF9A, #E5ECB6, #F9FDCA 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: #8d6b7b; --color-2: #977681; --color-3: #c4af9a; --color-4: #e5ecb6; --color-5: #f9fdca. 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