← Back to Editor

#C8DECF · #BCC4B1 · #B5AE8A · #C9A46F · #E68555

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C8DECF

Celadon · LightGray · Mint Green

HEX
#C8DECF
RGB
rgb(200, 222, 207)
HSL
hsl(139, 25%, 83%)
HSB
hsb(139, 10%, 87%)
CMYK
cmyk(10%, 0%, 7%, 13%)
Oklch
oklch(88.0% 0.031 155.9)

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

#BCC4B1

Willow Green · Silver · Apple Green

HEX
#BCC4B1
RGB
rgb(188, 196, 177)
HSL
hsl(85, 14%, 73%)
HSB
hsb(85, 10%, 77%)
CMYK
cmyk(4%, 0%, 10%, 23%)
Oklch
oklch(80.9% 0.028 125.7)

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

#B5AE8A

Fresh Green · Tan · Sunflower

HEX
#B5AE8A
RGB
rgb(181, 174, 138)
HSL
hsl(50, 23%, 63%)
HSB
hsb(50, 24%, 71%)
CMYK
cmyk(0%, 4%, 24%, 29%)
Oklch
oklch(74.7% 0.050 98.3)

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

#C9A46F

Ginger · Tan · Warm Sun

HEX
#C9A46F
RGB
rgb(201, 164, 111)
HSL
hsl(35, 45%, 61%)
HSB
hsb(35, 45%, 79%)
CMYK
cmyk(0%, 18%, 45%, 21%)
Oklch
oklch(74.0% 0.082 75.9)

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

#E68555

Apricot · Coral · Warm Sun

HEX
#E68555
RGB
rgb(230, 133, 85)
HSL
hsl(20, 74%, 62%)
HSB
hsb(20, 63%, 90%)
CMYK
cmyk(0%, 42%, 63%, 10%)
Oklch
oklch(71.2% 0.135 46.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8DECF
DEC9D8

Analogous

CDDEC9
C8DECF
C9DEDB

Triadic

C8DECF
D0C9DE
DED0C9

Split-Comp.

C8DECF
DBC9DE
DEC9CD

Tetradic

C8DECF
C9CDDE
DEC9D8
DEDBC9

Contrast Matrix WCAG 2.1 Contrast

C8DECF
BCC4B1
B5AE8A
C9A46F
E68555
—
1.3
Fail
1.6
Fail
1.6
Fail
1.9
Fail
1.3
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
1.6
Fail
1.2
Fail
—
1.0
Fail
1.2
Fail
1.6
Fail
1.3
Fail
1.0
Fail
—
1.1
Fail
1.9
Fail
1.5
Fail
1.2
Fail
1.1
Fail
—
White BG
1.4Fail
1.8Fail
2.2Fail
2.3Fail
2.7Fail
Black BG
14.8AAA
11.7AAA
9.4AAA
9.0AAA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2D3
BFC0B6
B2B293
B9B97C
BCBB61

Deuteranopia

D0CFD3
BFBEB7
B2B395
BBBE7F
C2C963

Tritanopia

C9D5D6
BCB9BA
B59A9B
C78688
E16A6C

Achromatopsia

D6D6D6
BFBFBF
ACACAC
A9A9A9
9D9D9D

Shades & Tints Shades & Tints

#C8DECF

Dark
Light

#BCC4B1

Dark
Light

#B5AE8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8decf;
  --color-2: #bcc4b1;
  --color-3: #b5ae8a;
  --color-4: #c9a46f;
  --color-5: #e68555;
}

SCSS

$color-1: #c8decf;
$color-2: #bcc4b1;
$color-3: #b5ae8a;
$color-4: #c9a46f;
$color-5: #e68555;

TAILWIND

colors: {
  'brand-1': '#c8decf',
  'brand-2': '#bcc4b1',
  'brand-3': '#b5ae8a',
  'brand-4': '#c9a46f',
  'brand-5': '#e68555',
}

RGB Array

[200, 222, 207], [188, 196, 177], [181, 174, 138], [201, 164, 111], [230, 133, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C8DECF, #BCC4B1, #B5AE8A, #C9A46F, #E68555 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: #c8decf; --color-2: #bcc4b1; --color-3: #b5ae8a; --color-4: #c9a46f; --color-5: #e68555. 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