← Back to Editor

#3A2A20 · #4706D1 · #288A8F · #93D207 · #DE213D

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 App

Color Details Color Details

#3A2A20

Tangerine · DarkSlateGray · Cinnamon

HEX
#3A2A20
RGB
rgb(58, 42, 32)
HSL
hsl(23, 29%, 18%)
HSB
hsb(23, 45%, 23%)
CMYK
cmyk(0%, 28%, 45%, 77%)
Oklch
oklch(30.1% 0.030 53.3)

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

#4706D1

Deep Indigo · MediumBlue · Navy Blue

HEX
#4706D1
RGB
rgb(71, 6, 209)
HSL
hsl(259, 94%, 42%)
HSB
hsb(259, 97%, 82%)
CMYK
cmyk(66%, 97%, 0%, 18%)
Oklch
oklch(42.6% 0.253 280.9)

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

#288A8F

Lake Blue · Teal · Mint Ice

HEX
#288A8F
RGB
rgb(40, 138, 143)
HSL
hsl(183, 56%, 36%)
HSB
hsb(183, 72%, 56%)
CMYK
cmyk(72%, 3%, 0%, 44%)
Oklch
oklch(58.1% 0.087 200.1)

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

#93D207

Grass Green · Chartreuse · Olive Green

HEX
#93D207
RGB
rgb(147, 210, 7)
HSL
hsl(79, 94%, 43%)
HSB
hsb(79, 97%, 82%)
CMYK
cmyk(30%, 0%, 97%, 18%)
Oklch
oklch(79.1% 0.206 128.2)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#DE213D

Vermilion · Crimson · Passion Red

HEX
#DE213D
RGB
rgb(222, 33, 61)
HSL
hsl(351, 74%, 50%)
HSB
hsb(351, 85%, 87%)
CMYK
cmyk(0%, 85%, 73%, 13%)
Oklch
oklch(58.1% 0.218 21.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A2A20
21313B

Analogous

3B2124
3A2A20
3B3821

Triadic

3A2A20
213B2B
2B213B

Split-Comp.

3A2A20
213B38
21243B

Tetradic

3A2A20
243B21
21313B
38213B

Contrast Matrix WCAG 2.1 Contrast

3A2A20
4706D1
288A8F
93D207
DE213D
—
1.4
Fail
3.3
AA Large
7.5
AAA
2.9
Fail
1.4
Fail
—
2.3
Fail
5.2
AA
2.0
Fail
3.3
AA Large
2.3
Fail
—
2.2
Fail
1.2
Fail
7.5
AAA
5.2
AA
2.2
Fail
—
2.6
Fail
2.9
Fail
2.0
Fail
1.2
Fail
2.6
Fail
—
White BG
13.7AAA
9.5AAA
4.1AA Large
1.8Fail
4.8AA
Black BG
1.5Fail
2.2Fail
5.1AA
11.5AAA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

333322
2B2AA0
52538E
AEAF38
8C8A36

Deuteranopia

343523
2F3394
4D458E
ABA644
97A535

Tritanopia

392425
447971
2D8D8D
965F67
D53130

Achromatopsia

2E2E2E
313131
6D6D6D
A8A8A8
5D5D5D

Shades & Tints Shades & Tints

#3A2A20

Dark
Light

#4706D1

Dark
Light

#288A8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a2a20;
  --color-2: #4706d1;
  --color-3: #288a8f;
  --color-4: #93d207;
  --color-5: #de213d;
}

SCSS

$color-1: #3a2a20;
$color-2: #4706d1;
$color-3: #288a8f;
$color-4: #93d207;
$color-5: #de213d;

TAILWIND

colors: {
  'brand-1': '#3a2a20',
  'brand-2': '#4706d1',
  'brand-3': '#288a8f',
  'brand-4': '#93d207',
  'brand-5': '#de213d',
}

RGB Array

[58, 42, 32], [71, 6, 209], [40, 138, 143], [147, 210, 7], [222, 33, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3A2A20, #4706D1, #288A8F, #93D207, #DE213D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. 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: #3a2a20; --color-2: #4706d1; --color-3: #288a8f; --color-4: #93d207; --color-5: #de213d. 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. 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