← Back to Editor

#331900 · #8E6110 · #EC131E · #108692 · #D7C9AE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#331900

Tangerine · Black · Cinnamon

HEX
#331900
RGB
rgb(51, 25, 0)
HSL
hsl(29, 100%, 10%)
HSB
hsb(29, 100%, 20%)
CMYK
cmyk(0%, 51%, 100%, 80%)
Oklch
oklch(24.5% 0.056 61.8)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#8E6110

Ochre · Sienna · Amber Brown

HEX
#8E6110
RGB
rgb(142, 97, 16)
HSL
hsl(39, 80%, 31%)
HSB
hsb(39, 89%, 56%)
CMYK
cmyk(0%, 32%, 89%, 44%)
Oklch
oklch(52.8% 0.106 75.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#EC131E

Vermilion · Crimson · Passion Red

HEX
#EC131E
RGB
rgb(236, 19, 30)
HSL
hsl(357, 85%, 50%)
HSB
hsb(357, 92%, 93%)
CMYK
cmyk(0%, 92%, 87%, 7%)
Oklch
oklch(59.8% 0.237 27.3)

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

#108692

Lake Blue · Teal · Mint Ice

HEX
#108692
RGB
rgb(16, 134, 146)
HSL
hsl(186, 80%, 32%)
HSB
hsb(186, 89%, 57%)
CMYK
cmyk(89%, 8%, 0%, 43%)
Oklch
oklch(56.8% 0.094 206.2)

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

#D7C9AE

Goose Yellow · Silver · Lemon Cream

HEX
#D7C9AE
RGB
rgb(215, 201, 174)
HSL
hsl(40, 34%, 76%)
HSB
hsb(40, 19%, 84%)
CMYK
cmyk(0%, 7%, 19%, 16%)
Oklch
oklch(84.0% 0.040 83.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

331900
001A33

Analogous

330001
331900
333200

Triadic

331900
003319
190033

Split-Comp.

331900
003332
000133

Tetradic

331900
013300
001A33
320033

Contrast Matrix WCAG 2.1 Contrast

331900
8E6110
EC131E
108692
D7C9AE
—
3.0
AA Large
3.7
AA Large
3.8
AA Large
10.0
AAA
3.0
AA Large
—
1.2
Fail
1.3
Fail
3.3
AA Large
3.7
AA Large
1.2
Fail
—
1.0
Fail
2.7
Fail
3.8
AA Large
1.3
Fail
1.0
Fail
—
2.7
Fail
10.0
AAA
3.3
AA Large
2.7
Fail
2.7
Fail
—
White BG
16.4AAA
5.4AA
4.5AA Large
4.3AA Large
1.6Fail
Black BG
1.3Fail
3.9AA Large
4.7AA
4.8AA
12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

282806
7B7A24
8E8C1B
43448F
D1D1B5

Deuteranopia

292B08
7D8128
9BAB1B
3C338E
D2D3B6

Tritanopia

320B0C
8C3336
E11919
168D8C
D6BABB

Achromatopsia

1E1E1E
656565
555555
646464
CACACA

Shades & Tints Shades & Tints

#331900

Dark
Light

#8E6110

Dark
Light

#EC131E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #331900;
  --color-2: #8e6110;
  --color-3: #ec131e;
  --color-4: #108692;
  --color-5: #d7c9ae;
}

SCSS

$color-1: #331900;
$color-2: #8e6110;
$color-3: #ec131e;
$color-4: #108692;
$color-5: #d7c9ae;

TAILWIND

colors: {
  'brand-1': '#331900',
  'brand-2': '#8e6110',
  'brand-3': '#ec131e',
  'brand-4': '#108692',
  'brand-5': '#d7c9ae',
}

RGB Array

[51, 25, 0], [142, 97, 16], [236, 19, 30], [16, 134, 146], [215, 201, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #331900, #8E6110, #EC131E, #108692, #D7C9AE is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #331900; --color-2: #8e6110; --color-3: #ec131e; --color-4: #108692; --color-5: #d7c9ae. 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 general-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