← Back to Editor

#3B2331 · #7AC8A0 · #E8E55A · #F9941E · #CC5628

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

#3B2331

Rose Purple · DarkSlateGray · Raspberry

HEX
#3B2331
RGB
rgb(59, 35, 49)
HSL
hsl(325, 26%, 18%)
HSB
hsb(325, 41%, 23%)
CMYK
cmyk(0%, 41%, 17%, 77%)
Oklch
oklch(29.2% 0.043 344.2)

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

#7AC8A0

Celadon · MediumAquaMarine · Apple Green

HEX
#7AC8A0
RGB
rgb(122, 200, 160)
HSL
hsl(149, 41%, 63%)
HSB
hsb(149, 39%, 78%)
CMYK
cmyk(39%, 0%, 20%, 22%)
Oklch
oklch(77.1% 0.097 160.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#E8E55A

Fresh Green · Khaki · Sunflower

HEX
#E8E55A
RGB
rgb(232, 229, 90)
HSL
hsl(59, 76%, 63%)
HSB
hsb(59, 61%, 91%)
CMYK
cmyk(0%, 1%, 61%, 9%)
Oklch
oklch(89.9% 0.158 108.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#F9941E

Ginger · Orange · Warm Sun

HEX
#F9941E
RGB
rgb(249, 148, 30)
HSL
hsl(32, 95%, 55%)
HSB
hsb(32, 88%, 98%)
CMYK
cmyk(0%, 41%, 88%, 2%)
Oklch
oklch(75.7% 0.167 62.1)

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

#CC5628

Tangerine · Chocolate · Amber Brown

HEX
#CC5628
RGB
rgb(204, 86, 40)
HSL
hsl(17, 67%, 48%)
HSB
hsb(17, 80%, 80%)
CMYK
cmyk(0%, 58%, 80%, 20%)
Oklch
oklch(59.8% 0.161 40.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B2331
223A2C

Analogous

38223A
3B2331
3A2224

Triadic

3B2331
303A22
22303A

Split-Comp.

3B2331
243A22
223A38

Tetradic

3B2331
3A3822
223A2C
22243A

Contrast Matrix WCAG 2.1 Contrast

3B2331
7AC8A0
E8E55A
F9941E
CC5628
—
7.2
AAA
10.7
AAA
6.3
AA
3.4
AA Large
7.2
AAA
—
1.5
Fail
1.1
Fail
2.1
Fail
10.7
AAA
1.5
Fail
—
1.7
Fail
3.2
AA Large
6.3
AA
1.1
Fail
1.7
Fail
—
1.9
Fail
3.4
AA Large
2.1
Fail
3.2
AA Large
1.9
Fail
—
White BG
14.3AAA
2.0Fail
1.3Fail
2.3Fail
4.3AA Large
Black BG
1.5Fail
10.6AAA
15.8AAA
9.3AAA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

31302E
9C9CAA
E7E77C
CDCC3B
999833

Deuteranopia

32342D
9791AC
E7E784
D3DB41
A0A936

Tritanopia

3A2B2A
7EB1B3
E8969C
F45156
C63C3E

Achromatopsia

2C2C2C
ACACAC
D6D6D6
A5A5A5
747474

Shades & Tints Shades & Tints

#3B2331

Dark
Light

#7AC8A0

Dark
Light

#E8E55A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b2331;
  --color-2: #7ac8a0;
  --color-3: #e8e55a;
  --color-4: #f9941e;
  --color-5: #cc5628;
}

SCSS

$color-1: #3b2331;
$color-2: #7ac8a0;
$color-3: #e8e55a;
$color-4: #f9941e;
$color-5: #cc5628;

TAILWIND

colors: {
  'brand-1': '#3b2331',
  'brand-2': '#7ac8a0',
  'brand-3': '#e8e55a',
  'brand-4': '#f9941e',
  'brand-5': '#cc5628',
}

RGB Array

[59, 35, 49], [122, 200, 160], [232, 229, 90], [249, 148, 30], [204, 86, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B2331, #7AC8A0, #E8E55A, #F9941E, #CC5628 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: #3b2331; --color-2: #7ac8a0; --color-3: #e8e55a; --color-4: #f9941e; --color-5: #cc5628. 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