← Back to Editor

#D3F1E1 · #C3BBC1 · #A77792 · #20061C · #D96EDA

warm

A 5-color warm 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

#D3F1E1

Emerald · LightGray · Mint Green

HEX
#D3F1E1
RGB
rgb(211, 241, 225)
HSL
hsl(148, 52%, 89%)
HSB
hsb(148, 12%, 95%)
CMYK
cmyk(12%, 0%, 7%, 5%)
Oklch
oklch(93.2% 0.038 162.4)

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

#C3BBC1

Silver Gray · Silver · Pearl Gray

HEX
#C3BBC1
RGB
rgb(195, 187, 193)
HSL
hsl(315, 6%, 75%)
HSB
hsb(315, 4%, 76%)
CMYK
cmyk(0%, 4%, 1%, 24%)
Oklch
oklch(80.0% 0.012 334.1)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#A77792

Rose Purple · Gray · Rose Pink

HEX
#A77792
RGB
rgb(167, 119, 146)
HSL
hsl(326, 21%, 56%)
HSB
hsb(326, 29%, 65%)
CMYK
cmyk(0%, 29%, 13%, 35%)
Oklch
oklch(62.6% 0.070 344.5)

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

#20061C

Rose Purple · Black · Dark Purple

HEX
#20061C
RGB
rgb(32, 6, 28)
HSL
hsl(309, 68%, 7%)
HSB
hsb(309, 81%, 13%)
CMYK
cmyk(0%, 81%, 12%, 87%)
Oklch
oklch(18.1% 0.058 334.1)

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

#D96EDA

Lilac · Orchid · Lilac Purple

HEX
#D96EDA
RGB
rgb(217, 110, 218)
HSL
hsl(299, 59%, 64%)
HSB
hsb(299, 50%, 85%)
CMYK
cmyk(0%, 50%, 0%, 15%)
Oklch
oklch(70.0% 0.187 327.0)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3F1E1
F2D4E4

Analogous

D5F2D4
D3F1E1
D4F2F1

Triadic

D3F1E1
E2D4F2
F2E2D4

Split-Comp.

D3F1E1
F1D4F2
F2D4D5

Tetradic

D3F1E1
D4D5F2
F2D4E4
F2F1D4

Contrast Matrix WCAG 2.1 Contrast

D3F1E1
C3BBC1
A77792
20061C
D96EDA
—
1.6
Fail
3.1
AA Large
15.8
AAA
2.4
Fail
1.6
Fail
—
2.0
Fail
10.1
AAA
1.6
Fail
3.1
AA Large
2.0
Fail
—
5.2
AA
1.3
Fail
15.8
AAA
10.1
AAA
5.2
AA
—
6.5
AA
2.4
Fail
1.6
Fail
1.3
Fail
6.5
AA
—
White BG
1.2Fail
1.9Fail
3.7AA Large
19.0AAA
2.9Fail
Black BG
17.4AAA
11.2AAA
5.7AA
1.1Fail
7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0E5
C0BFC0
92928B
151517
ABAAC0

Deuteranopia

DEDCE6
C0C1BF
95998A
161815
B1B9BA

Tritanopia

D5E8E9
C3BEBE
A58685
1F1212
D4ABA7

Achromatopsia

E6E6E6
BEBEBE
888888
101010
9A9A9A

Shades & Tints Shades & Tints

#D3F1E1

Dark
Light

#C3BBC1

Dark
Light

#A77792

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3f1e1;
  --color-2: #c3bbc1;
  --color-3: #a77792;
  --color-4: #20061c;
  --color-5: #d96eda;
}

SCSS

$color-1: #d3f1e1;
$color-2: #c3bbc1;
$color-3: #a77792;
$color-4: #20061c;
$color-5: #d96eda;

TAILWIND

colors: {
  'brand-1': '#d3f1e1',
  'brand-2': '#c3bbc1',
  'brand-3': '#a77792',
  'brand-4': '#20061c',
  'brand-5': '#d96eda',
}

RGB Array

[211, 241, 225], [195, 187, 193], [167, 119, 146], [32, 6, 28], [217, 110, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #D3F1E1, #C3BBC1, #A77792, #20061C, #D96EDA 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: #d3f1e1; --color-2: #c3bbc1; --color-3: #a77792; --color-4: #20061c; --color-5: #d96eda. 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 warm-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