#BBAFAF + #6C98A5 + #CDB0A8 + #F6AF91 + #FDB38E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BBAFAF

Peach Pink · DarkGray · Pearl Gray

HEX

#BBAFAF

RGB

rgb(187, 175, 175)

HSL

hsl(0, 8%, 71%)

HSB

hsb(0, 6%, 73%)

CMYK

cmyk(0%, 6%, 6%, 27%)

Oklch

oklch(76.4% 0.014 17.5)

Traditional「Peach Pink」· Paint「Pearl Gray」· Creative Silver Lining

#6C98A5

Slate Blue · CadetBlue · Lake Green

HEX

#6C98A5

RGB

rgb(108, 152, 165)

HSL

hsl(194, 24%, 54%)

HSB

hsb(194, 35%, 65%)

CMYK

cmyk(35%, 8%, 0%, 35%)

Oklch

oklch(65.2% 0.051 218.1)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#CDB0A8

Peach Pink · Tan · Coral Red

HEX

#CDB0A8

RGB

rgb(205, 176, 168)

HSL

hsl(13, 27%, 73%)

HSB

hsb(13, 18%, 80%)

CMYK

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

Oklch

oklch(78.0% 0.036 35.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F6AF91

Apricot · BurlyWood · Peach Orange

HEX

#F6AF91

RGB

rgb(246, 175, 145)

HSL

hsl(18, 85%, 77%)

HSB

hsb(18, 41%, 96%)

CMYK

cmyk(0%, 29%, 41%, 4%)

Oklch

oklch(81.4% 0.093 43.8)

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

#FDB38E

Apricot · LightSalmon · Peach Orange

HEX

#FDB38E

RGB

rgb(253, 179, 142)

HSL

hsl(20, 97%, 77%)

HSB

hsb(20, 44%, 99%)

CMYK

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

Oklch

oklch(82.8% 0.100 47.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBAFAF

AFBBBB

Analogous

BBAFB5

BBAFAF

BBB5AF

Triadic

BBAFAF

AFBBAF

AFAFBB

Split-Comp.

BBAFAF

AFBBB5

AFB5BB

Tetradic

BBAFAF

B5BBAF

AFBBBB

B5AFBB

Contrast Matrix WCAG 2.1 Contrast

BBAFAF	6C98A5	CDB0A8	F6AF91	FDB38E
—	1.5 Fail	1.1 Fail	1.2 Fail	1.2 Fail
1.5 Fail	—	1.6 Fail	1.7 Fail	1.8 Fail
1.1 Fail	1.6 Fail	—	1.1 Fail	1.2 Fail
1.2 Fail	1.7 Fail	1.1 Fail	—	1.0 Fail
1.2 Fail	1.8 Fail	1.2 Fail	1.0 Fail	—

White BG

2.1Fail

3.1AA Large

2.0Fail

1.8Fail

1.7Fail

Black BG

9.9AAA

6.7AA

10.4AAA

11.5AAA

12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B6AF

7F7FA2

C0C0AA

D7D798

DDDC97

Deuteranopia

B7B7AF

7D79A1

C2C4AA

DBE19A

E1E799

Tritanopia

BAAFAF

6E9F9F

CCABAC

F29E9F

F99EA0

Achromatopsia

B3B3B3

8C8C8C

B8B8B8

C1C1C1

C5C5C5

Shades & Tints Shades & Tints

#BBAFAF

Dark

Light

#6C98A5

Dark

Light

#CDB0A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbafaf;
  --color-2: #6c98a5;
  --color-3: #cdb0a8;
  --color-4: #f6af91;
  --color-5: #fdb38e;
}

SCSS

$color-1: #bbafaf;
$color-2: #6c98a5;
$color-3: #cdb0a8;
$color-4: #f6af91;
$color-5: #fdb38e;

TAILWIND

colors: {
  'brand-1': '#bbafaf',
  'brand-2': '#6c98a5',
  'brand-3': '#cdb0a8',
  'brand-4': '#f6af91',
  'brand-5': '#fdb38e',
}

RGB Array

[187, 175, 175], [108, 152, 165], [205, 176, 168], [246, 175, 145], [253, 179, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBAFAF, #6C98A5, #CDB0A8, #F6AF91, #FDB38E 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: #bbafaf; --color-2: #6c98a5; --color-3: #cdb0a8; --color-4: #f6af91; --color-5: #fdb38e. 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