← Back to Editor

#CFD0B9 · #D6B09A · #DF5868 · #B66788 · #5EAA9A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CFD0B9

Fresh Green · Silver · Lemon Cream

HEX
#CFD0B9
RGB
rgb(207, 208, 185)
HSL
hsl(63, 20%, 77%)
HSB
hsb(63, 11%, 82%)
CMYK
cmyk(0%, 0%, 11%, 18%)
Oklch
oklch(85.1% 0.031 109.1)

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

#D6B09A

Apricot · Tan · Warm Sun

HEX
#D6B09A
RGB
rgb(214, 176, 154)
HSL
hsl(22, 42%, 72%)
HSB
hsb(22, 28%, 84%)
CMYK
cmyk(0%, 18%, 28%, 16%)
Oklch
oklch(78.5% 0.054 51.7)

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

#DF5868

Peach Pink · Tomato · Coral Red

HEX
#DF5868
RGB
rgb(223, 88, 104)
HSL
hsl(353, 68%, 61%)
HSB
hsb(353, 61%, 87%)
CMYK
cmyk(0%, 61%, 53%, 13%)
Oklch
oklch(64.0% 0.169 16.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#B66788

Dark Violet · Gray · Rose Pink

HEX
#B66788
RGB
rgb(182, 103, 136)
HSL
hsl(335, 35%, 56%)
HSB
hsb(335, 43%, 71%)
CMYK
cmyk(0%, 43%, 25%, 29%)
Oklch
oklch(61.2% 0.108 354.3)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#5EAA9A

Mineral Blue · CadetBlue · Lake Green

HEX
#5EAA9A
RGB
rgb(94, 170, 154)
HSL
hsl(167, 31%, 52%)
HSB
hsb(167, 45%, 67%)
CMYK
cmyk(45%, 0%, 9%, 33%)
Oklch
oklch(68.4% 0.080 178.6)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFD0B9
BAB9D0

Analogous

D0C6B9
CFD0B9
C3D0B9

Triadic

CFD0B9
B9CFD0
D0B9CF

Split-Comp.

CFD0B9
B9C3D0
C6B9D0

Tetradic

CFD0B9
B9D0C6
BAB9D0
D0B9C3

Contrast Matrix WCAG 2.1 Contrast

CFD0B9
D6B09A
DF5868
B66788
5EAA9A
—
1.3
Fail
2.3
Fail
2.5
Fail
1.7
Fail
1.3
Fail
—
1.8
Fail
2.0
Fail
1.4
Fail
2.3
Fail
1.8
Fail
—
1.1
Fail
1.3
Fail
2.5
Fail
2.0
Fail
1.1
Fail
—
1.5
Fail
1.7
Fail
1.4
Fail
1.3
Fail
1.5
Fail
—
White BG
1.6Fail
2.0Fail
3.7AA Large
4.0AA Large
2.7Fail
Black BG
13.4AAA
10.5AAA
5.7AA
5.3AA
7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCFBF
C6C59F
A5A364
949380
7F809E

Deuteranopia

CFCFC0
C8CBA1
ACB763
989E7E
7B759F

Tritanopia

CFC3C4
D4A4A4
D86160
B27A78
62A1A2

Achromatopsia

CDCDCD
B9B9B9
828282
828282
919191

Shades & Tints Shades & Tints

#CFD0B9

Dark
Light

#D6B09A

Dark
Light

#DF5868

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfd0b9;
  --color-2: #d6b09a;
  --color-3: #df5868;
  --color-4: #b66788;
  --color-5: #5eaa9a;
}

SCSS

$color-1: #cfd0b9;
$color-2: #d6b09a;
$color-3: #df5868;
$color-4: #b66788;
$color-5: #5eaa9a;

TAILWIND

colors: {
  'brand-1': '#cfd0b9',
  'brand-2': '#d6b09a',
  'brand-3': '#df5868',
  'brand-4': '#b66788',
  'brand-5': '#5eaa9a',
}

RGB Array

[207, 208, 185], [214, 176, 154], [223, 88, 104], [182, 103, 136], [94, 170, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFD0B9, #D6B09A, #DF5868, #B66788, #5EAA9A is ideal for: corporate websites, product showcases, portfolios. 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: #cfd0b9; --color-2: #d6b09a; --color-3: #df5868; --color-4: #b66788; --color-5: #5eaa9a. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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