← Back to Editor

#1F2C2E · #364345 · #605E65 · #A88AA3 · #E8C5E2

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

#1F2C2E

Slate Blue · DarkSlateGray · Peacock Green

HEX
#1F2C2E
RGB
rgb(31, 44, 46)
HSL
hsl(188, 19%, 15%)
HSB
hsb(188, 33%, 18%)
CMYK
cmyk(33%, 4%, 0%, 82%)
Oklch
oklch(28.2% 0.018 207.9)

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

#364345

Slate Blue · DarkSlateGray · Peacock Green

HEX
#364345
RGB
rgb(54, 67, 69)
HSL
hsl(188, 12%, 24%)
HSB
hsb(188, 22%, 27%)
CMYK
cmyk(22%, 3%, 0%, 73%)
Oklch
oklch(37.2% 0.017 207.8)

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

#605E65

Ink Gray · DimGray · Charcoal

HEX
#605E65
RGB
rgb(96, 94, 101)
HSL
hsl(257, 4%, 38%)
HSB
hsb(257, 7%, 40%)
CMYK
cmyk(5%, 7%, 0%, 60%)
Oklch
oklch(48.6% 0.011 299.0)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#A88AA3

Rose Purple · DarkGray · Violet

HEX
#A88AA3
RGB
rgb(168, 138, 163)
HSL
hsl(310, 15%, 60%)
HSB
hsb(310, 18%, 66%)
CMYK
cmyk(0%, 18%, 3%, 34%)
Oklch
oklch(66.9% 0.050 331.8)

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

#E8C5E2

Mauve · LightGray · Lavender

HEX
#E8C5E2
RGB
rgb(232, 197, 226)
HSL
hsl(310, 43%, 84%)
HSB
hsb(310, 15%, 91%)
CMYK
cmyk(0%, 15%, 3%, 9%)
Oklch
oklch(86.2% 0.055 331.8)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F2C2E
2E211F

Analogous

1F2E28
1F2C2E
1F242E

Triadic

1F2C2E
2E1F2C
2C2E1F

Split-Comp.

1F2C2E
2E1F24
2E281F

Tetradic

1F2C2E
281F2E
2E211F
242E1F

Contrast Matrix WCAG 2.1 Contrast

1F2C2E
364345
605E65
A88AA3
E8C5E2
—
1.4
Fail
2.3
Fail
4.7
AA
9.3
AAA
1.4
Fail
—
1.6
Fail
3.3
AA Large
6.6
AA
2.3
Fail
1.6
Fail
—
2.1
Fail
4.1
AA Large
4.7
AA
3.3
AA Large
2.1
Fail
—
2.0
Fail
9.3
AAA
6.6
AA
4.1
AA Large
2.0
Fail
—
White BG
14.4AAA
10.3AAA
6.4AA
3.1AA Large
1.6Fail
Black BG
1.5Fail
2.0Fail
3.3AA Large
6.8AA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

25252E
3C3C45
5F5F63
9B9B9D
D9D9DB

Deuteranopia

24232D
3B3A44
5F5F63
9D9F9C
DBDDD9

Tritanopia

202D2D
374444
606262
A79897
E6D5D4

Achromatopsia

282828
3F3F3F
5F5F5F
969696
D3D3D3

Shades & Tints Shades & Tints

#1F2C2E

Dark
Light

#364345

Dark
Light

#605E65

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f2c2e;
  --color-2: #364345;
  --color-3: #605e65;
  --color-4: #a88aa3;
  --color-5: #e8c5e2;
}

SCSS

$color-1: #1f2c2e;
$color-2: #364345;
$color-3: #605e65;
$color-4: #a88aa3;
$color-5: #e8c5e2;

TAILWIND

colors: {
  'brand-1': '#1f2c2e',
  'brand-2': '#364345',
  'brand-3': '#605e65',
  'brand-4': '#a88aa3',
  'brand-5': '#e8c5e2',
}

RGB Array

[31, 44, 46], [54, 67, 69], [96, 94, 101], [168, 138, 163], [232, 197, 226]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #1F2C2E, #364345, #605E65, #A88AA3, #E8C5E2 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: #1f2c2e; --color-2: #364345; --color-3: #605e65; --color-4: #a88aa3; --color-5: #e8c5e2. 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