← Back to Editor

#213435 · #46685B · #648A64 · #A6B985 · #E1E3AC

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#213435

Slate Blue · DarkSlateGray · Peacock Green

HEX
#213435
RGB
rgb(33, 52, 53)
HSL
hsl(183, 23%, 17%)
HSB
hsb(183, 38%, 21%)
CMYK
cmyk(38%, 2%, 0%, 79%)
Oklch
oklch(30.9% 0.025 200.1)

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

#46685B

Mineral Blue · DarkSlateGray · Forest Green

HEX
#46685B
RGB
rgb(70, 104, 91)
HSL
hsl(157, 20%, 34%)
HSB
hsb(157, 33%, 41%)
CMYK
cmyk(33%, 0%, 12%, 59%)
Oklch
oklch(48.7% 0.045 168.6)

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

#648A64

Celadon · DimGray · Olive Green

HEX
#648A64
RGB
rgb(100, 138, 100)
HSL
hsl(120, 16%, 47%)
HSB
hsb(120, 28%, 54%)
CMYK
cmyk(28%, 0%, 28%, 46%)
Oklch
oklch(59.4% 0.071 144.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#A6B985

Willow Green · DarkSeaGreen · Apple Green

HEX
#A6B985
RGB
rgb(166, 185, 133)
HSL
hsl(82, 27%, 62%)
HSB
hsb(82, 28%, 73%)
CMYK
cmyk(10%, 0%, 28%, 27%)
Oklch
oklch(75.8% 0.074 124.4)

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

#E1E3AC

Fresh Green · Wheat · Lemon Cream

HEX
#E1E3AC
RGB
rgb(225, 227, 172)
HSL
hsl(62, 50%, 78%)
HSB
hsb(62, 24%, 89%)
CMYK
cmyk(1%, 0%, 24%, 11%)
Oklch
oklch(90.1% 0.072 109.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

213435
352221

Analogous

21352C
213435
212A35

Triadic

213435
352134
343521

Split-Comp.

213435
35212A
352C21

Tetradic

213435
2C2135
352221
2A3521

Contrast Matrix WCAG 2.1 Contrast

213435
46685B
648A64
A6B985
E1E3AC
—
2.1
Fail
3.3
AA Large
6.2
AA
9.8
AAA
2.1
Fail
—
1.6
Fail
2.9
Fail
4.7
AA
3.3
AA Large
1.6
Fail
—
1.8
Fail
2.9
Fail
6.2
AA
2.9
Fail
1.8
Fail
—
1.6
Fail
9.8
AAA
4.7
AA
2.9
Fail
1.6
Fail
—
White BG
13.1AAA
6.2AA
3.9AA Large
2.1Fail
1.3Fail
Black BG
1.6Fail
3.4AA Large
5.4AA
9.9AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

292935
55555E
74756D
AEAE92
E2E2B9

Deuteranopia

282735
53505F
726F6F
ADAC95
E2E2BD

Tritanopia

223535
486161
667476
A79C9E
E1C4C6

Achromatopsia

2E2E2E
5C5C5C
7A7A7A
ADADAD
DCDCDC

Shades & Tints Shades & Tints

#213435

Dark
Light

#46685B

Dark
Light

#648A64

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #213435;
  --color-2: #46685b;
  --color-3: #648a64;
  --color-4: #a6b985;
  --color-5: #e1e3ac;
}

SCSS

$color-1: #213435;
$color-2: #46685b;
$color-3: #648a64;
$color-4: #a6b985;
$color-5: #e1e3ac;

TAILWIND

colors: {
  'brand-1': '#213435',
  'brand-2': '#46685b',
  'brand-3': '#648a64',
  'brand-4': '#a6b985',
  'brand-5': '#e1e3ac',
}

RGB Array

[33, 52, 53], [70, 104, 91], [100, 138, 100], [166, 185, 133], [225, 227, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #213435, #46685B, #648A64, #A6B985, #E1E3AC is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #213435; --color-2: #46685b; --color-3: #648a64; --color-4: #a6b985; --color-5: #e1e3ac. 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. Restrained colors convey professionalism and trust. 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