← Back to Editor

#3C3A4A · #B6BF04 · #F3FF08 · #FFAE76 · #7F7C80

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

#3C3A4A

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3C3A4A
RGB
rgb(60, 58, 74)
HSL
hsl(248, 12%, 26%)
HSB
hsb(248, 22%, 29%)
CMYK
cmyk(19%, 22%, 0%, 71%)
Oklch
oklch(35.7% 0.028 290.7)

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

#B6BF04

Autumn Sage · GoldenRod · Honey Gold

HEX
#B6BF04
RGB
rgb(182, 191, 4)
HSL
hsl(63, 96%, 38%)
HSB
hsb(63, 98%, 75%)
CMYK
cmyk(5%, 0%, 98%, 25%)
Oklch
oklch(77.1% 0.172 113.2)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#F3FF08

Autumn Sage · Yellow · Sunflower

HEX
#F3FF08
RGB
rgb(243, 255, 8)
HSL
hsl(63, 100%, 52%)
HSB
hsb(63, 97%, 100%)
CMYK
cmyk(5%, 0%, 97%, 0%)
Oklch
oklch(95.9% 0.213 113.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FFAE76

Apricot · LightSalmon · Warm Sun

HEX
#FFAE76
RGB
rgb(255, 174, 118)
HSL
hsl(25, 100%, 73%)
HSB
hsb(25, 54%, 100%)
CMYK
cmyk(0%, 32%, 54%, 0%)
Oklch
oklch(81.7% 0.119 54.9)

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

#7F7C80

Ink Gray · Gray · Warm Gray

HEX
#7F7C80
RGB
rgb(127, 124, 128)
HSL
hsl(285, 2%, 49%)
HSB
hsb(285, 3%, 50%)
CMYK
cmyk(1%, 3%, 0%, 50%)
Oklch
oklch(59.0% 0.007 317.7)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C3A4A
484A3A

Analogous

3A404A
3C3A4A
443A4A

Triadic

3C3A4A
4A3C3A
3A4A3C

Split-Comp.

3C3A4A
4A443A
404A3A

Tetradic

3C3A4A
4A3A40
484A3A
3A4A44

Contrast Matrix WCAG 2.1 Contrast

3C3A4A
B6BF04
F3FF08
FFAE76
7F7C80
—
5.5
AA
10.1
AAA
6.1
AA
2.7
Fail
5.5
AA
—
1.8
Fail
1.1
Fail
2.0
Fail
10.1
AAA
1.8
Fail
—
1.7
Fail
3.8
AA Large
6.1
AA
1.1
Fail
1.7
Fail
—
2.3
Fail
2.7
Fail
2.0
Fail
3.8
AA Large
2.3
Fail
—
White BG
11.1AAA
2.0Fail
1.1Fail
1.8Fail
4.1AA Large
Black BG
1.9Fail
10.4AAA
19.1AAA
11.6AAA
5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B46
BABA31
F8F844
DCDB84
7E7E7F

Deuteranopia

3B3B45
B9B93C
F8F752
E1E787
7E7E7F

Tritanopia

3C4342
B6555D
F4737D
FB8E91
7F7E7E

Achromatopsia

3C3C3C
A7A7A7
DFDFDF
C0C0C0
7D7D7D

Shades & Tints Shades & Tints

#3C3A4A

Dark
Light

#B6BF04

Dark
Light

#F3FF08

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c3a4a;
  --color-2: #b6bf04;
  --color-3: #f3ff08;
  --color-4: #ffae76;
  --color-5: #7f7c80;
}

SCSS

$color-1: #3c3a4a;
$color-2: #b6bf04;
$color-3: #f3ff08;
$color-4: #ffae76;
$color-5: #7f7c80;

TAILWIND

colors: {
  'brand-1': '#3c3a4a',
  'brand-2': '#b6bf04',
  'brand-3': '#f3ff08',
  'brand-4': '#ffae76',
  'brand-5': '#7f7c80',
}

RGB Array

[60, 58, 74], [182, 191, 4], [243, 255, 8], [255, 174, 118], [127, 124, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C3A4A, #B6BF04, #F3FF08, #FFAE76, #7F7C80 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: #3c3a4a; --color-2: #b6bf04; --color-3: #f3ff08; --color-4: #ffae76; --color-5: #7f7c80. 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