#C3FBD7 + #D8DEC6 + #C3B7BD + #FDBAC5 + #F8D9CC · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#C3FBD7

Emerald · LightGray · Mint Green

HEX

#C3FBD7

RGB

rgb(195, 251, 215)

HSL

hsl(141, 88%, 87%)

HSB

hsb(141, 22%, 98%)

CMYK

cmyk(22%, 0%, 14%, 2%)

Oklch

oklch(94.0% 0.075 156.5)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#D8DEC6

Willow Green · LightGray · Mint Green

HEX

#D8DEC6

RGB

rgb(216, 222, 198)

HSL

hsl(75, 27%, 82%)

HSB

hsb(75, 11%, 87%)

CMYK

cmyk(3%, 0%, 11%, 13%)

Oklch

oklch(89.0% 0.033 118.5)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#C3B7BD

Rouge · Silver · Pearl Gray

HEX

#C3B7BD

RGB

rgb(195, 183, 189)

HSL

hsl(330, 9%, 74%)

HSB

hsb(330, 6%, 76%)

CMYK

cmyk(0%, 6%, 3%, 24%)

Oklch

oklch(79.1% 0.016 345.7)

Traditional「Rouge」· Paint「Pearl Gray」· Creative Silver Lining

#FDBAC5

Peach Pink · LightPink · Cherry Blossom

HEX

#FDBAC5

RGB

rgb(253, 186, 197)

HSL

hsl(350, 94%, 86%)

HSB

hsb(350, 26%, 99%)

CMYK

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

Oklch

oklch(85.3% 0.079 8.0)

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

#F8D9CC

Apricot · Bisque · Peach Orange

HEX

#F8D9CC

RGB

rgb(248, 217, 204)

HSL

hsl(18, 76%, 89%)

HSB

hsb(18, 18%, 97%)

CMYK

cmyk(0%, 13%, 18%, 3%)

Oklch

oklch(90.8% 0.039 44.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3FBD7

FBC1E7

Analogous

C9FBC1

C3FBD7

C1FBF2

Triadic

C3FBD7

D5C1FB

FBD5C1

Split-Comp.

C3FBD7

F2C1FB

FBC1C9

Tetradic

C3FBD7

C1C9FB

FBC1E7

FBF2C1

Contrast Matrix WCAG 2.1 Contrast

C3FBD7	D8DEC6	C3B7BD	FDBAC5	F8D9CC
—	1.2 Fail	1.7 Fail	1.4 Fail	1.1 Fail
1.2 Fail	—	1.4 Fail	1.2 Fail	1.0 Fail
1.7 Fail	1.4 Fail	—	1.2 Fail	1.5 Fail
1.4 Fail	1.2 Fail	1.2 Fail	—	1.2 Fail
1.1 Fail	1.0 Fail	1.5 Fail	1.2 Fail	—

White BG

1.2Fail

1.4Fail

1.9Fail

1.6Fail

1.3Fail

Black BG

18.1AAA

15.2AAA

10.8AAA

13.0AAA

15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDCE0

DBDBCC

BEBEBC

E0DFC2

EBEACF

Deuteranopia

D8D4E2

DADACD

BFBFBB

E4E9C2

ECEFD0

Tritanopia

C6E7E8

D8D0D1

C2BABA

FAC0C0

F6D2D2

Achromatopsia

E6E6E6

D9D9D9

BBBBBB

CFCFCF

E1E1E1

Shades & Tints Shades & Tints

#C3FBD7

Dark

Light

#D8DEC6

Dark

Light

#C3B7BD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3fbd7;
  --color-2: #d8dec6;
  --color-3: #c3b7bd;
  --color-4: #fdbac5;
  --color-5: #f8d9cc;
}

SCSS

$color-1: #c3fbd7;
$color-2: #d8dec6;
$color-3: #c3b7bd;
$color-4: #fdbac5;
$color-5: #f8d9cc;

TAILWIND

colors: {
  'brand-1': '#c3fbd7',
  'brand-2': '#d8dec6',
  'brand-3': '#c3b7bd',
  'brand-4': '#fdbac5',
  'brand-5': '#f8d9cc',
}

RGB Array

[195, 251, 215], [216, 222, 198], [195, 183, 189], [253, 186, 197], [248, 217, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #C3FBD7, #D8DEC6, #C3B7BD, #FDBAC5, #F8D9CC 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: #c3fbd7; --color-2: #d8dec6; --color-3: #c3b7bd; --color-4: #fdbac5; --color-5: #f8d9cc. 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