← Back to Editor

#111B20 · #B0DDD5 · #EEEEE0 · #C09EA4 · #3C1B2B

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

#111B20

Slate Blue · Black · Deep Sea Blue

HEX
#111B20
RGB
rgb(17, 27, 32)
HSL
hsl(200, 31%, 10%)
HSB
hsb(200, 47%, 13%)
CMYK
cmyk(47%, 16%, 0%, 87%)
Oklch
oklch(21.5% 0.018 230.2)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#B0DDD5

Jade · LightBlue · Glacier Blue

HEX
#B0DDD5
RGB
rgb(176, 221, 213)
HSL
hsl(169, 40%, 78%)
HSB
hsb(169, 20%, 87%)
CMYK
cmyk(20%, 0%, 4%, 13%)
Oklch
oklch(86.4% 0.048 183.1)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#EEEEE0

Fresh Green · Beige · Lemon Cream

HEX
#EEEEE0
RGB
rgb(238, 238, 224)
HSL
hsl(60, 29%, 91%)
HSB
hsb(60, 6%, 93%)
CMYK
cmyk(0%, 0%, 6%, 7%)
Oklch
oklch(94.5% 0.019 106.7)

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

#C09EA4

Peach Pink · DarkGray · Coral Red

HEX
#C09EA4
RGB
rgb(192, 158, 164)
HSL
hsl(349, 21%, 69%)
HSB
hsb(349, 18%, 75%)
CMYK
cmyk(0%, 18%, 15%, 25%)
Oklch
oklch(73.2% 0.041 6.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#3C1B2B

Dark Violet · DarkSlateGray · Raspberry

HEX
#3C1B2B
RGB
rgb(60, 27, 43)
HSL
hsl(331, 38%, 17%)
HSB
hsb(331, 55%, 24%)
CMYK
cmyk(0%, 55%, 28%, 76%)
Oklch
oklch(27.5% 0.056 351.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

111B20
211712

Analogous

12211F
111B20
121421

Triadic

111B20
21121C
1C2112

Split-Comp.

111B20
211214
211F12

Tetradic

111B20
1F1221
211712
142112

Contrast Matrix WCAG 2.1 Contrast

111B20
B0DDD5
EEEEE0
C09EA4
3C1B2B
—
11.8
AAA
14.9
AAA
7.2
AAA
1.2
Fail
11.8
AAA
—
1.3
Fail
1.6
Fail
10.2
AAA
14.9
AAA
1.3
Fail
—
2.1
Fail
13.0
AAA
7.2
AAA
1.6
Fail
2.1
Fail
—
6.3
AA
1.2
Fail
10.2
AAA
13.0
AAA
6.3
AA
—
White BG
17.5AAA
1.5Fail
1.2Fail
2.4Fail
15.2AAA
Black BG
1.2Fail
14.1AAA
17.9AAA
8.7AAA
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

15151F
C3C4D7
EEEEE3
B1B1A3
2E2D27

Deuteranopia

15141F
C1BED7
EEEEE4
B3B6A2
303226

Tritanopia

121E1E
B2D8D9
EEE6E7
BEA1A1
3A2423

Achromatopsia

191919
CFCFCF
ECECEC
A9A9A9
272727

Shades & Tints Shades & Tints

#111B20

Dark
Light

#B0DDD5

Dark
Light

#EEEEE0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #111b20;
  --color-2: #b0ddd5;
  --color-3: #eeeee0;
  --color-4: #c09ea4;
  --color-5: #3c1b2b;
}

SCSS

$color-1: #111b20;
$color-2: #b0ddd5;
$color-3: #eeeee0;
$color-4: #c09ea4;
$color-5: #3c1b2b;

TAILWIND

colors: {
  'brand-1': '#111b20',
  'brand-2': '#b0ddd5',
  'brand-3': '#eeeee0',
  'brand-4': '#c09ea4',
  'brand-5': '#3c1b2b',
}

RGB Array

[17, 27, 32], [176, 221, 213], [238, 238, 224], [192, 158, 164], [60, 27, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #111B20, #B0DDD5, #EEEEE0, #C09EA4, #3C1B2B 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: #111b20; --color-2: #b0ddd5; --color-3: #eeeee0; --color-4: #c09ea4; --color-5: #3c1b2b. 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