#FFAFB2 + #B8D7B7 + #92A08F + #BFC2AF + #EBDEBB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFAFB2

Peach Pink · LightPink · Cherry Blossom

HEX

#FFAFB2

RGB

rgb(255, 175, 178)

HSL

hsl(358, 100%, 84%)

HSB

hsb(358, 31%, 100%)

CMYK

cmyk(0%, 31%, 30%, 0%)

Oklch

oklch(83.1% 0.094 16.8)

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

#B8D7B7

Celadon · Silver · Apple Green

HEX

#B8D7B7

RGB

rgb(184, 215, 183)

HSL

hsl(118, 29%, 78%)

HSB

hsb(118, 15%, 84%)

CMYK

cmyk(14%, 0%, 15%, 16%)

Oklch

oklch(84.8% 0.055 144.2)

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

#92A08F

Celadon · DarkSeaGreen · Silver Sand

HEX

#92A08F

RGB

rgb(146, 160, 143)

HSL

hsl(109, 8%, 59%)

HSB

hsb(109, 11%, 63%)

CMYK

cmyk(9%, 0%, 11%, 37%)

Oklch

oklch(69.0% 0.029 140.2)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#BFC2AF

Fresh Green · Silver · Sunflower

HEX

#BFC2AF

RGB

rgb(191, 194, 175)

HSL

hsl(69, 13%, 72%)

HSB

hsb(69, 10%, 76%)

CMYK

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

Oklch

oklch(80.6% 0.026 114.3)

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

#EBDEBB

Goose Yellow · Wheat · Lemon Cream

HEX

#EBDEBB

RGB

rgb(235, 222, 187)

HSL

hsl(44, 55%, 83%)

HSB

hsb(44, 20%, 92%)

CMYK

cmyk(0%, 6%, 20%, 8%)

Oklch

oklch(90.2% 0.048 90.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFAFB2

ADFFFC

Analogous

FFADD9

FFAFB2

FFD3AD

Triadic

FFAFB2

B0FFAD

ADB0FF

Split-Comp.

FFAFB2

ADFFD3

ADD9FF

Tetradic

FFAFB2

D9FFAD

ADFFFC

D3ADFF

Contrast Matrix WCAG 2.1 Contrast

FFAFB2	B8D7B7	92A08F	BFC2AF	EBDEBB
—	1.1 Fail	1.6 Fail	1.0 Fail	1.3 Fail
1.1 Fail	—	1.8 Fail	1.2 Fail	1.2 Fail
1.6 Fail	1.8 Fail	—	1.5 Fail	2.1 Fail
1.0 Fail	1.2 Fail	1.5 Fail	—	1.4 Fail
1.3 Fail	1.2 Fail	2.1 Fail	1.4 Fail	—

White BG

1.7Fail

1.6Fail

2.7Fail

1.8Fail

1.3Fail

Black BG

12.0AAA

13.4AAA

7.6AAA

11.6AAA

15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCB1

C5C6BF

989893

C0C0B4

E5E5C3

Deuteranopia

E1E7B1

C4C1C1

979694

C0C0B5

E6E7C6

Tritanopia

FBB1B1

BAC5C6

939697

BFB7B8

EACACC

Achromatopsia

C7C7C7

CACACA

9A9A9A

BFBFBF

DEDEDE

Shades & Tints Shades & Tints

#FFAFB2

Dark

Light

#B8D7B7

Dark

Light

#92A08F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffafb2;
  --color-2: #b8d7b7;
  --color-3: #92a08f;
  --color-4: #bfc2af;
  --color-5: #ebdebb;
}

SCSS

$color-1: #ffafb2;
$color-2: #b8d7b7;
$color-3: #92a08f;
$color-4: #bfc2af;
$color-5: #ebdebb;

TAILWIND

colors: {
  'brand-1': '#ffafb2',
  'brand-2': '#b8d7b7',
  'brand-3': '#92a08f',
  'brand-4': '#bfc2af',
  'brand-5': '#ebdebb',
}

RGB Array

[255, 175, 178], [184, 215, 183], [146, 160, 143], [191, 194, 175], [235, 222, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFAFB2, #B8D7B7, #92A08F, #BFC2AF, #EBDEBB 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: #ffafb2; --color-2: #b8d7b7; --color-3: #92a08f; --color-4: #bfc2af; --color-5: #ebdebb. 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