#D1D483 + #DED197 + #EFC1AC + #FFB0C0 + #B5997B · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#D1D483

Fresh Green · BurlyWood · Sunflower

HEX

#D1D483

RGB

rgb(209, 212, 131)

HSL

hsl(62, 49%, 67%)

HSB

hsb(62, 38%, 83%)

CMYK

cmyk(1%, 0%, 38%, 17%)

Oklch

oklch(84.9% 0.103 110.2)

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

#DED197

Goose Yellow · BurlyWood · Sunflower

HEX

#DED197

RGB

rgb(222, 209, 151)

HSL

hsl(49, 52%, 73%)

HSB

hsb(49, 32%, 87%)

CMYK

cmyk(0%, 6%, 32%, 13%)

Oklch

oklch(85.8% 0.077 97.0)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#EFC1AC

Apricot · LightPink · Peach Orange

HEX

#EFC1AC

RGB

rgb(239, 193, 172)

HSL

hsl(19, 68%, 81%)

HSB

hsb(19, 28%, 94%)

CMYK

cmyk(0%, 19%, 28%, 6%)

Oklch

oklch(84.6% 0.060 45.8)

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

#FFB0C0

Peach Pink · LightPink · Cherry Blossom

HEX

#FFB0C0

RGB

rgb(255, 176, 192)

HSL

hsl(348, 100%, 85%)

HSB

hsb(348, 31%, 100%)

CMYK

cmyk(0%, 31%, 25%, 0%)

Oklch

oklch(83.7% 0.094 6.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#B5997B

Ginger · Tan · Warm Sun

HEX

#B5997B

RGB

rgb(181, 153, 123)

HSL

hsl(31, 28%, 60%)

HSB

hsb(31, 32%, 71%)

CMYK

cmyk(0%, 15%, 32%, 29%)

Oklch

oklch(70.0% 0.053 68.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1D483

8482D4

Analogous

D4AE82

D1D483

A8D482

Triadic

D1D483

82D1D4

D482D1

Split-Comp.

D1D483

82A8D4

AE82D4

Tetradic

D1D483

82D4AE

8482D4

D482A8

Contrast Matrix WCAG 2.1 Contrast

D1D483	DED197	EFC1AC	FFB0C0	B5997B
—	1.0 Fail	1.0 Fail	1.1 Fail	1.7 Fail
1.0 Fail	—	1.1 Fail	1.1 Fail	1.8 Fail
1.0 Fail	1.1 Fail	—	1.1 Fail	1.7 Fail
1.1 Fail	1.1 Fail	1.1 Fail	—	1.6 Fail
1.7 Fail	1.8 Fail	1.7 Fail	1.6 Fail	—

White BG

1.6Fail

1.5Fail

1.6Fail

1.7Fail

2.7Fail

Black BG

13.5AAA

13.7AAA

12.9AAA

12.2AAA

7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D297

D8D8A5

DBDBB1

DDDCBC

A9A982

Deuteranopia

D2D29B

D9DAA8

DEE1B2

E1E7BB

ABAD84

Tritanopia

D1A6A9

DDB0B3

EDB5B6

FBB9B8

B48889

Achromatopsia

CACACA

CECECE

CCCCCC

C9C9C9

9E9E9E

Shades & Tints Shades & Tints

#D1D483

Dark

Light

#DED197

Dark

Light

#EFC1AC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1d483;
  --color-2: #ded197;
  --color-3: #efc1ac;
  --color-4: #ffb0c0;
  --color-5: #b5997b;
}

SCSS

$color-1: #d1d483;
$color-2: #ded197;
$color-3: #efc1ac;
$color-4: #ffb0c0;
$color-5: #b5997b;

TAILWIND

colors: {
  'brand-1': '#d1d483',
  'brand-2': '#ded197',
  'brand-3': '#efc1ac',
  'brand-4': '#ffb0c0',
  'brand-5': '#b5997b',
}

RGB Array

[209, 212, 131], [222, 209, 151], [239, 193, 172], [255, 176, 192], [181, 153, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #D1D483, #DED197, #EFC1AC, #FFB0C0, #B5997B 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: #d1d483; --color-2: #ded197; --color-3: #efc1ac; --color-4: #ffb0c0; --color-5: #b5997b. 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