#F5CFB8 + #AFCCB8 + #FAF4F0 + #B5A3B4 + #FFE7B0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F5CFB8

Apricot · Wheat · Peach Orange

HEX

#F5CFB8

RGB

rgb(245, 207, 184)

HSL

hsl(23, 75%, 84%)

HSB

hsb(23, 25%, 96%)

CMYK

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

Oklch

oklch(88.1% 0.053 53.0)

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

#AFCCB8

Celadon · Silver · Apple Green

HEX

#AFCCB8

RGB

rgb(175, 204, 184)

HSL

hsl(139, 22%, 74%)

HSB

hsb(139, 14%, 80%)

CMYK

cmyk(14%, 0%, 10%, 20%)

Oklch

oklch(81.8% 0.042 155.3)

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

#FAF4F0

Apricot · SeaShell · Peach Orange

HEX

#FAF4F0

RGB

rgb(250, 244, 240)

HSL

hsl(24, 50%, 96%)

HSB

hsb(24, 4%, 98%)

CMYK

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

Oklch

oklch(97.1% 0.008 56.3)

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

#B5A3B4

Mauve · DarkGray · Lilac Purple

HEX

#B5A3B4

RGB

rgb(181, 163, 180)

HSL

hsl(303, 11%, 67%)

HSB

hsb(303, 10%, 71%)

CMYK

cmyk(0%, 10%, 1%, 29%)

Oklch

oklch(73.6% 0.032 327.6)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#FFE7B0

Goose Yellow · Wheat · Lemon Cream

HEX

#FFE7B0

RGB

rgb(255, 231, 176)

HSL

hsl(42, 100%, 85%)

HSB

hsb(42, 31%, 100%)

CMYK

cmyk(0%, 9%, 31%, 0%)

Oklch

oklch(93.4% 0.075 87.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5CFB8

B8DDF5

Analogous

F5B8BF

F5CFB8

F5EEB8

Triadic

F5CFB8

B8F5CF

CFB8F5

Split-Comp.

F5CFB8

B8F5EE

B8BFF5

Tetradic

F5CFB8

BFF5B8

B8DDF5

EEB8F5

Contrast Matrix WCAG 2.1 Contrast

F5CFB8	AFCCB8	FAF4F0	B5A3B4	FFE7B0
—	1.2 Fail	1.3 Fail	1.6 Fail	1.2 Fail
1.2 Fail	—	1.6 Fail	1.4 Fail	1.4 Fail
1.3 Fail	1.6 Fail	—	2.2 Fail	1.1 Fail
1.6 Fail	1.4 Fail	2.2 Fail	—	2.0 Fail
1.2 Fail	1.4 Fail	1.1 Fail	2.0 Fail	—

White BG

1.4Fail

1.7Fail

1.1Fail

2.4Fail

1.2Fail

Black BG

14.5AAA

12.2AAA

19.3AAA

8.9AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E4BE

BCBCBD

F7F7F1

ADADB0

F5F4BD

Deuteranopia

E7EABF

BAB8BE

F8F8F1

AEB0AF

F6F8C1

Tritanopia

F3C2C3

B0C1C2

FAF2F2

B4ADAC

FEC8CA

Achromatopsia

D8D8D8

C1C1C1

F5F5F5

AAAAAA

E8E8E8

Shades & Tints Shades & Tints

#F5CFB8

Dark

Light

#AFCCB8

Dark

Light

#FAF4F0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5cfb8;
  --color-2: #afccb8;
  --color-3: #faf4f0;
  --color-4: #b5a3b4;
  --color-5: #ffe7b0;
}

SCSS

$color-1: #f5cfb8;
$color-2: #afccb8;
$color-3: #faf4f0;
$color-4: #b5a3b4;
$color-5: #ffe7b0;

TAILWIND

colors: {
  'brand-1': '#f5cfb8',
  'brand-2': '#afccb8',
  'brand-3': '#faf4f0',
  'brand-4': '#b5a3b4',
  'brand-5': '#ffe7b0',
}

RGB Array

[245, 207, 184], [175, 204, 184], [250, 244, 240], [181, 163, 180], [255, 231, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5CFB8, #AFCCB8, #FAF4F0, #B5A3B4, #FFE7B0 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: #f5cfb8; --color-2: #afccb8; --color-3: #faf4f0; --color-4: #b5a3b4; --color-5: #ffe7b0. 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