← Back to Editor

#DCE2E2 · #F0F0B0 · #D9DC71 · #B0BB31 · #98948B

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

#DCE2E2

Sky Blue · LightGray · Cloud White

HEX
#DCE2E2
RGB
rgb(220, 226, 226)
HSL
hsl(180, 9%, 87%)
HSB
hsb(180, 3%, 89%)
CMYK
cmyk(3%, 0%, 0%, 11%)
Oklch
oklch(90.8% 0.006 197.0)

Traditional「Sky Blue」· Paint「Cloud White」· Creative Silver Lining

#F0F0B0

Fresh Green · Wheat · Lemon Cream

HEX
#F0F0B0
RGB
rgb(240, 240, 176)
HSL
hsl(60, 68%, 82%)
HSB
hsb(60, 27%, 94%)
CMYK
cmyk(0%, 0%, 27%, 6%)
Oklch
oklch(94.0% 0.082 107.9)

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

#D9DC71

Fresh Green · Khaki · Sunflower

HEX
#D9DC71
RGB
rgb(217, 220, 113)
HSL
hsl(62, 60%, 65%)
HSB
hsb(62, 49%, 86%)
CMYK
cmyk(1%, 0%, 49%, 14%)
Oklch
oklch(87.0% 0.131 110.3)

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

#B0BB31

Autumn Sage · GoldenRod · Honey Gold

HEX
#B0BB31
RGB
rgb(176, 187, 49)
HSL
hsl(65, 58%, 46%)
HSB
hsb(65, 74%, 73%)
CMYK
cmyk(6%, 0%, 74%, 27%)
Oklch
oklch(75.9% 0.155 114.1)

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

#98948B

Ash · Gray · Silver Sand

HEX
#98948B
RGB
rgb(152, 148, 139)
HSL
hsl(42, 6%, 57%)
HSB
hsb(42, 9%, 60%)
CMYK
cmyk(0%, 3%, 9%, 40%)
Oklch
oklch(66.7% 0.014 86.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCE2E2
E1DBDB

Analogous

DBE1DE
DCE2E2
DBDEE1

Triadic

DCE2E2
E1DBE1
E1E1DB

Split-Comp.

DCE2E2
E1DBDE
E1DEDB

Tetradic

DCE2E2
DEDBE1
E1DBDB
DEE1DB

Contrast Matrix WCAG 2.1 Contrast

DCE2E2
F0F0B0
D9DC71
B0BB31
98948B
—
1.1
Fail
1.1
Fail
1.6
Fail
2.3
Fail
1.1
Fail
—
1.2
Fail
1.8
Fail
2.6
Fail
1.1
Fail
1.2
Fail
—
1.4
Fail
2.1
Fail
1.6
Fail
1.8
Fail
1.4
Fail
—
1.4
Fail
2.3
Fail
2.6
Fail
2.1
Fail
1.4
Fail
—
White BG
1.3Fail
1.2Fail
1.5Fail
2.1Fail
3.0AA Large
Black BG
16.0AAA
17.8AAA
14.4AAA
10.0AAA
6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFE2
F0F0BF
DADA8B
B5B552
96968D

Deuteranopia

DEDEE2
F0F0C3
DADA91
B4B35A
97978E

Tritanopia

DCE2E2
F0CCCE
D99FA4
B16D73
988F8F

Achromatopsia

E0E0E0
E9E9E9
CFCFCF
A8A8A8
949494

Shades & Tints Shades & Tints

#DCE2E2

Dark
Light

#F0F0B0

Dark
Light

#D9DC71

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dce2e2;
  --color-2: #f0f0b0;
  --color-3: #d9dc71;
  --color-4: #b0bb31;
  --color-5: #98948b;
}

SCSS

$color-1: #dce2e2;
$color-2: #f0f0b0;
$color-3: #d9dc71;
$color-4: #b0bb31;
$color-5: #98948b;

TAILWIND

colors: {
  'brand-1': '#dce2e2',
  'brand-2': '#f0f0b0',
  'brand-3': '#d9dc71',
  'brand-4': '#b0bb31',
  'brand-5': '#98948b',
}

RGB Array

[220, 226, 226], [240, 240, 176], [217, 220, 113], [176, 187, 49], [152, 148, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DCE2E2, #F0F0B0, #D9DC71, #B0BB31, #98948B 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: #dce2e2; --color-2: #f0f0b0; --color-3: #d9dc71; --color-4: #b0bb31; --color-5: #98948b. 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