← Back to Editor

#DFE0BA · #87C7C6 · #CF7A99 · #F74D7D · #0F0508

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 LibraryData Visualization

Color Details Color Details

#DFE0BA

Fresh Green · Wheat · Lemon Cream

HEX
#DFE0BA
RGB
rgb(223, 224, 186)
HSL
hsl(62, 38%, 80%)
HSB
hsb(62, 17%, 88%)
CMYK
cmyk(0%, 0%, 17%, 12%)
Oklch
oklch(89.6% 0.050 108.6)

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

#87C7C6

Jade · SkyBlue · Lake Green

HEX
#87C7C6
RGB
rgb(135, 199, 198)
HSL
hsl(179, 36%, 65%)
HSB
hsb(179, 32%, 78%)
CMYK
cmyk(32%, 0%, 1%, 22%)
Oklch
oklch(78.6% 0.065 194.7)

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

#CF7A99

Rouge · LightCoral · Rose Pink

HEX
#CF7A99
RGB
rgb(207, 122, 153)
HSL
hsl(338, 47%, 65%)
HSB
hsb(338, 41%, 81%)
CMYK
cmyk(0%, 41%, 26%, 19%)
Oklch
oklch(68.0% 0.112 357.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#F74D7D

Rouge · LightCoral · Rose Pink

HEX
#F74D7D
RGB
rgb(247, 77, 125)
HSL
hsl(343, 91%, 64%)
HSB
hsb(343, 69%, 97%)
CMYK
cmyk(0%, 69%, 49%, 3%)
Oklch
oklch(67.0% 0.207 7.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#0F0508

Dark Violet · Black · Raspberry

HEX
#0F0508
RGB
rgb(15, 5, 8)
HSL
hsl(342, 50%, 4%)
HSB
hsb(342, 67%, 6%)
CMYK
cmyk(0%, 67%, 47%, 94%)
Oklch
oklch(13.4% 0.022 357.8)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFE0BA
BAB9DF

Analogous

DFCDB9
DFE0BA
CBDFB9

Triadic

DFE0BA
B9DEDF
DFB9DE

Split-Comp.

DFE0BA
B9CBDF
CDB9DF

Tetradic

DFE0BA
B9DFCD
BAB9DF
DFB9CB

Contrast Matrix WCAG 2.1 Contrast

DFE0BA
87C7C6
CF7A99
F74D7D
0F0508
—
1.4
Fail
2.2
Fail
2.5
Fail
14.8
AAA
1.4
Fail
—
1.6
Fail
1.7
Fail
10.5
AAA
2.2
Fail
1.6
Fail
—
1.1
Fail
6.6
AA
2.5
Fail
1.7
Fail
1.1
Fail
—
6.0
AA
14.8
AAA
10.5
AAA
6.6
AA
6.0
AA
—
White BG
1.4Fail
1.9Fail
3.0AA Large
3.3AA Large
20.1AAA
Black BG
15.5AAA
11.0AAA
6.9AA
6.3AA
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFC3
A3A3C6
AAA991
ADAC71
0B0B07

Deuteranopia

DFDFC5
9F9AC6
AFB590
B7C46F
0B0C07

Tritanopia

DFCACC
8AC6C6
CB8C8A
EE6866
0F0707

Achromatopsia

DBDBDB
B4B4B4
979797
858585
080808

Shades & Tints Shades & Tints

#DFE0BA

Dark
Light

#87C7C6

Dark
Light

#CF7A99

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfe0ba;
  --color-2: #87c7c6;
  --color-3: #cf7a99;
  --color-4: #f74d7d;
  --color-5: #0f0508;
}

SCSS

$color-1: #dfe0ba;
$color-2: #87c7c6;
$color-3: #cf7a99;
$color-4: #f74d7d;
$color-5: #0f0508;

TAILWIND

colors: {
  'brand-1': '#dfe0ba',
  'brand-2': '#87c7c6',
  'brand-3': '#cf7a99',
  'brand-4': '#f74d7d',
  'brand-5': '#0f0508',
}

RGB Array

[223, 224, 186], [135, 199, 198], [207, 122, 153], [247, 77, 125], [15, 5, 8]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFE0BA, #87C7C6, #CF7A99, #F74D7D, #0F0508 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #dfe0ba; --color-2: #87c7c6; --color-3: #cf7a99; --color-4: #f74d7d; --color-5: #0f0508. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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