← Back to Editor

#DCD8E3 · #CFD479 · #8FDBAC · #DBC70D · #57D5DE

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

WorkspaceReadingData Visualization

Color Details Color Details

#DCD8E3

Wisteria · LightGray · Lavender

HEX
#DCD8E3
RGB
rgb(220, 216, 227)
HSL
hsl(262, 16%, 87%)
HSB
hsb(262, 5%, 89%)
CMYK
cmyk(3%, 5%, 0%, 11%)
Oklch
oklch(88.9% 0.015 302.5)

Traditional「Wisteria」· Paint「Lavender」· Creative Lavender Dream

#CFD479

Fresh Green · BurlyWood · Sunflower

HEX
#CFD479
RGB
rgb(207, 212, 121)
HSL
hsl(63, 51%, 65%)
HSB
hsb(63, 43%, 83%)
CMYK
cmyk(2%, 0%, 43%, 17%)
Oklch
oklch(84.6% 0.115 111.4)

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

#8FDBAC

Emerald · LightGreen · Apple Green

HEX
#8FDBAC
RGB
rgb(143, 219, 172)
HSL
hsl(143, 51%, 71%)
HSB
hsb(143, 35%, 86%)
CMYK
cmyk(35%, 0%, 21%, 14%)
Oklch
oklch(82.9% 0.101 156.3)

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

#DBC70D

Autumn Sage · GoldenRod · Honey Gold

HEX
#DBC70D
RGB
rgb(219, 199, 13)
HSL
hsl(54, 89%, 45%)
HSB
hsb(54, 94%, 86%)
CMYK
cmyk(0%, 9%, 94%, 14%)
Oklch
oklch(82.1% 0.170 102.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#57D5DE

Sky Blue · MediumTurquoise · Lake Green

HEX
#57D5DE
RGB
rgb(87, 213, 222)
HSL
hsl(184, 67%, 61%)
HSB
hsb(184, 61%, 87%)
CMYK
cmyk(61%, 4%, 0%, 13%)
Oklch
oklch(80.7% 0.111 201.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCD8E3
DFE3D9

Analogous

D9DAE3
DCD8E3
E2D9E3

Triadic

DCD8E3
E3DCD9
D9E3DC

Split-Comp.

DCD8E3
E3E2D9
DAE3D9

Tetradic

DCD8E3
E3D9DA
DFE3D9
D9E3E2

Contrast Matrix WCAG 2.1 Contrast

DCD8E3
CFD479
8FDBAC
DBC70D
57D5DE
—
1.1
Fail
1.2
Fail
1.2
Fail
1.3
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.1
Fail
1.2
Fail
1.0
Fail
—
1.1
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.1
Fail
—
1.0
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.0
Fail
—
White BG
1.4Fail
1.6Fail
1.6Fail
1.7Fail
1.8Fail
Black BG
15.0AAA
13.3AAA
12.9AAA
12.2AAA
12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DADAE0
D1D18F
B0B1B7
D2D23A
8E8FDC

Deuteranopia

DBDBE0
D1D094
ACA6BA
D4D545
867DDB

Tritanopia

DCDEDE
CFA0A4
93C0C2
DA5E65
5DDADA

Achromatopsia

DADADA
C8C8C8
BFBFBF
B8B8B8
B0B0B0

Shades & Tints Shades & Tints

#DCD8E3

Dark
Light

#CFD479

Dark
Light

#8FDBAC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dcd8e3;
  --color-2: #cfd479;
  --color-3: #8fdbac;
  --color-4: #dbc70d;
  --color-5: #57d5de;
}

SCSS

$color-1: #dcd8e3;
$color-2: #cfd479;
$color-3: #8fdbac;
$color-4: #dbc70d;
$color-5: #57d5de;

TAILWIND

colors: {
  'brand-1': '#dcd8e3',
  'brand-2': '#cfd479',
  'brand-3': '#8fdbac',
  'brand-4': '#dbc70d',
  'brand-5': '#57d5de',
}

RGB Array

[220, 216, 227], [207, 212, 121], [143, 219, 172], [219, 199, 13], [87, 213, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DCD8E3, #CFD479, #8FDBAC, #DBC70D, #57D5DE is ideal for: health products, baby brands, fresh-style blogs, 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: #dcd8e3; --color-2: #cfd479; --color-3: #8fdbac; --color-4: #dbc70d; --color-5: #57d5de. 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. 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