← Back to Editor

#18111D · #B4E0C8 · #EDFBCD · #CFD3A3 · #EB736F

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#18111D

Dark Plum · Black · Dark Purple

HEX
#18111D
RGB
rgb(24, 17, 29)
HSL
hsl(275, 26%, 9%)
HSB
hsb(275, 41%, 11%)
CMYK
cmyk(17%, 41%, 0%, 89%)
Oklch
oklch(19.2% 0.026 310.6)

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

#B4E0C8

Celadon · LightBlue · Apple Green

HEX
#B4E0C8
RGB
rgb(180, 224, 200)
HSL
hsl(147, 42%, 79%)
HSB
hsb(147, 20%, 88%)
CMYK
cmyk(20%, 0%, 11%, 12%)
Oklch
oklch(86.9% 0.057 161.1)

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

#EDFBCD

Willow Green · Beige · Mint Green

HEX
#EDFBCD
RGB
rgb(237, 251, 205)
HSL
hsl(78, 85%, 89%)
HSB
hsb(78, 18%, 98%)
CMYK
cmyk(6%, 0%, 18%, 2%)
Oklch
oklch(96.6% 0.062 121.3)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#CFD3A3

Fresh Green · Silver · Sunflower

HEX
#CFD3A3
RGB
rgb(207, 211, 163)
HSL
hsl(65, 35%, 73%)
HSB
hsb(65, 23%, 83%)
CMYK
cmyk(2%, 0%, 23%, 17%)
Oklch
oklch(85.2% 0.064 111.6)

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

#EB736F

Peach Pink · Salmon · Coral Red

HEX
#EB736F
RGB
rgb(235, 115, 111)
HSL
hsl(2, 76%, 68%)
HSB
hsb(2, 53%, 92%)
CMYK
cmyk(0%, 51%, 53%, 8%)
Oklch
oklch(69.5% 0.149 23.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

18111D
161D11

Analogous

12111D
18111D
1D111C

Triadic

18111D
1D1811
111D18

Split-Comp.

18111D
1C1D11
111D12

Tetradic

18111D
1D1211
161D11
111C1D

Contrast Matrix WCAG 2.1 Contrast

18111D
B4E0C8
EDFBCD
CFD3A3
EB736F
—
12.7
AAA
17.0
AAA
11.9
AAA
6.3
AA
12.7
AAA
—
1.3
Fail
1.1
Fail
2.0
Fail
17.0
AAA
1.3
Fail
—
1.4
Fail
2.7
Fail
11.9
AAA
1.1
Fail
1.4
Fail
—
1.9
Fail
6.3
AA
2.0
Fail
2.7
Fail
1.9
Fail
—
White BG
18.5AAA
1.5Fail
1.1Fail
1.6Fail
2.9Fail
Black BG
1.1Fail
14.4AAA
19.3AAA
13.5AAA
7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

15151A
C7C7CE
F3F3D8
D1D1AF
B7B670

Deuteranopia

151619
C5C1CF
F2F1DB
D1D0B1
BEC770

Tritanopia

181817
B6D2D3
EEE1E3
CFB8BA
E57171

Achromatopsia

141414
D0D0D0
F2F2F2
CCCCCC
969696

Shades & Tints Shades & Tints

#18111D

Dark
Light

#B4E0C8

Dark
Light

#EDFBCD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #18111d;
  --color-2: #b4e0c8;
  --color-3: #edfbcd;
  --color-4: #cfd3a3;
  --color-5: #eb736f;
}

SCSS

$color-1: #18111d;
$color-2: #b4e0c8;
$color-3: #edfbcd;
$color-4: #cfd3a3;
$color-5: #eb736f;

TAILWIND

colors: {
  'brand-1': '#18111d',
  'brand-2': '#b4e0c8',
  'brand-3': '#edfbcd',
  'brand-4': '#cfd3a3',
  'brand-5': '#eb736f',
}

RGB Array

[24, 17, 29], [180, 224, 200], [237, 251, 205], [207, 211, 163], [235, 115, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #18111D, #B4E0C8, #EDFBCD, #CFD3A3, #EB736F 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: #18111d; --color-2: #b4e0c8; --color-3: #edfbcd; --color-4: #cfd3a3; --color-5: #eb736f. 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