← Back to Editor

#D5ECFA · #00AE97 · #D9D499 · #5D5C5F

A 4-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

#D5ECFA

Sky Blue · Lavender · Sky Blue

HEX
#D5ECFA
RGB
rgb(213, 236, 250)
HSL
hsl(203, 79%, 91%)
HSB
hsb(203, 15%, 98%)
CMYK
cmyk(15%, 6%, 0%, 2%)
Oklch
oklch(93.0% 0.031 234.4)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#00AE97

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#00AE97
RGB
rgb(0, 174, 151)
HSL
hsl(172, 100%, 34%)
HSB
hsb(172, 100%, 68%)
CMYK
cmyk(100%, 0%, 13%, 32%)
Oklch
oklch(67.2% 0.123 178.8)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#D9D499

Fresh Green · Khaki · Sunflower

HEX
#D9D499
RGB
rgb(217, 212, 153)
HSL
hsl(55, 46%, 73%)
HSB
hsb(55, 29%, 85%)
CMYK
cmyk(0%, 2%, 29%, 15%)
Oklch
oklch(86.0% 0.077 103.8)

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

#5D5C5F

Ink Gray · DimGray · Charcoal

HEX
#5D5C5F
RGB
rgb(93, 92, 95)
HSL
hsl(260, 2%, 37%)
HSB
hsb(260, 3%, 37%)
CMYK
cmyk(2%, 3%, 0%, 63%)
Oklch
oklch(47.7% 0.005 301.3)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D5ECFA
FAE4D6

Analogous

D6FAF6
D5ECFA
D6DAFA

Triadic

D5ECFA
FAD6EC
ECFAD6

Split-Comp.

D5ECFA
FAD6DA
FAF6D6

Tetradic

D5ECFA
F6D6FA
FAE4D6
DAFAD6

Contrast Matrix WCAG 2.1 Contrast

D5ECFA
00AE97
D9D499
5D5C5F
—
2.3
Fail
1.2
Fail
5.4
AA
2.3
Fail
—
1.8
Fail
2.4
Fail
1.2
Fail
1.8
Fail
—
4.4
AA Large
5.4
AA
2.4
Fail
4.4
AA Large
—
White BG
1.2Fail
2.8Fail
1.5Fail
6.6AA
Black BG
17.2AAA
7.5AAA
13.8AAA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFF7
4B4D9D
D7D7A7
5D5D5E

Deuteranopia

DEDCF6
41349E
D7D7AB
5D5D5E

Tritanopia

D6F4F3
09A1A2
D9B3B5
5D5E5E

Achromatopsia

E7E7E7
777777
CFCFCF
5D5D5D

Shades & Tints Shades & Tints

#D5ECFA

Dark
Light

#00AE97

Dark
Light

#D9D499

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d5ecfa;
  --color-2: #00ae97;
  --color-3: #d9d499;
  --color-4: #5d5c5f;
}

SCSS

$color-1: #d5ecfa;
$color-2: #00ae97;
$color-3: #d9d499;
$color-4: #5d5c5f;

TAILWIND

colors: {
  'brand-1': '#d5ecfa',
  'brand-2': '#00ae97',
  'brand-3': '#d9d499',
  'brand-4': '#5d5c5f',
}

RGB Array

[213, 236, 250], [0, 174, 151], [217, 212, 153], [93, 92, 95]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #D5ECFA, #00AE97, #D9D499, #5D5C5F is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d5ecfa; --color-2: #00ae97; --color-3: #d9d499; --color-4: #5d5c5f. 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 4-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