← Back to Editor

#3B2009 · #BB0060 · #D64D2B · #FFBA3A · #CDFF18

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#3B2009

Tangerine · Black · Cinnamon

HEX
#3B2009
RGB
rgb(59, 32, 9)
HSL
hsl(28, 74%, 13%)
HSB
hsb(28, 85%, 23%)
CMYK
cmyk(0%, 46%, 85%, 77%)
Oklch
oklch(27.5% 0.054 57.8)

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

#BB0060

Rose Purple · MediumVioletRed · Camellia

HEX
#BB0060
RGB
rgb(187, 0, 96)
HSL
hsl(329, 100%, 37%)
HSB
hsb(329, 100%, 73%)
CMYK
cmyk(0%, 100%, 49%, 27%)
Oklch
oklch(51.2% 0.207 0.8)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#D64D2B

Vermilion · Chocolate · Passion Red

HEX
#D64D2B
RGB
rgb(214, 77, 43)
HSL
hsl(12, 68%, 50%)
HSB
hsb(12, 80%, 84%)
CMYK
cmyk(0%, 64%, 80%, 16%)
Oklch
oklch(60.3% 0.179 34.9)

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

#FFBA3A

Ginger · SandyBrown · Warm Sun

HEX
#FFBA3A
RGB
rgb(255, 186, 58)
HSL
hsl(39, 100%, 61%)
HSB
hsb(39, 77%, 100%)
CMYK
cmyk(0%, 27%, 77%, 0%)
Oklch
oklch(83.3% 0.156 78.2)

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

#CDFF18

Grass Green · GreenYellow · Olive Green

HEX
#CDFF18
RGB
rgb(205, 255, 24)
HSL
hsl(73, 100%, 55%)
HSB
hsb(73, 91%, 100%)
CMYK
cmyk(20%, 0%, 91%, 0%)
Oklch
oklch(93.2% 0.225 123.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B2009
09233A

Analogous

3A090A
3B2009
3A3809

Triadic

3B2009
093A20
20093A

Split-Comp.

3B2009
093A38
090A3A

Tetradic

3B2009
0A3A09
09233A
38093A

Contrast Matrix WCAG 2.1 Contrast

3B2009
BB0060
D64D2B
FFBA3A
CDFF18
—
2.4
Fail
3.5
AA Large
8.8
AAA
12.8
AAA
2.4
Fail
—
1.5
Fail
3.8
AA Large
5.5
AA
3.5
AA Large
1.5
Fail
—
2.5
Fail
3.6
AA Large
8.8
AAA
3.8
AA Large
2.5
Fail
—
1.5
Fail
12.8
AAA
5.5
AA
3.6
AA Large
1.5
Fail
—
White BG
15.0AAA
6.4AA
4.2AA Large
1.7Fail
1.2Fail
Black BG
1.4Fail
3.3AA Large
5.0AA
12.3AAA
17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F0F
6A6849
9B9933
E1E159
E3E350

Deuteranopia

313310
758343
A3AD35
E5EA60
E0DC5D

Tritanopia

3A1314
B23632
CF3A3B
FC7177
D07C86

Achromatopsia

252525
434343
727272
C0C0C0
D6D6D6

Shades & Tints Shades & Tints

#3B2009

Dark
Light

#BB0060

Dark
Light

#D64D2B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b2009;
  --color-2: #bb0060;
  --color-3: #d64d2b;
  --color-4: #ffba3a;
  --color-5: #cdff18;
}

SCSS

$color-1: #3b2009;
$color-2: #bb0060;
$color-3: #d64d2b;
$color-4: #ffba3a;
$color-5: #cdff18;

TAILWIND

colors: {
  'brand-1': '#3b2009',
  'brand-2': '#bb0060',
  'brand-3': '#d64d2b',
  'brand-4': '#ffba3a',
  'brand-5': '#cdff18',
}

RGB Array

[59, 32, 9], [187, 0, 96], [214, 77, 43], [255, 186, 58], [205, 255, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B2009, #BB0060, #D64D2B, #FFBA3A, #CDFF18 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #3b2009; --color-2: #bb0060; --color-3: #d64d2b; --color-4: #ffba3a; --color-5: #cdff18. 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 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