← Back to Editor

#ECF1C9 · #B9D1DD · #9F86A6 · #5F2E4B · #281A27

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

#ECF1C9

Fresh Green · Beige · Lemon Cream

HEX
#ECF1C9
RGB
rgb(236, 241, 201)
HSL
hsl(67, 59%, 87%)
HSB
hsb(67, 17%, 95%)
CMYK
cmyk(2%, 0%, 17%, 5%)
Oklch
oklch(94.4% 0.053 113.2)

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

#B9D1DD

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#B9D1DD
RGB
rgb(185, 209, 221)
HSL
hsl(200, 35%, 80%)
HSB
hsb(200, 16%, 87%)
CMYK
cmyk(16%, 5%, 0%, 13%)
Oklch
oklch(84.7% 0.031 229.3)

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

#9F86A6

Dark Plum · DarkGray · Violet

HEX
#9F86A6
RGB
rgb(159, 134, 166)
HSL
hsl(287, 15%, 59%)
HSB
hsb(287, 19%, 65%)
CMYK
cmyk(4%, 19%, 0%, 35%)
Oklch
oklch(65.4% 0.055 318.8)

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

#5F2E4B

Rose Purple · DarkSlateGray · Camellia

HEX
#5F2E4B
RGB
rgb(95, 46, 75)
HSL
hsl(324, 35%, 28%)
HSB
hsb(324, 52%, 37%)
CMYK
cmyk(0%, 52%, 21%, 63%)
Oklch
oklch(37.6% 0.081 345.2)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#281A27

Rose Purple · Black · Dark Purple

HEX
#281A27
RGB
rgb(40, 26, 39)
HSL
hsl(304, 21%, 13%)
HSB
hsb(304, 35%, 16%)
CMYK
cmyk(0%, 35%, 2%, 84%)
Oklch
oklch(24.1% 0.032 328.9)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF1C9
CFCAF1

Analogous

F1E2CA
ECF1C9
D9F1CA

Triadic

ECF1C9
CAEDF1
F1CAED

Split-Comp.

ECF1C9
CAD9F1
E2CAF1

Tetradic

ECF1C9
CAF1E2
CFCAF1
F1CAD9

Contrast Matrix WCAG 2.1 Contrast

ECF1C9
B9D1DD
9F86A6
5F2E4B
281A27
—
1.4
Fail
2.8
Fail
9.1
AAA
14.2
AAA
1.4
Fail
—
2.1
Fail
6.7
AA
10.4
AAA
2.8
Fail
2.1
Fail
—
3.3
AA Large
5.1
AA
9.1
AAA
6.7
AA
3.3
AA Large
—
1.6
Fail
14.2
AAA
10.4
AAA
5.1
AA
1.6
Fail
—
White BG
1.2Fail
1.6Fail
3.3AA Large
10.6AAA
16.6AAA
Black BG
18.0AAA
13.2AAA
6.4AA
2.0Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEED3
C3C4DA
94949E
4A4944
222224

Deuteranopia

EEEED5
C2C0D9
96989C
4D5042
232423

Tritanopia

ECDADC
BAD8D7
9E9897
5D3E3D
272121

Achromatopsia

EBEBEB
CBCBCB
919191
404040
202020

Shades & Tints Shades & Tints

#ECF1C9

Dark
Light

#B9D1DD

Dark
Light

#9F86A6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf1c9;
  --color-2: #b9d1dd;
  --color-3: #9f86a6;
  --color-4: #5f2e4b;
  --color-5: #281a27;
}

SCSS

$color-1: #ecf1c9;
$color-2: #b9d1dd;
$color-3: #9f86a6;
$color-4: #5f2e4b;
$color-5: #281a27;

TAILWIND

colors: {
  'brand-1': '#ecf1c9',
  'brand-2': '#b9d1dd',
  'brand-3': '#9f86a6',
  'brand-4': '#5f2e4b',
  'brand-5': '#281a27',
}

RGB Array

[236, 241, 201], [185, 209, 221], [159, 134, 166], [95, 46, 75], [40, 26, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECF1C9, #B9D1DD, #9F86A6, #5F2E4B, #281A27 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: #ecf1c9; --color-2: #b9d1dd; --color-3: #9f86a6; --color-4: #5f2e4b; --color-5: #281a27. 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