#E8C4E1 + #F5CCBE + #FBC69B + #CDA4A3 + #6B7390 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#E8C4E1

Mauve · LightGray · Lavender

HEX

#E8C4E1

RGB

rgb(232, 196, 225)

HSL

hsl(312, 44%, 84%)

HSB

hsb(312, 16%, 91%)

CMYK

cmyk(0%, 16%, 3%, 9%)

Oklch

oklch(86.0% 0.056 332.7)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#F5CCBE

Apricot · Pink · Peach Orange

HEX

#F5CCBE

RGB

rgb(245, 204, 190)

HSL

hsl(15, 73%, 85%)

HSB

hsb(15, 22%, 96%)

CMYK

cmyk(0%, 17%, 22%, 4%)

Oklch

oklch(87.7% 0.050 39.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FBC69B

Apricot · Wheat · Peach Orange

HEX

#FBC69B

RGB

rgb(251, 198, 155)

HSL

hsl(27, 92%, 80%)

HSB

hsb(27, 38%, 98%)

CMYK

cmyk(0%, 21%, 38%, 2%)

Oklch

oklch(86.3% 0.083 60.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CDA4A3

Peach Pink · Tan · Coral Red

HEX

#CDA4A3

RGB

rgb(205, 164, 163)

HSL

hsl(1, 30%, 72%)

HSB

hsb(1, 20%, 80%)

CMYK

cmyk(0%, 20%, 20%, 20%)

Oklch

oklch(75.6% 0.049 19.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#6B7390

Indigo · SlateGray · Navy Blue

HEX

#6B7390

RGB

rgb(107, 115, 144)

HSL

hsl(227, 15%, 49%)

HSB

hsb(227, 26%, 56%)

CMYK

cmyk(26%, 20%, 0%, 44%)

Oklch

oklch(56.0% 0.046 272.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8C4E1

C4E8CB

Analogous

DDC4E8

E8C4E1

E8C4CF

Triadic

E8C4E1

E1E8C4

C4E1E8

Split-Comp.

E8C4E1

CFE8C4

C4E8DD

Tetradic

E8C4E1

E8DDC4

C4E8CB

C4CFE8

Contrast Matrix WCAG 2.1 Contrast

E8C4E1	F5CCBE	FBC69B	CDA4A3	6B7390
—	1.1 Fail	1.0 Fail	1.4 Fail	3.0 Fail
1.1 Fail	—	1.0 Fail	1.5 Fail	3.2 AA Large
1.0 Fail	1.0 Fail	—	1.4 Fail	3.0 AA Large
1.4 Fail	1.5 Fail	1.4 Fail	—	2.1 Fail
3.0 Fail	3.2 AA Large	3.0 AA Large	2.1 Fail	—

White BG

1.6Fail

1.5Fail

2.2Fail

4.7AA

Black BG

13.4AAA

14.3AAA

13.7AAA

9.4AAA

4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D8DA

E3E3C1

E4E4A5

BBBBA3

6E6F89

Deuteranopia

DBDDD8

E6E9C2

E7EBA8

BEC1A3

6E6D87

Tritanopia

E6D4D3

F3C4C5

F8AEAF

CBA3A3

6B8382

Achromatopsia

D2D2D2

D7D7D7

D1D1D1

B0B0B0

747474

Shades & Tints Shades & Tints

#E8C4E1

Dark

Light

#F5CCBE

Dark

Light

#FBC69B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8c4e1;
  --color-2: #f5ccbe;
  --color-3: #fbc69b;
  --color-4: #cda4a3;
  --color-5: #6b7390;
}

SCSS

$color-1: #e8c4e1;
$color-2: #f5ccbe;
$color-3: #fbc69b;
$color-4: #cda4a3;
$color-5: #6b7390;

TAILWIND

colors: {
  'brand-1': '#e8c4e1',
  'brand-2': '#f5ccbe',
  'brand-3': '#fbc69b',
  'brand-4': '#cda4a3',
  'brand-5': '#6b7390',
}

RGB Array

[232, 196, 225], [245, 204, 190], [251, 198, 155], [205, 164, 163], [107, 115, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #E8C4E1, #F5CCBE, #FBC69B, #CDA4A3, #6B7390 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: #e8c4e1; --color-2: #f5ccbe; --color-3: #fbc69b; --color-4: #cda4a3; --color-5: #6b7390. 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