#899AA1 + #BDA2A2 + #FBBE9A + #FAD889 + #FAF5C8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#899AA1

Slate Blue · LightSlateGray · Lake Green

HEX

#899AA1

RGB

rgb(137, 154, 161)

HSL

hsl(198, 11%, 58%)

HSB

hsb(198, 15%, 63%)

CMYK

cmyk(15%, 4%, 0%, 37%)

Oklch

oklch(67.5% 0.022 224.5)

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

#BDA2A2

Peach Pink · DarkGray · Coral Red

HEX

#BDA2A2

RGB

rgb(189, 162, 162)

HSL

hsl(0, 17%, 69%)

HSB

hsb(0, 14%, 74%)

CMYK

cmyk(0%, 14%, 14%, 26%)

Oklch

oklch(73.6% 0.032 17.9)

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

#FBBE9A

Apricot · BurlyWood · Peach Orange

HEX

#FBBE9A

RGB

rgb(251, 190, 154)

HSL

hsl(22, 92%, 79%)

HSB

hsb(22, 39%, 98%)

CMYK

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

Oklch

oklch(84.8% 0.085 51.8)

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

#FAD889

Goose Yellow · Khaki · Lemon Cream

HEX

#FAD889

RGB

rgb(250, 216, 137)

HSL

hsl(42, 92%, 76%)

HSB

hsb(42, 45%, 98%)

CMYK

cmyk(0%, 14%, 45%, 2%)

Oklch

oklch(89.4% 0.105 87.0)

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

#FAF5C8

Fresh Green · Bisque · Lemon Cream

HEX

#FAF5C8

RGB

rgb(250, 245, 200)

HSL

hsl(54, 83%, 88%)

HSB

hsb(54, 20%, 98%)

CMYK

cmyk(0%, 2%, 20%, 2%)

Oklch

oklch(96.3% 0.058 102.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

899AA1

A08F88

Analogous

88A09B

899AA1

888DA0

Triadic

899AA1

A08899

99A088

Split-Comp.

899AA1

A0888D

A09B88

Tetradic

899AA1

9B88A0

A08F88

8DA088

Contrast Matrix WCAG 2.1 Contrast

899AA1	BDA2A2	FBBE9A	FAD889	FAF5C8
—	1.2 Fail	1.8 Fail	2.1 Fail	2.6 Fail
1.2 Fail	—	1.5 Fail	1.7 Fail	2.1 Fail
1.8 Fail	1.5 Fail	—	1.2 Fail	1.5 Fail
2.1 Fail	1.7 Fail	1.2 Fail	—	1.2 Fail
2.6 Fail	2.1 Fail	1.5 Fail	1.2 Fail	—

White BG

2.9Fail

2.4Fail

1.6Fail

1.4Fail

1.1Fail

Black BG

7.2AAA

8.9AAA

12.9AAA

15.2AAA

19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

90919F

B1B1A2

E1E0A3

EBEB9C

F8F8D3

Deuteranopia

8F8E9F

B3B5A2

E4E9A5

EDF0A1

F8F9D6

Tritanopia

8A9E9E

BCA2A2

F8AAAB

F8ABAF

FADBDD

Achromatopsia

969696

AAAAAA

CCCCCC

D9D9D9

F1F1F1

Shades & Tints Shades & Tints

#899AA1

Dark

Light

#BDA2A2

Dark

Light

#FBBE9A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #899aa1;
  --color-2: #bda2a2;
  --color-3: #fbbe9a;
  --color-4: #fad889;
  --color-5: #faf5c8;
}

SCSS

$color-1: #899aa1;
$color-2: #bda2a2;
$color-3: #fbbe9a;
$color-4: #fad889;
$color-5: #faf5c8;

TAILWIND

colors: {
  'brand-1': '#899aa1',
  'brand-2': '#bda2a2',
  'brand-3': '#fbbe9a',
  'brand-4': '#fad889',
  'brand-5': '#faf5c8',
}

RGB Array

[137, 154, 161], [189, 162, 162], [251, 190, 154], [250, 216, 137], [250, 245, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #899AA1, #BDA2A2, #FBBE9A, #FAD889, #FAF5C8 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: #899aa1; --color-2: #bda2a2; --color-3: #fbbe9a; --color-4: #fad889; --color-5: #faf5c8. 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