← Back to Editor

#9BAEB1 · #AFC2AB · #D7DEAA · #D4BFB1 · #C97A9E

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9BAEB1

Sky Blue · DarkGray · Lake Green

HEX
#9BAEB1
RGB
rgb(155, 174, 177)
HSL
hsl(188, 12%, 65%)
HSB
hsb(188, 12%, 69%)
CMYK
cmyk(12%, 2%, 0%, 31%)
Oklch
oklch(73.7% 0.022 208.1)

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

#AFC2AB

Celadon · DarkGray · Apple Green

HEX
#AFC2AB
RGB
rgb(175, 194, 171)
HSL
hsl(110, 16%, 72%)
HSB
hsb(110, 12%, 76%)
CMYK
cmyk(10%, 0%, 12%, 24%)
Oklch
oklch(79.3% 0.038 140.2)

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

#D7DEAA

Fresh Green · Wheat · Lemon Cream

HEX
#D7DEAA
RGB
rgb(215, 222, 170)
HSL
hsl(68, 44%, 77%)
HSB
hsb(68, 23%, 87%)
CMYK
cmyk(3%, 0%, 23%, 13%)
Oklch
oklch(88.2% 0.069 114.1)

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

#D4BFB1

Apricot · Silver · Peach Orange

HEX
#D4BFB1
RGB
rgb(212, 191, 177)
HSL
hsl(24, 29%, 76%)
HSB
hsb(24, 17%, 83%)
CMYK
cmyk(0%, 10%, 17%, 17%)
Oklch
oklch(81.8% 0.031 55.9)

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

#C97A9E

Rouge · LightCoral · Rose Pink

HEX
#C97A9E
RGB
rgb(201, 122, 158)
HSL
hsl(333, 42%, 63%)
HSB
hsb(333, 39%, 79%)
CMYK
cmyk(0%, 39%, 21%, 21%)
Oklch
oklch(67.4% 0.108 351.6)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BAEB1
B09E9B

Analogous

9BB0A9
9BAEB1
9BA3B0

Triadic

9BAEB1
B09BAE
AEB09B

Split-Comp.

9BAEB1
B09BA3
B0A99B

Tetradic

9BAEB1
A99BB0
B09E9B
A3B09B

Contrast Matrix WCAG 2.1 Contrast

9BAEB1
AFC2AB
D7DEAA
D4BFB1
C97A9E
—
1.2
Fail
1.6
Fail
1.3
Fail
1.3
Fail
1.2
Fail
—
1.3
Fail
1.1
Fail
1.6
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
2.2
Fail
1.3
Fail
1.1
Fail
1.3
Fail
—
1.8
Fail
1.3
Fail
1.6
Fail
2.2
Fail
1.8
Fail
—
White BG
2.3Fail
1.9Fail
1.4Fail
1.8Fail
3.1AA Large
Black BG
9.1AAA
11.1AAA
14.9AAA
11.9AAA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A3B0
B7B7B1
DADAB7
CBCBB4
A7A695

Deuteranopia

A2A1B0
B6B5B2
DAD9BA
CCCEB5
ABB193

Tritanopia

9CB0B0
B0B5B6
D7C1C3
D3B7B8
C58E8D

Achromatopsia

A9A9A9
BABABA
D6D6D6
C4C4C4
969696

Shades & Tints Shades & Tints

#9BAEB1

Dark
Light

#AFC2AB

Dark
Light

#D7DEAA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9baeb1;
  --color-2: #afc2ab;
  --color-3: #d7deaa;
  --color-4: #d4bfb1;
  --color-5: #c97a9e;
}

SCSS

$color-1: #9baeb1;
$color-2: #afc2ab;
$color-3: #d7deaa;
$color-4: #d4bfb1;
$color-5: #c97a9e;

TAILWIND

colors: {
  'brand-1': '#9baeb1',
  'brand-2': '#afc2ab',
  'brand-3': '#d7deaa',
  'brand-4': '#d4bfb1',
  'brand-5': '#c97a9e',
}

RGB Array

[155, 174, 177], [175, 194, 171], [215, 222, 170], [212, 191, 177], [201, 122, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BAEB1, #AFC2AB, #D7DEAA, #D4BFB1, #C97A9E is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #9baeb1; --color-2: #afc2ab; --color-3: #d7deaa; --color-4: #d4bfb1; --color-5: #c97a9e. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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