#ABD9BE + #E3DFBC + #FAFBD5 + #FC7181 + #AE8663 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#ABD9BE

Celadon · Silver · Apple Green

HEX

#ABD9BE

RGB

rgb(171, 217, 190)

HSL

hsl(145, 38%, 76%)

HSB

hsb(145, 21%, 85%)

CMYK

cmyk(21%, 0%, 12%, 15%)

Oklch

oklch(84.5% 0.061 159.0)

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

#E3DFBC

Fresh Green · Wheat · Lemon Cream

HEX

#E3DFBC

RGB

rgb(227, 223, 188)

HSL

hsl(54, 41%, 81%)

HSB

hsb(54, 17%, 89%)

CMYK

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

Oklch

oklch(89.8% 0.046 101.9)

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

#FAFBD5

Fresh Green · Beige · Lemon Cream

HEX

#FAFBD5

RGB

rgb(250, 251, 213)

HSL

hsl(62, 83%, 91%)

HSB

hsb(62, 15%, 98%)

CMYK

cmyk(0%, 0%, 15%, 2%)

Oklch

oklch(97.8% 0.049 108.5)

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

#FC7181

Peach Pink · LightCoral · Coral Red

HEX

#FC7181

RGB

rgb(252, 113, 129)

HSL

hsl(353, 96%, 72%)

HSB

hsb(353, 55%, 99%)

CMYK

cmyk(0%, 55%, 49%, 1%)

Oklch

oklch(72.0% 0.170 15.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#AE8663

Tangerine · Gray · Warm Sun

HEX

#AE8663

RGB

rgb(174, 134, 99)

HSL

hsl(28, 32%, 54%)

HSB

hsb(28, 43%, 68%)

CMYK

cmyk(0%, 23%, 43%, 32%)

Oklch

oklch(65.0% 0.069 62.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ABD9BE

D9ABC6

Analogous

AED9AB

ABD9BE

ABD9D5

Triadic

ABD9BE

BEABD9

D9BEAB

Split-Comp.

ABD9BE

D5ABD9

D9ABAE

Tetradic

ABD9BE

ABAED9

D9ABC6

D9D5AB

Contrast Matrix WCAG 2.1 Contrast

ABD9BE	E3DFBC	FAFBD5	FC7181	AE8663
—	1.2 Fail	1.5 Fail	1.7 Fail	2.1 Fail
1.2 Fail	—	1.3 Fail	2.0 Fail	2.4 Fail
1.5 Fail	1.3 Fail	—	2.5 Fail	3.1 AA Large
1.7 Fail	2.0 Fail	2.5 Fail	—	1.2 Fail
2.1 Fail	2.4 Fail	3.1 AA Large	1.2 Fail	—

White BG

1.6Fail

1.4Fail

1.1Fail

2.7Fail

3.3AA Large

Black BG

13.4AAA

15.5AAA

19.8AAA

7.8AAA

6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFC5

E1E1C4

FAFADE

C0BF7D

9D9C6B

Deuteranopia

BCB9C6

E2E2C7

FAFAE0

C8D27C

9FA26E

Tritanopia

ADCACB

E3CBCD

FAE5E7

F57A79

AC7274

Achromatopsia

C8C8C8

DCDCDC

F6F6F6

9C9C9C

8E8E8E

Shades & Tints Shades & Tints

#ABD9BE

Dark

Light

#E3DFBC

Dark

Light

#FAFBD5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #abd9be;
  --color-2: #e3dfbc;
  --color-3: #fafbd5;
  --color-4: #fc7181;
  --color-5: #ae8663;
}

SCSS

$color-1: #abd9be;
$color-2: #e3dfbc;
$color-3: #fafbd5;
$color-4: #fc7181;
$color-5: #ae8663;

TAILWIND

colors: {
  'brand-1': '#abd9be',
  'brand-2': '#e3dfbc',
  'brand-3': '#fafbd5',
  'brand-4': '#fc7181',
  'brand-5': '#ae8663',
}

RGB Array

[171, 217, 190], [227, 223, 188], [250, 251, 213], [252, 113, 129], [174, 134, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #ABD9BE, #E3DFBC, #FAFBD5, #FC7181, #AE8663 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: #abd9be; --color-2: #e3dfbc; --color-3: #fafbd5; --color-4: #fc7181; --color-5: #ae8663. 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