← Back to Editor

#B8DCEC · #868581 · #B49A83 · #84B7A8 · #A9C3D4

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

#B8DCEC

Sky Blue · LightBlue · Glacier Blue

HEX
#B8DCEC
RGB
rgb(184, 220, 236)
HSL
hsl(198, 58%, 82%)
HSB
hsb(198, 22%, 93%)
CMYK
cmyk(22%, 7%, 0%, 7%)
Oklch
oklch(87.4% 0.044 226.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#868581

Ash · Gray · Warm Gray

HEX
#868581
RGB
rgb(134, 133, 129)
HSL
hsl(48, 2%, 52%)
HSB
hsb(48, 4%, 53%)
CMYK
cmyk(0%, 1%, 4%, 47%)
Oklch
oklch(61.6% 0.006 95.1)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#B49A83

Apricot · Tan · Warm Sun

HEX
#B49A83
RGB
rgb(180, 154, 131)
HSL
hsl(28, 25%, 61%)
HSB
hsb(28, 27%, 71%)
CMYK
cmyk(0%, 14%, 27%, 29%)
Oklch
oklch(70.3% 0.045 63.5)

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

#84B7A8

Jade · DarkSeaGreen · Lake Green

HEX
#84B7A8
RGB
rgb(132, 183, 168)
HSL
hsl(162, 26%, 62%)
HSB
hsb(162, 28%, 72%)
CMYK
cmyk(28%, 0%, 8%, 28%)
Oklch
oklch(73.9% 0.058 174.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#A9C3D4

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#A9C3D4
RGB
rgb(169, 195, 212)
HSL
hsl(204, 33%, 75%)
HSB
hsb(204, 20%, 83%)
CMYK
cmyk(20%, 8%, 0%, 17%)
Oklch
oklch(80.3% 0.037 236.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8DCEC
ECC6B6

Analogous

B6ECE1
B8DCEC
B6C1EC

Triadic

B8DCEC
ECB6DC
DCECB6

Split-Comp.

B8DCEC
ECB6C1
ECE1B6

Tetradic

B8DCEC
E1B6EC
ECC6B6
C1ECB6

Contrast Matrix WCAG 2.1 Contrast

B8DCEC
868581
B49A83
84B7A8
A9C3D4
—
2.5
Fail
1.8
Fail
1.6
Fail
1.3
Fail
2.5
Fail
—
1.4
Fail
1.6
Fail
2.0
Fail
1.8
Fail
1.4
Fail
—
1.2
Fail
1.5
Fail
1.6
Fail
1.6
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
2.0
Fail
1.5
Fail
1.2
Fail
—
White BG
1.4Fail
3.7AA Large
2.7Fail
2.3Fail
1.8Fail
Black BG
14.5AAA
5.7AA
7.9AAA
9.3AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C8E8
868682
A9A989
9A9BAC
B4B4D0

Deuteranopia

C6C3E7
868682
AAAC8A
9793AD
B3B1CF

Tritanopia

BAE5E4
868383
B38D8E
87AEAF
AACDCC

Achromatopsia

D3D3D3
858585
9F9F9F
A6A6A6
BDBDBD

Shades & Tints Shades & Tints

#B8DCEC

Dark
Light

#868581

Dark
Light

#B49A83

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8dcec;
  --color-2: #868581;
  --color-3: #b49a83;
  --color-4: #84b7a8;
  --color-5: #a9c3d4;
}

SCSS

$color-1: #b8dcec;
$color-2: #868581;
$color-3: #b49a83;
$color-4: #84b7a8;
$color-5: #a9c3d4;

TAILWIND

colors: {
  'brand-1': '#b8dcec',
  'brand-2': '#868581',
  'brand-3': '#b49a83',
  'brand-4': '#84b7a8',
  'brand-5': '#a9c3d4',
}

RGB Array

[184, 220, 236], [134, 133, 129], [180, 154, 131], [132, 183, 168], [169, 195, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8DCEC, #868581, #B49A83, #84B7A8, #A9C3D4 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: #b8dcec; --color-2: #868581; --color-3: #b49a83; --color-4: #84b7a8; --color-5: #a9c3d4. 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