← Back to Editor

#2A3434 · #D9A02D · #ECE4CB · #86BAAA · #63A699

warm

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

#2A3434

Slate Blue · DarkSlateGray · Peacock Green

HEX
#2A3434
RGB
rgb(42, 52, 52)
HSL
hsl(180, 11%, 18%)
HSB
hsb(180, 19%, 20%)
CMYK
cmyk(19%, 0%, 0%, 80%)
Oklch
oklch(31.6% 0.014 196.5)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#D9A02D

Ginger · GoldenRod · Sunflower

HEX
#D9A02D
RGB
rgb(217, 160, 45)
HSL
hsl(40, 69%, 51%)
HSB
hsb(40, 79%, 85%)
CMYK
cmyk(0%, 26%, 79%, 15%)
Oklch
oklch(74.1% 0.140 80.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#ECE4CB

Goose Yellow · Bisque · Lemon Cream

HEX
#ECE4CB
RGB
rgb(236, 228, 203)
HSL
hsl(45, 46%, 86%)
HSB
hsb(45, 14%, 93%)
CMYK
cmyk(0%, 3%, 14%, 7%)
Oklch
oklch(91.9% 0.034 92.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#86BAAA

Jade · DarkSeaGreen · Lake Green

HEX
#86BAAA
RGB
rgb(134, 186, 170)
HSL
hsl(162, 27%, 63%)
HSB
hsb(162, 28%, 73%)
CMYK
cmyk(28%, 0%, 9%, 27%)
Oklch
oklch(74.8% 0.059 173.6)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#63A699

Mineral Blue · CadetBlue · Lake Green

HEX
#63A699
RGB
rgb(99, 166, 153)
HSL
hsl(168, 27%, 52%)
HSB
hsb(168, 40%, 65%)
CMYK
cmyk(40%, 0%, 8%, 35%)
Oklch
oklch(67.7% 0.071 180.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A3434
332929

Analogous

29332E
2A3434
292E33

Triadic

2A3434
332933
333329

Split-Comp.

2A3434
33292E
332E29

Tetradic

2A3434
2E2933
332929
2E3329

Contrast Matrix WCAG 2.1 Contrast

2A3434
D9A02D
ECE4CB
86BAAA
63A699
—
5.5
AA
10.1
AAA
5.9
AA
4.5
AA
5.5
AA
—
1.8
Fail
1.1
Fail
1.2
Fail
10.1
AAA
1.8
Fail
—
1.7
Fail
2.2
Fail
5.9
AA
1.1
Fail
1.7
Fail
—
1.3
Fail
4.5
AA
1.2
Fail
2.2
Fail
1.3
Fail
—
White BG
12.8AAA
2.3Fail
1.3Fail
2.2Fail
2.8Fail
Black BG
1.6Fail
9.0AAA
16.5AAA
9.6AAA
7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E34
C0C049
E9E8D1
9D9DAE
80819C

Deuteranopia

2E2D34
C4C850
E9EAD3
9A96AF
7C779D

Tritanopia

2B3434
D65F64
ECD6D7
89B1B2
669F9F

Achromatopsia

313131
A4A4A4
E4E4E4
A9A9A9
909090

Shades & Tints Shades & Tints

#2A3434

Dark
Light

#D9A02D

Dark
Light

#ECE4CB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a3434;
  --color-2: #d9a02d;
  --color-3: #ece4cb;
  --color-4: #86baaa;
  --color-5: #63a699;
}

SCSS

$color-1: #2a3434;
$color-2: #d9a02d;
$color-3: #ece4cb;
$color-4: #86baaa;
$color-5: #63a699;

TAILWIND

colors: {
  'brand-1': '#2a3434',
  'brand-2': '#d9a02d',
  'brand-3': '#ece4cb',
  'brand-4': '#86baaa',
  'brand-5': '#63a699',
}

RGB Array

[42, 52, 52], [217, 160, 45], [236, 228, 203], [134, 186, 170], [99, 166, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #2A3434, #D9A02D, #ECE4CB, #86BAAA, #63A699 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: #2a3434; --color-2: #d9a02d; --color-3: #ece4cb; --color-4: #86baaa; --color-5: #63a699. 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