← Back to Editor

#683B33 · #F23033 · #E8593C · #E5893F · #D8B06D

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#683B33

Crimson · DarkOliveGreen · Wine Red

HEX
#683B33
RGB
rgb(104, 59, 51)
HSL
hsl(9, 34%, 30%)
HSB
hsb(9, 51%, 41%)
CMYK
cmyk(0%, 43%, 51%, 59%)
Oklch
oklch(40.5% 0.066 30.9)

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

#F23033

Vermilion · Crimson · Passion Red

HEX
#F23033
RGB
rgb(242, 48, 51)
HSL
hsl(359, 88%, 57%)
HSB
hsb(359, 80%, 95%)
CMYK
cmyk(0%, 80%, 79%, 5%)
Oklch
oklch(62.4% 0.227 26.3)

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

#E8593C

Vermilion · Tomato · Passion Red

HEX
#E8593C
RGB
rgb(232, 89, 60)
HSL
hsl(10, 79%, 57%)
HSB
hsb(10, 74%, 91%)
CMYK
cmyk(0%, 62%, 74%, 9%)
Oklch
oklch(64.7% 0.183 33.3)

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

#E5893F

Tangerine · Coral · Warm Sun

HEX
#E5893F
RGB
rgb(229, 137, 63)
HSL
hsl(27, 76%, 57%)
HSB
hsb(27, 72%, 90%)
CMYK
cmyk(0%, 40%, 72%, 10%)
Oklch
oklch(71.5% 0.142 56.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D8B06D

Ginger · BurlyWood · Warm Sun

HEX
#D8B06D
RGB
rgb(216, 176, 109)
HSL
hsl(38, 58%, 64%)
HSB
hsb(38, 50%, 85%)
CMYK
cmyk(0%, 19%, 50%, 15%)
Oklch
oklch(77.8% 0.097 79.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

683B33
325F67

Analogous

673245
683B33
675432

Triadic

683B33
32673A
3A3267

Split-Comp.

683B33
326754
324567

Tetradic

683B33
456732
325F67
543267

Contrast Matrix WCAG 2.1 Contrast

683B33
F23033
E8593C
E5893F
D8B06D
—
2.3
Fail
2.6
Fail
3.5
AA Large
4.6
AA
2.3
Fail
—
1.1
Fail
1.5
Fail
2.0
Fail
2.6
Fail
1.1
Fail
—
1.3
Fail
1.7
Fail
3.5
AA Large
1.5
Fail
1.3
Fail
—
1.3
Fail
4.6
AA
2.0
Fail
1.7
Fail
1.3
Fail
—
White BG
9.3AAA
4.0AA Large
3.5AA Large
2.6Fail
2.0Fail
Black BG
2.3Fail
5.2AA
5.9AA
8.0AAA
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

555435
9E9C32
AAA943
BDBC51
C7C67D

Deuteranopia

575B35
A9B832
B2BD45
C3C955
C9CC81

Tritanopia

663637
E83232
E1494A
E05F62
D68A8D

Achromatopsia

484848
6A6A6A
808080
9C9C9C
B4B4B4

Shades & Tints Shades & Tints

#683B33

Dark
Light

#F23033

Dark
Light

#E8593C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #683b33;
  --color-2: #f23033;
  --color-3: #e8593c;
  --color-4: #e5893f;
  --color-5: #d8b06d;
}

SCSS

$color-1: #683b33;
$color-2: #f23033;
$color-3: #e8593c;
$color-4: #e5893f;
$color-5: #d8b06d;

TAILWIND

colors: {
  'brand-1': '#683b33',
  'brand-2': '#f23033',
  'brand-3': '#e8593c',
  'brand-4': '#e5893f',
  'brand-5': '#d8b06d',
}

RGB Array

[104, 59, 51], [242, 48, 51], [232, 89, 60], [229, 137, 63], [216, 176, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #683B33, #F23033, #E8593C, #E5893F, #D8B06D is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #683b33; --color-2: #f23033; --color-3: #e8593c; --color-4: #e5893f; --color-5: #d8b06d. 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. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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