#B64E83 + #E1A865 + #C5C857 + #F0ED78 + #DBE0DC · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#B64E83

Rose Purple · MediumVioletRed · Rose Pink

HEX

#B64E83

RGB

rgb(182, 78, 131)

HSL

hsl(329, 42%, 51%)

HSB

hsb(329, 57%, 71%)

CMYK

cmyk(0%, 57%, 28%, 29%)

Oklch

oklch(57.4% 0.147 351.0)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#E1A865

Ginger · SandyBrown · Warm Sun

HEX

#E1A865

RGB

rgb(225, 168, 101)

HSL

hsl(32, 67%, 64%)

HSB

hsb(32, 55%, 88%)

CMYK

cmyk(0%, 25%, 55%, 12%)

Oklch

oklch(77.1% 0.108 69.5)

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

#C5C857

Autumn Sage · BurlyWood · Sunflower

HEX

#C5C857

RGB

rgb(197, 200, 87)

HSL

hsl(62, 51%, 56%)

HSB

hsb(62, 56%, 78%)

CMYK

cmyk(1%, 0%, 56%, 22%)

Oklch

oklch(80.8% 0.136 110.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#F0ED78

Fresh Green · Khaki · Sunflower

HEX

#F0ED78

RGB

rgb(240, 237, 120)

HSL

hsl(59, 80%, 71%)

HSB

hsb(59, 50%, 94%)

CMYK

cmyk(0%, 1%, 50%, 6%)

Oklch

oklch(92.5% 0.140 107.5)

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

#DBE0DC

Plain White · LightGray · Cloud White

HEX

#DBE0DC

RGB

rgb(219, 224, 220)

HSL

hsl(132, 7%, 87%)

HSB

hsb(132, 2%, 88%)

CMYK

cmyk(2%, 0%, 2%, 12%)

Oklch

oklch(90.2% 0.008 151.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B64E83

4EB780

Analogous

B54EB7

B64E83

B74E4F

Triadic

B64E83

84B74E

4E84B7

Split-Comp.

B64E83

4FB74E

4EB7B5

Tetradic

B64E83

B7B54E

4EB780

4E4FB7

Contrast Matrix WCAG 2.1 Contrast

B64E83	E1A865	C5C857	F0ED78	DBE0DC
—	2.3 Fail	2.7 Fail	3.9 AA Large	3.6 AA Large
2.3 Fail	—	1.2 Fail	1.7 Fail	1.6 Fail
2.7 Fail	1.2 Fail	—	1.5 Fail	1.3 Fail
3.9 AA Large	1.7 Fail	1.5 Fail	—	1.1 Fail
3.6 AA Large	1.6 Fail	1.3 Fail	1.1 Fail	—

White BG

4.8AA

2.1Fail

1.8Fail

1.2Fail

1.3Fail

Black BG

4.4AA Large

10.0AAA

11.8AAA

17.1AAA

15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

898876

C8C875

C6C672

EFEF94

DDDDDD

Deuteranopia

8F9773

CCD079

C6C679

EFEF9B

DDDDDD

Tritanopia

B16C6A

DE8285

C5888D

F0ABB0

DBDEDE

Achromatopsia

737373

B1B1B1

BABABA

E1E1E1

DEDEDE

Shades & Tints Shades & Tints

#B64E83

Dark

Light

#E1A865

Dark

Light

#C5C857

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b64e83;
  --color-2: #e1a865;
  --color-3: #c5c857;
  --color-4: #f0ed78;
  --color-5: #dbe0dc;
}

SCSS

$color-1: #b64e83;
$color-2: #e1a865;
$color-3: #c5c857;
$color-4: #f0ed78;
$color-5: #dbe0dc;

TAILWIND

colors: {
  'brand-1': '#b64e83',
  'brand-2': '#e1a865',
  'brand-3': '#c5c857',
  'brand-4': '#f0ed78',
  'brand-5': '#dbe0dc',
}

RGB Array

[182, 78, 131], [225, 168, 101], [197, 200, 87], [240, 237, 120], [219, 224, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #B64E83, #E1A865, #C5C857, #F0ED78, #DBE0DC 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: #b64e83; --color-2: #e1a865; --color-3: #c5c857; --color-4: #f0ed78; --color-5: #dbe0dc. 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