#7B9899 + #89AEAF + #BAD1AA + #F0E6BE + #FCD5B0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7B9899

Slate Blue · LightSlateGray · Lake Green

HEX

#7B9899

RGB

rgb(123, 152, 153)

HSL

hsl(182, 13%, 54%)

HSB

hsb(182, 20%, 60%)

CMYK

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

Oklch

oklch(65.8% 0.032 199.0)

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

#89AEAF

Sky Blue · DarkGray · Lake Green

HEX

#89AEAF

RGB

rgb(137, 174, 175)

HSL

hsl(182, 19%, 61%)

HSB

hsb(182, 22%, 69%)

CMYK

cmyk(22%, 1%, 0%, 31%)

Oklch

oklch(72.4% 0.040 198.4)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#BAD1AA

Celadon · Silver · Apple Green

HEX

#BAD1AA

RGB

rgb(186, 209, 170)

HSL

hsl(95, 30%, 74%)

HSB

hsb(95, 19%, 82%)

CMYK

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

Oklch

oklch(83.3% 0.059 132.6)

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

#F0E6BE

Goose Yellow · Wheat · Lemon Cream

HEX

#F0E6BE

RGB

rgb(240, 230, 190)

HSL

hsl(48, 62%, 84%)

HSB

hsb(48, 21%, 94%)

CMYK

cmyk(0%, 4%, 21%, 6%)

Oklch

oklch(92.3% 0.053 95.6)

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

#FCD5B0

Apricot · Wheat · Peach Orange

HEX

#FCD5B0

RGB

rgb(252, 213, 176)

HSL

hsl(29, 93%, 84%)

HSB

hsb(29, 30%, 99%)

CMYK

cmyk(0%, 15%, 30%, 1%)

Oklch

oklch(89.7% 0.065 65.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7B9899

997B7A

Analogous

7A998B

7B9899

7A8999

Triadic

7B9899

997A98

98997A

Split-Comp.

7B9899

997A89

998B7A

Tetradic

7B9899

8B7A99

997B7A

89997A

Contrast Matrix WCAG 2.1 Contrast

7B9899	89AEAF	BAD1AA	F0E6BE	FCD5B0
—	1.3 Fail	1.9 Fail	2.5 Fail	2.2 Fail
1.3 Fail	—	1.5 Fail	1.9 Fail	1.7 Fail
1.9 Fail	1.5 Fail	—	1.3 Fail	1.2 Fail
2.5 Fail	1.9 Fail	1.3 Fail	—	1.1 Fail
2.2 Fail	1.7 Fail	1.2 Fail	1.1 Fail	—

White BG

3.1AA Large

2.4Fail

1.6Fail

1.3Fail

1.4Fail

Black BG

6.8AA

8.7AAA

12.8AAA

16.8AAA

15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

888899

9999AF

C4C4B3

ECECC8

EBEBB9

Deuteranopia

868499

9794AF

C3C1B6

ECEDCA

EDF0BB

Tritanopia

7C9999

8BAFAF

BBBBBD

F0CFD1

FAC0C2

Achromatopsia

8F8F8F

A3A3A3

C6C6C6

E4E4E4

DCDCDC

Shades & Tints Shades & Tints

#7B9899

Dark

Light

#89AEAF

Dark

Light

#BAD1AA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7b9899;
  --color-2: #89aeaf;
  --color-3: #bad1aa;
  --color-4: #f0e6be;
  --color-5: #fcd5b0;
}

SCSS

$color-1: #7b9899;
$color-2: #89aeaf;
$color-3: #bad1aa;
$color-4: #f0e6be;
$color-5: #fcd5b0;

TAILWIND

colors: {
  'brand-1': '#7b9899',
  'brand-2': '#89aeaf',
  'brand-3': '#bad1aa',
  'brand-4': '#f0e6be',
  'brand-5': '#fcd5b0',
}

RGB Array

[123, 152, 153], [137, 174, 175], [186, 209, 170], [240, 230, 190], [252, 213, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7B9899, #89AEAF, #BAD1AA, #F0E6BE, #FCD5B0 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: #7b9899; --color-2: #89aeaf; --color-3: #bad1aa; --color-4: #f0e6be; --color-5: #fcd5b0. 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