← Back to Editor

#30505C · #D8E5C9 · #D9C785 · #D2936A · #CE554A

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

#30505C

Slate Blue · DarkSlateGray · Mint Ice

HEX
#30505C
RGB
rgb(48, 80, 92)
HSL
hsl(196, 31%, 27%)
HSB
hsb(196, 48%, 36%)
CMYK
cmyk(48%, 13%, 0%, 64%)
Oklch
oklch(41.2% 0.043 223.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#D8E5C9

Willow Green · LightGray · Mint Green

HEX
#D8E5C9
RGB
rgb(216, 229, 201)
HSL
hsl(88, 35%, 84%)
HSB
hsb(88, 12%, 90%)
CMYK
cmyk(6%, 0%, 12%, 10%)
Oklch
oklch(90.5% 0.040 127.6)

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

#D9C785

Ginger · BurlyWood · Sunflower

HEX
#D9C785
RGB
rgb(217, 199, 133)
HSL
hsl(47, 53%, 69%)
HSB
hsb(47, 39%, 85%)
CMYK
cmyk(0%, 8%, 39%, 15%)
Oklch
oklch(83.0% 0.087 94.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D2936A

Apricot · DarkSalmon · Warm Sun

HEX
#D2936A
RGB
rgb(210, 147, 106)
HSL
hsl(24, 54%, 62%)
HSB
hsb(24, 50%, 82%)
CMYK
cmyk(0%, 30%, 50%, 18%)
Oklch
oklch(71.6% 0.094 53.7)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#CE554A

Crimson · Chocolate · Passion Red

HEX
#CE554A
RGB
rgb(206, 85, 74)
HSL
hsl(5, 57%, 55%)
HSB
hsb(5, 64%, 81%)
CMYK
cmyk(0%, 59%, 64%, 19%)
Oklch
oklch(60.4% 0.156 27.8)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

30505C
5A3B30

Analogous

305A50
30505C
30395A

Triadic

30505C
5A304F
4F5A30

Split-Comp.

30505C
5A3039
5A5030

Tetradic

30505C
50305A
5A3B30
395A30

Contrast Matrix WCAG 2.1 Contrast

30505C
D8E5C9
D9C785
D2936A
CE554A
—
6.6
AA
5.1
AA
3.3
AA Large
2.1
Fail
6.6
AA
—
1.3
Fail
2.0
Fail
3.2
AA Large
5.1
AA
1.3
Fail
—
1.5
Fail
2.5
Fail
3.3
AA Large
2.0
Fail
1.5
Fail
—
1.6
Fail
2.1
Fail
3.2
AA Large
2.5
Fail
1.6
Fail
—
White BG
8.7AAA
1.3Fail
1.7Fail
2.6Fail
4.2AA Large
Black BG
2.4Fail
16.0AAA
12.5AAA
8.1AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E59
DEDED0
D1D195
B7B674
9A994D

Deuteranopia

3C3A58
DDDCD1
D2D499
BABF76
A1AA4D

Tritanopia

325756
D9D5D6
D8A2A4
CF7C7D
C84F4F

Achromatopsia

484848
DEDEDE
C5C5C5
A1A1A1
787878

Shades & Tints Shades & Tints

#30505C

Dark
Light

#D8E5C9

Dark
Light

#D9C785

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #30505c;
  --color-2: #d8e5c9;
  --color-3: #d9c785;
  --color-4: #d2936a;
  --color-5: #ce554a;
}

SCSS

$color-1: #30505c;
$color-2: #d8e5c9;
$color-3: #d9c785;
$color-4: #d2936a;
$color-5: #ce554a;

TAILWIND

colors: {
  'brand-1': '#30505c',
  'brand-2': '#d8e5c9',
  'brand-3': '#d9c785',
  'brand-4': '#d2936a',
  'brand-5': '#ce554a',
}

RGB Array

[48, 80, 92], [216, 229, 201], [217, 199, 133], [210, 147, 106], [206, 85, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #30505C, #D8E5C9, #D9C785, #D2936A, #CE554A 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: #30505c; --color-2: #d8e5c9; --color-3: #d9c785; --color-4: #d2936a; --color-5: #ce554a. 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