#FCFAFD + #FFDFEA + #EBB6C6 + #AF8ED3 + #9769CB · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#FCFAFD

Lilac · Snow · Lavender

HEX

#FCFAFD

RGB

rgb(252, 250, 253)

HSL

hsl(280, 43%, 99%)

HSB

hsb(280, 1%, 99%)

CMYK

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

Oklch

oklch(98.7% 0.004 314.8)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#FFDFEA

Rouge · Linen · Cherry Blossom

HEX

#FFDFEA

RGB

rgb(255, 223, 234)

HSL

hsl(339, 100%, 94%)

HSB

hsb(339, 13%, 100%)

CMYK

cmyk(0%, 13%, 8%, 0%)

Oklch

oklch(93.3% 0.038 355.1)

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

#EBB6C6

Rouge · LightPink · Cherry Blossom

HEX

#EBB6C6

RGB

rgb(235, 182, 198)

HSL

hsl(342, 57%, 82%)

HSB

hsb(342, 23%, 92%)

CMYK

cmyk(0%, 23%, 16%, 8%)

Oklch

oklch(82.9% 0.064 358.7)

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

#AF8ED3

Wisteria · DarkGray · Lilac Purple

HEX

#AF8ED3

RGB

rgb(175, 142, 211)

HSL

hsl(269, 44%, 69%)

HSB

hsb(269, 33%, 83%)

CMYK

cmyk(17%, 33%, 0%, 17%)

Oklch

oklch(70.2% 0.105 305.8)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#9769CB

Deep Indigo · MediumOrchid · Violet

HEX

#9769CB

RGB

rgb(151, 105, 203)

HSL

hsl(268, 49%, 60%)

HSB

hsb(268, 48%, 80%)

CMYK

cmyk(26%, 48%, 0%, 20%)

Oklch

oklch(61.0% 0.149 304.0)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCFAFD

FCFEFB

Analogous

FCFBFE

FCFAFD

FEFBFD

Triadic

FCFAFD

FEFDFB

FBFEFD

Split-Comp.

FCFAFD

FDFEFB

FBFEFC

Tetradic

FCFAFD

FEFCFB

FCFEFB

FBFDFE

Contrast Matrix WCAG 2.1 Contrast

FCFAFD	FFDFEA	EBB6C6	AF8ED3	9769CB
—	1.2 Fail	1.7 Fail	2.7 Fail	3.9 AA Large
1.2 Fail	—	1.4 Fail	2.2 Fail	3.3 AA Large
1.7 Fail	1.4 Fail	—	1.6 Fail	2.3 Fail
2.7 Fail	2.2 Fail	1.6 Fail	—	1.5 Fail
3.9 AA Large	3.3 AA Large	2.3 Fail	1.5 Fail	—

White BG

1.0Fail

1.2Fail

1.7Fail

2.8Fail

4.0AA Large

Black BG

20.2AAA

17.0AAA

12.0AAA

7.6AAA

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBFC

F1F1E7

D4D4C2

A1A0C2

8383B3

Deuteranopia

FBFBFC

F3F5E7

D7DBC1

A3A5BE

8689AE

Tritanopia

FCFCFC

FDE5E5

E8BFBE

ADB5B2

95A19C

Achromatopsia

FBFBFB

EAEAEA

C8C8C8

A0A0A0

828282

Shades & Tints Shades & Tints

#FCFAFD

Dark

Light

#FFDFEA

Dark

Light

#EBB6C6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcfafd;
  --color-2: #ffdfea;
  --color-3: #ebb6c6;
  --color-4: #af8ed3;
  --color-5: #9769cb;
}

SCSS

$color-1: #fcfafd;
$color-2: #ffdfea;
$color-3: #ebb6c6;
$color-4: #af8ed3;
$color-5: #9769cb;

TAILWIND

colors: {
  'brand-1': '#fcfafd',
  'brand-2': '#ffdfea',
  'brand-3': '#ebb6c6',
  'brand-4': '#af8ed3',
  'brand-5': '#9769cb',
}

RGB Array

[252, 250, 253], [255, 223, 234], [235, 182, 198], [175, 142, 211], [151, 105, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #FCFAFD, #FFDFEA, #EBB6C6, #AF8ED3, #9769CB 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: #fcfafd; --color-2: #ffdfea; --color-3: #ebb6c6; --color-4: #af8ed3; --color-5: #9769cb. 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