#FFFFFF + #FAE1DE + #F2B6D8 + #77CCA4 + #DEFFF0 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#FFFFFF

Moonlight White · White · Cloud White

HEX

#FFFFFF

RGB

rgb(255, 255, 255)

HSL

hsl(0, 0%, 100%)

HSB

hsb(0, 0%, 100%)

CMYK

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

Oklch

oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#FAE1DE

Peach Pink · Linen · Cherry Blossom

HEX

#FAE1DE

RGB

rgb(250, 225, 222)

HSL

hsl(6, 74%, 93%)

HSB

hsb(6, 11%, 98%)

CMYK

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

Oklch

oklch(92.9% 0.028 25.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F2B6D8

Mauve · Pink · Cherry Blossom

HEX

#F2B6D8

RGB

rgb(242, 182, 216)

HSL

hsl(326, 70%, 83%)

HSB

hsb(326, 25%, 95%)

CMYK

cmyk(0%, 25%, 11%, 5%)

Oklch

oklch(84.1% 0.082 344.0)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#77CCA4

Jade · MediumAquaMarine · Apple Green

HEX

#77CCA4

RGB

rgb(119, 204, 164)

HSL

hsl(152, 45%, 63%)

HSB

hsb(152, 42%, 80%)

CMYK

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

Oklch

oklch(78.0% 0.102 162.4)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#DEFFF0

Jade · Lavender · Mint Green

HEX

#DEFFF0

RGB

rgb(222, 255, 240)

HSL

hsl(153, 100%, 94%)

HSB

hsb(153, 13%, 100%)

CMYK

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

Oklch

oklch(97.2% 0.039 166.4)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFFFF

Analogous

FFFFFF

Triadic

FFFFFF

Split-Comp.

FFFFFF

Tetradic

FFFFFF

Contrast Matrix WCAG 2.1 Contrast

FFFFFF	FAE1DE	F2B6D8	77CCA4	DEFFF0
—	1.2 Fail	1.7 Fail	1.9 Fail	1.1 Fail
1.2 Fail	—	1.4 Fail	1.5 Fail	1.2 Fail
1.7 Fail	1.4 Fail	—	1.1 Fail	1.6 Fail
1.9 Fail	1.5 Fail	1.1 Fail	—	1.8 Fail
1.1 Fail	1.2 Fail	1.6 Fail	1.8 Fail	—

White BG

1.0Fail

1.2Fail

1.7Fail

1.9Fail

1.1Fail

Black BG

21.0AAA

16.9AAA

12.5AAA

11.0AAA

19.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FFFFFF

EFEFDF

D8D7D0

9C9DAE

ECEDF4

Deuteranopia

FFFFFF

F1F3DF

DCE0CE

9791B0

EAE8F5

Tritanopia

FFFFFF

F9DFDF

EFC9C8

7BB5B7

E0F6F7

Achromatopsia

FFFFFF

E8E8E8

CCCCCC

AEAEAE

F3F3F3

Shades & Tints Shades & Tints

#FFFFFF

Dark

Light

#FAE1DE

Dark

Light

#F2B6D8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffffff;
  --color-2: #fae1de;
  --color-3: #f2b6d8;
  --color-4: #77cca4;
  --color-5: #defff0;
}

SCSS

$color-1: #ffffff;
$color-2: #fae1de;
$color-3: #f2b6d8;
$color-4: #77cca4;
$color-5: #defff0;

TAILWIND

colors: {
  'brand-1': '#ffffff',
  'brand-2': '#fae1de',
  'brand-3': '#f2b6d8',
  'brand-4': '#77cca4',
  'brand-5': '#defff0',
}

RGB Array

[255, 255, 255], [250, 225, 222], [242, 182, 216], [119, 204, 164], [222, 255, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #FFFFFF, #FAE1DE, #F2B6D8, #77CCA4, #DEFFF0 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: #ffffff; --color-2: #fae1de; --color-3: #f2b6d8; --color-4: #77cca4; --color-5: #defff0. 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