← Back to Editor

#AFBDE0 · #B5C2C9 · #C9C2B5 · #E0B999 · #B0AEA4

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

#AFBDE0

Azure · LightSteelBlue · Cobalt Blue

HEX
#AFBDE0
RGB
rgb(175, 189, 224)
HSL
hsl(223, 44%, 78%)
HSB
hsb(223, 22%, 88%)
CMYK
cmyk(22%, 16%, 0%, 12%)
Oklch
oklch(79.9% 0.052 268.0)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#B5C2C9

Sky Blue · Silver · Cobalt Blue

HEX
#B5C2C9
RGB
rgb(181, 194, 201)
HSL
hsl(201, 16%, 75%)
HSB
hsb(201, 10%, 79%)
CMYK
cmyk(10%, 3%, 0%, 21%)
Oklch
oklch(80.6% 0.017 231.0)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#C9C2B5

Goose Yellow · Silver · Warm Sun

HEX
#C9C2B5
RGB
rgb(201, 194, 181)
HSL
hsl(39, 16%, 75%)
HSB
hsb(39, 10%, 79%)
CMYK
cmyk(0%, 3%, 10%, 21%)
Oklch
oklch(81.6% 0.020 83.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#E0B999

Apricot · BurlyWood · Warm Sun

HEX
#E0B999
RGB
rgb(224, 185, 153)
HSL
hsl(27, 53%, 74%)
HSB
hsb(27, 32%, 88%)
CMYK
cmyk(0%, 17%, 32%, 12%)
Oklch
oklch(81.2% 0.062 61.1)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#B0AEA4

Ash · DarkGray · Silver Sand

HEX
#B0AEA4
RGB
rgb(176, 174, 164)
HSL
hsl(50, 7%, 67%)
HSB
hsb(50, 7%, 69%)
CMYK
cmyk(0%, 1%, 7%, 31%)
Oklch
oklch(75.0% 0.014 97.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFBDE0
E0D2AE

Analogous

AED5E0
AFBDE0
B9AEE0

Triadic

AFBDE0
E0AEBC
BCE0AE

Split-Comp.

AFBDE0
E0B9AE
D5E0AE

Tetradic

AFBDE0
E0AED5
E0D2AE
AEE0B9

Contrast Matrix WCAG 2.1 Contrast

AFBDE0
B5C2C9
C9C2B5
E0B999
B0AEA4
—
1.0
Fail
1.1
Fail
1.0
Fail
1.2
Fail
1.0
Fail
—
1.0
Fail
1.0
Fail
1.2
Fail
1.1
Fail
1.0
Fail
—
1.0
Fail
1.3
Fail
1.0
Fail
1.0
Fail
1.0
Fail
—
1.2
Fail
1.2
Fail
1.2
Fail
1.3
Fail
1.2
Fail
—
White BG
1.9Fail
1.8Fail
1.8Fail
1.8Fail
2.2Fail
Black BG
11.2AAA
11.5AAA
11.9AAA
11.6AAA
9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B5D8
BBBBC7
C6C6B8
CFCFA1
AFAFA6

Deuteranopia

B4B3D5
BAB9C7
C6C7B9
D1D4A3
AFAFA7

Tritanopia

B0D1CF
B6C6C6
C9BBBB
DEA7A8
B0A8A9

Achromatopsia

BDBDBD
BFBFBF
C3C3C3
C1C1C1
ADADAD

Shades & Tints Shades & Tints

#AFBDE0

Dark
Light

#B5C2C9

Dark
Light

#C9C2B5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afbde0;
  --color-2: #b5c2c9;
  --color-3: #c9c2b5;
  --color-4: #e0b999;
  --color-5: #b0aea4;
}

SCSS

$color-1: #afbde0;
$color-2: #b5c2c9;
$color-3: #c9c2b5;
$color-4: #e0b999;
$color-5: #b0aea4;

TAILWIND

colors: {
  'brand-1': '#afbde0',
  'brand-2': '#b5c2c9',
  'brand-3': '#c9c2b5',
  'brand-4': '#e0b999',
  'brand-5': '#b0aea4',
}

RGB Array

[175, 189, 224], [181, 194, 201], [201, 194, 181], [224, 185, 153], [176, 174, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AFBDE0, #B5C2C9, #C9C2B5, #E0B999, #B0AEA4 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: #afbde0; --color-2: #b5c2c9; --color-3: #c9c2b5; --color-4: #e0b999; --color-5: #b0aea4. 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