← Back to Editor

#393463 · #7CA667 · #9BCC08 · #BFE632 · #FBF714

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

#393463

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#393463
RGB
rgb(57, 52, 99)
HSL
hsl(246, 31%, 30%)
HSB
hsb(246, 47%, 39%)
CMYK
cmyk(42%, 47%, 0%, 61%)
Oklch
oklch(35.4% 0.080 286.4)

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

#7CA667

Celadon · Gray · Olive Green

HEX
#7CA667
RGB
rgb(124, 166, 103)
HSL
hsl(100, 26%, 53%)
HSB
hsb(100, 38%, 65%)
CMYK
cmyk(25%, 0%, 38%, 35%)
Oklch
oklch(67.9% 0.100 135.7)

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

#9BCC08

Grass Green · Chartreuse · Olive Green

HEX
#9BCC08
RGB
rgb(155, 204, 8)
HSL
hsl(75, 92%, 42%)
HSB
hsb(75, 96%, 80%)
CMYK
cmyk(24%, 0%, 96%, 20%)
Oklch
oklch(78.2% 0.196 125.2)

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

#BFE632

Grass Green · GreenYellow · Olive Green

HEX
#BFE632
RGB
rgb(191, 230, 50)
HSL
hsl(73, 78%, 55%)
HSB
hsb(73, 78%, 90%)
CMYK
cmyk(17%, 0%, 78%, 10%)
Oklch
oklch(86.7% 0.196 121.8)

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

#FBF714

Autumn Sage · Yellow · Sunflower

HEX
#FBF714
RGB
rgb(251, 247, 20)
HSL
hsl(59, 97%, 53%)
HSB
hsb(59, 92%, 98%)
CMYK
cmyk(0%, 2%, 92%, 2%)
Oklch
oklch(94.8% 0.203 108.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

393463
5F6435

Analogous

354864
393463
513564

Triadic

393463
643A35
35643A

Split-Comp.

393463
645135
486435

Tetradic

393463
643548
5F6435
356451

Contrast Matrix WCAG 2.1 Contrast

393463
7CA667
9BCC08
BFE632
FBF714
—
4.1
AA Large
6.0
AA
7.9
AAA
10.0
AAA
4.1
AA Large
—
1.5
Fail
1.9
Fail
2.5
Fail
6.0
AA
1.5
Fail
—
1.3
Fail
1.7
Fail
7.9
AAA
1.9
Fail
1.3
Fail
—
1.3
Fail
10.0
AAA
2.5
Fail
1.7
Fail
1.3
Fail
—
White BG
11.4AAA
2.8Fail
1.9Fail
1.4Fail
1.1Fail
Black BG
1.8Fail
7.5AAA
11.0AAA
14.6AAA
18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

373758
8E8F76
B0B137
D0D05E
F9F94B

Deuteranopia

373855
8C897A
ADAA43
CECB68
FAFA58

Tritanopia

394F4D
7E8285
9D5D65
C18088
FB7680

Achromatopsia

3B3B3B
929292
A7A7A7
C6C6C6
DEDEDE

Shades & Tints Shades & Tints

#393463

Dark
Light

#7CA667

Dark
Light

#9BCC08

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #393463;
  --color-2: #7ca667;
  --color-3: #9bcc08;
  --color-4: #bfe632;
  --color-5: #fbf714;
}

SCSS

$color-1: #393463;
$color-2: #7ca667;
$color-3: #9bcc08;
$color-4: #bfe632;
$color-5: #fbf714;

TAILWIND

colors: {
  'brand-1': '#393463',
  'brand-2': '#7ca667',
  'brand-3': '#9bcc08',
  'brand-4': '#bfe632',
  'brand-5': '#fbf714',
}

RGB Array

[57, 52, 99], [124, 166, 103], [155, 204, 8], [191, 230, 50], [251, 247, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #393463, #7CA667, #9BCC08, #BFE632, #FBF714 is ideal for: social media posters, mobile apps, e-commerce promos. 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: #393463; --color-2: #7ca667; --color-3: #9bcc08; --color-4: #bfe632; --color-5: #fbf714. 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. 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