← Back to Editor

#ED552B · #683829 · #30282F · #1A2526 · #0C1117

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

#ED552B

Vermilion · Chocolate · Passion Red

HEX
#ED552B
RGB
rgb(237, 85, 43)
HSL
hsl(13, 84%, 55%)
HSB
hsb(13, 82%, 93%)
CMYK
cmyk(0%, 64%, 82%, 7%)
Oklch
oklch(64.9% 0.195 35.8)

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

#683829

Crimson · DarkOliveGreen · Wine Red

HEX
#683829
RGB
rgb(104, 56, 41)
HSL
hsl(14, 43%, 28%)
HSB
hsb(14, 61%, 41%)
CMYK
cmyk(0%, 46%, 61%, 59%)
Oklch
oklch(39.7% 0.073 38.1)

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

#30282F

Rose Purple · DarkSlateGray · Dark Stone

HEX
#30282F
RGB
rgb(48, 40, 47)
HSL
hsl(308, 9%, 17%)
HSB
hsb(308, 17%, 19%)
CMYK
cmyk(0%, 17%, 2%, 81%)
Oklch
oklch(28.8% 0.017 330.1)

Traditional「Rose Purple」· Paint「Dark Stone」· Creative Midnight Shadow

#1A2526

Slate Blue · Black · Peacock Green

HEX
#1A2526
RGB
rgb(26, 37, 38)
HSL
hsl(185, 19%, 13%)
HSB
hsb(185, 32%, 15%)
CMYK
cmyk(32%, 3%, 0%, 85%)
Oklch
oklch(25.5% 0.015 203.2)

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

#0C1117

Indigo · Black · Deep Sea Blue

HEX
#0C1117
RGB
rgb(12, 17, 23)
HSL
hsl(213, 31%, 7%)
HSB
hsb(213, 48%, 9%)
CMYK
cmyk(48%, 26%, 0%, 91%)
Oklch
oklch(17.5% 0.015 253.2)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ED552B
2CC3ED

Analogous

ED2C62
ED552B
EDB62C

Triadic

ED552B
2CED56
562CED

Split-Comp.

ED552B
2CEDB6
2C62ED

Tetradic

ED552B
62ED2C
2CC3ED
B62CED

Contrast Matrix WCAG 2.1 Contrast

ED552B
683829
30282F
1A2526
0C1117
—
2.7
Fail
4.0
AA Large
4.4
AA Large
5.4
AA
2.7
Fail
—
1.5
Fail
1.6
Fail
2.0
Fail
4.0
AA Large
1.5
Fail
—
1.1
Fail
1.3
Fail
4.4
AA Large
1.6
Fail
1.1
Fail
—
1.2
Fail
5.4
AA
2.0
Fail
1.3
Fail
1.2
Fail
—
White BG
3.5AA Large
9.6AAA
14.3AAA
15.7AAA
18.9AAA
Black BG
5.9AA
2.2Fail
1.5Fail
1.3Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABAA35
53532D
2D2C2D
1F1F26
0E0E16

Deuteranopia

B4BF38
565A2E
2D2E2D
1E1D26
0E0D15

Tritanopia

E53D3F
662F30
302C2C
1B2626
0C1414

Achromatopsia

7E7E7E
454545
2B2B2B
222222
101010

Shades & Tints Shades & Tints

#ED552B

Dark
Light

#683829

Dark
Light

#30282F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ed552b;
  --color-2: #683829;
  --color-3: #30282f;
  --color-4: #1a2526;
  --color-5: #0c1117;
}

SCSS

$color-1: #ed552b;
$color-2: #683829;
$color-3: #30282f;
$color-4: #1a2526;
$color-5: #0c1117;

TAILWIND

colors: {
  'brand-1': '#ed552b',
  'brand-2': '#683829',
  'brand-3': '#30282f',
  'brand-4': '#1a2526',
  'brand-5': '#0c1117',
}

RGB Array

[237, 85, 43], [104, 56, 41], [48, 40, 47], [26, 37, 38], [12, 17, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #ED552B, #683829, #30282F, #1A2526, #0C1117 is ideal for: tech websites, dark mode UIs, game UIs, 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: #ed552b; --color-2: #683829; --color-3: #30282f; --color-4: #1a2526; --color-5: #0c1117. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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