#FBD2AB + #E4BCA3 + #577A98 + #9AA9A2 + #A2BAAB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FBD2AB

Apricot · Wheat · Peach Orange

HEX

#FBD2AB

RGB

rgb(251, 210, 171)

HSL

hsl(29, 91%, 83%)

HSB

hsb(29, 32%, 98%)

CMYK

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

Oklch

oklch(88.9% 0.069 65.3)

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

#E4BCA3

Apricot · BurlyWood · Peach Orange

HEX

#E4BCA3

RGB

rgb(228, 188, 163)

HSL

hsl(23, 55%, 77%)

HSB

hsb(23, 29%, 89%)

CMYK

cmyk(0%, 18%, 29%, 11%)

Oklch

oklch(82.4% 0.057 53.7)

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

#577A98

Slate Blue · SlateGray · Navy Blue

HEX

#577A98

RGB

rgb(87, 122, 152)

HSL

hsl(208, 27%, 47%)

HSB

hsb(208, 43%, 60%)

CMYK

cmyk(43%, 20%, 0%, 40%)

Oklch

oklch(56.5% 0.061 245.1)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#9AA9A2

Jade · DarkGray · Silver Sand

HEX

#9AA9A2

RGB

rgb(154, 169, 162)

HSL

hsl(152, 8%, 63%)

HSB

hsb(152, 9%, 66%)

CMYK

cmyk(9%, 0%, 4%, 34%)

Oklch

oklch(72.1% 0.020 166.1)

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

#A2BAAB

Celadon · DarkGray · Apple Green

HEX

#A2BAAB

RGB

rgb(162, 186, 171)

HSL

hsl(143, 15%, 68%)

HSB

hsb(143, 13%, 73%)

CMYK

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

Oklch

oklch(76.6% 0.034 158.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBD2AB

ACD5FB

Analogous

FBACAE

FBD2AB

FBFAAC

Triadic

FBD2AB

ACFBD2

D2ACFB

Split-Comp.

FBD2AB

ACFBFA

ACAEFB

Tetradic

FBD2AB

AEFBAC

ACD5FB

FAACFB

Contrast Matrix WCAG 2.1 Contrast

FBD2AB	E4BCA3	577A98	9AA9A2	A2BAAB
—	1.2 Fail	3.2 AA Large	1.7 Fail	1.5 Fail
1.2 Fail	—	2.6 Fail	1.4 Fail	1.2 Fail
3.2 AA Large	2.6 Fail	—	1.8 Fail	2.2 Fail
1.7 Fail	1.4 Fail	1.8 Fail	—	1.2 Fail
1.5 Fail	1.2 Fail	2.2 Fail	1.2 Fail	—

White BG

1.4Fail

1.7Fail

4.5AA

2.5Fail

2.1Fail

Black BG

14.9AAA

12.0AAA

4.6AA

8.6AAA

10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E9B4

D3D2A9

666691

A0A1A4

ACADAF

Deuteranopia

ECEFB7

D5D8AB

64628F

A09FA4

ABA9B0

Tritanopia

F9BCBE

E2AEAF

598B8A

9BA5A5

A3B1B2

Achromatopsia

DADADA

C5C5C5

737373

A4A4A4

B1B1B1

Shades & Tints Shades & Tints

#FBD2AB

Dark

Light

#E4BCA3

Dark

Light

#577A98

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbd2ab;
  --color-2: #e4bca3;
  --color-3: #577a98;
  --color-4: #9aa9a2;
  --color-5: #a2baab;
}

SCSS

$color-1: #fbd2ab;
$color-2: #e4bca3;
$color-3: #577a98;
$color-4: #9aa9a2;
$color-5: #a2baab;

TAILWIND

colors: {
  'brand-1': '#fbd2ab',
  'brand-2': '#e4bca3',
  'brand-3': '#577a98',
  'brand-4': '#9aa9a2',
  'brand-5': '#a2baab',
}

RGB Array

[251, 210, 171], [228, 188, 163], [87, 122, 152], [154, 169, 162], [162, 186, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBD2AB, #E4BCA3, #577A98, #9AA9A2, #A2BAAB 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: #fbd2ab; --color-2: #e4bca3; --color-3: #577a98; --color-4: #9aa9a2; --color-5: #a2baab. 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