← Back to Editor

#B8BCCD · #CCCFC3 · #EFEBB6 · #BBA68D · #8C695C

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

#B8BCCD

Azure · Silver · Cobalt Blue

HEX
#B8BCCD
RGB
rgb(184, 188, 205)
HSL
hsl(229, 17%, 76%)
HSB
hsb(229, 10%, 80%)
CMYK
cmyk(10%, 8%, 0%, 20%)
Oklch
oklch(79.7% 0.024 275.3)

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

#CCCFC3

Willow Green · LightGray · Apple Green

HEX
#CCCFC3
RGB
rgb(204, 207, 195)
HSL
hsl(75, 11%, 79%)
HSB
hsb(75, 6%, 81%)
CMYK
cmyk(1%, 0%, 6%, 19%)
Oklch
oklch(84.9% 0.017 118.2)

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

#EFEBB6

Fresh Green · Wheat · Lemon Cream

HEX
#EFEBB6
RGB
rgb(239, 235, 182)
HSL
hsl(56, 64%, 83%)
HSB
hsb(56, 24%, 94%)
CMYK
cmyk(0%, 2%, 24%, 6%)
Oklch
oklch(93.0% 0.069 104.0)

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

#BBA68D

Ginger · Tan · Warm Sun

HEX
#BBA68D
RGB
rgb(187, 166, 141)
HSL
hsl(33, 25%, 64%)
HSB
hsb(33, 25%, 73%)
CMYK
cmyk(0%, 11%, 25%, 27%)
Oklch
oklch(73.7% 0.043 71.9)

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

#8C695C

Tangerine · DimGray · Amber Brown

HEX
#8C695C
RGB
rgb(140, 105, 92)
HSL
hsl(16, 21%, 45%)
HSB
hsb(16, 34%, 55%)
CMYK
cmyk(0%, 25%, 34%, 45%)
Oklch
oklch(55.3% 0.049 41.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8BCCD
CCC8B7

Analogous

B7C6CC
B8BCCD
BEB7CC

Triadic

B8BCCD
CCB7BB
BBCCB7

Split-Comp.

B8BCCD
CCBEB7
C6CCB7

Tetradic

B8BCCD
CCB7C6
CCC8B7
B7CCBE

Contrast Matrix WCAG 2.1 Contrast

B8BCCD
CCCFC3
EFEBB6
BBA68D
8C695C
—
1.2
Fail
1.6
Fail
1.2
Fail
2.6
Fail
1.2
Fail
—
1.3
Fail
1.5
Fail
3.1
AA Large
1.6
Fail
1.3
Fail
—
1.9
Fail
4.0
AA Large
1.2
Fail
1.5
Fail
1.9
Fail
—
2.1
Fail
2.6
Fail
3.1
AA Large
4.0
AA Large
2.1
Fail
—
White BG
1.9Fail
1.6Fail
1.2Fail
2.3Fail
4.9AA
Black BG
11.1AAA
13.3AAA
17.2AAA
9.0AAA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABAC9
CDCDC6
EDEDC3
B2B293
7D7D5F

Deuteranopia

BAB9C8
CDCDC7
EEEEC6
B3B595
7F8260

Tritanopia

B8C6C5
CCC8C9
EFCDCF
BA9899
8A6262

Achromatopsia

BDBDBD
CDCDCD
E6E6E6
A9A9A9
727272

Shades & Tints Shades & Tints

#B8BCCD

Dark
Light

#CCCFC3

Dark
Light

#EFEBB6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8bccd;
  --color-2: #cccfc3;
  --color-3: #efebb6;
  --color-4: #bba68d;
  --color-5: #8c695c;
}

SCSS

$color-1: #b8bccd;
$color-2: #cccfc3;
$color-3: #efebb6;
$color-4: #bba68d;
$color-5: #8c695c;

TAILWIND

colors: {
  'brand-1': '#b8bccd',
  'brand-2': '#cccfc3',
  'brand-3': '#efebb6',
  'brand-4': '#bba68d',
  'brand-5': '#8c695c',
}

RGB Array

[184, 188, 205], [204, 207, 195], [239, 235, 182], [187, 166, 141], [140, 105, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8BCCD, #CCCFC3, #EFEBB6, #BBA68D, #8C695C 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: #b8bccd; --color-2: #cccfc3; --color-3: #efebb6; --color-4: #bba68d; --color-5: #8c695c. 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