#F7FADF + #CFFAE0 + #CFD7D2 + #CFB4C4 + #CF8FB5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7FADF

Fresh Green · Beige · Lemon Cream

HEX

#F7FADF

RGB

rgb(247, 250, 223)

HSL

hsl(67, 73%, 93%)

HSB

hsb(67, 11%, 98%)

CMYK

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

Oklch

oklch(97.6% 0.035 112.2)

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

#CFFAE0

Emerald · Beige · Mint Green

HEX

#CFFAE0

RGB

rgb(207, 250, 224)

HSL

hsl(144, 81%, 90%)

HSB

hsb(144, 17%, 98%)

CMYK

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

Oklch

oklch(94.8% 0.056 158.6)

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

#CFD7D2

Celadon · LightGray · Pearl Gray

HEX

#CFD7D2

RGB

rgb(207, 215, 210)

HSL

hsl(142, 9%, 83%)

HSB

hsb(142, 4%, 84%)

CMYK

cmyk(4%, 0%, 2%, 16%)

Oklch

oklch(87.2% 0.011 158.8)

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

#CFB4C4

Mauve · Silver · Cherry Blossom

HEX

#CFB4C4

RGB

rgb(207, 180, 196)

HSL

hsl(324, 22%, 76%)

HSB

hsb(324, 13%, 81%)

CMYK

cmyk(0%, 13%, 5%, 19%)

Oklch

oklch(79.8% 0.038 341.6)

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

#CF8FB5

Mauve · Orchid · Rose Pink

HEX

#CF8FB5

RGB

rgb(207, 143, 181)

HSL

hsl(324, 40%, 69%)

HSB

hsb(324, 31%, 81%)

CMYK

cmyk(0%, 31%, 13%, 19%)

Oklch

oklch(72.5% 0.092 343.2)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7FADF

E3E0FA

Analogous

FAF0E0

F7FADF

EAFAE0

Triadic

F7FADF

E0F7FA

FAE0F7

Split-Comp.

F7FADF

E0EAFA

F0E0FA

Tetradic

F7FADF

E0FAF0

E3E0FA

FAE0EA

Contrast Matrix WCAG 2.1 Contrast

F7FADF	CFFAE0	CFD7D2	CFB4C4	CF8FB5
—	1.1 Fail	1.4 Fail	1.8 Fail	2.4 Fail
1.1 Fail	—	1.3 Fail	1.7 Fail	2.2 Fail
1.4 Fail	1.3 Fail	—	1.3 Fail	1.7 Fail
1.8 Fail	1.7 Fail	1.3 Fail	—	1.3 Fail
2.4 Fail	2.2 Fail	1.7 Fail	1.3 Fail	—

White BG

1.1Fail

1.5Fail

1.9Fail

2.5Fail

Black BG

19.7AAA

18.4AAA

14.3AAA

11.0AAA

8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8E6

E2E2E6

D2D3D3

C3C3C0

B3B3AC

Deuteranopia

F8F8E7

DFDCE8

D2D1D4

C5C7BF

B7BCAA

Tritanopia

F7EBEC

D1EBEC

CFD4D4

CEBDBC

CCA5A3

Achromatopsia

F6F6F6

EAEAEA

D4D4D4

BEBEBE

A6A6A6

Shades & Tints Shades & Tints

#F7FADF

Dark

Light

#CFFAE0

Dark

Light

#CFD7D2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7fadf;
  --color-2: #cffae0;
  --color-3: #cfd7d2;
  --color-4: #cfb4c4;
  --color-5: #cf8fb5;
}

SCSS

$color-1: #f7fadf;
$color-2: #cffae0;
$color-3: #cfd7d2;
$color-4: #cfb4c4;
$color-5: #cf8fb5;

TAILWIND

colors: {
  'brand-1': '#f7fadf',
  'brand-2': '#cffae0',
  'brand-3': '#cfd7d2',
  'brand-4': '#cfb4c4',
  'brand-5': '#cf8fb5',
}

RGB Array

[247, 250, 223], [207, 250, 224], [207, 215, 210], [207, 180, 196], [207, 143, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7FADF, #CFFAE0, #CFD7D2, #CFB4C4, #CF8FB5 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: #f7fadf; --color-2: #cffae0; --color-3: #cfd7d2; --color-4: #cfb4c4; --color-5: #cf8fb5. 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 general-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