← Back to Editor

#B3C720 · #20C770 · #2070C7 · #8B20C7 · #C7207D

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

#B3C720

Autumn Sage · GoldenRod · Honey Gold

HEX
#B3C720
RGB
rgb(179, 199, 32)
HSL
hsl(67, 72%, 45%)
HSB
hsb(67, 84%, 78%)
CMYK
cmyk(10%, 0%, 84%, 22%)
Oklch
oklch(78.8% 0.174 117.0)

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

#20C770

Pine Green · MediumSeaGreen · Olive Green

HEX
#20C770
RGB
rgb(32, 199, 112)
HSL
hsl(149, 72%, 45%)
HSB
hsb(149, 84%, 78%)
CMYK
cmyk(84%, 0%, 44%, 22%)
Oklch
oklch(73.1% 0.179 153.5)

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

#2070C7

Indigo · SteelBlue · Navy Blue

HEX
#2070C7
RGB
rgb(32, 112, 199)
HSL
hsl(211, 72%, 45%)
HSB
hsb(211, 84%, 78%)
CMYK
cmyk(84%, 44%, 0%, 22%)
Oklch
oklch(54.5% 0.155 254.2)

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

#8B20C7

Royal Purple · DarkOrchid · Violet

HEX
#8B20C7
RGB
rgb(139, 32, 199)
HSL
hsl(278, 72%, 45%)
HSB
hsb(278, 84%, 78%)
CMYK
cmyk(30%, 84%, 0%, 22%)
Oklch
oklch(50.5% 0.235 308.7)

Traditional「Royal Purple」· Paint「Violet」· Creative Blush Sunrise

#C7207D

Rose Purple · MediumVioletRed · Camellia

HEX
#C7207D
RGB
rgb(199, 32, 125)
HSL
hsl(327, 72%, 45%)
HSB
hsb(327, 84%, 78%)
CMYK
cmyk(0%, 84%, 37%, 22%)
Oklch
oklch(55.5% 0.211 353.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3C720
3320C5

Analogous

C58620
B3C720
5FC520

Triadic

B3C720
20B2C5
C520B2

Split-Comp.

B3C720
205FC5
8620C5

Tetradic

B3C720
20C586
3320C5
C5205F

Contrast Matrix WCAG 2.1 Contrast

B3C720
20C770
2070C7
8B20C7
C7207D
—
1.2
Fail
2.6
Fail
3.5
AA Large
2.8
Fail
1.2
Fail
—
2.3
Fail
3.0
AA Large
2.4
Fail
2.6
Fail
2.3
Fail
—
1.3
Fail
1.1
Fail
3.5
AA Large
3.0
AA Large
1.3
Fail
—
1.3
Fail
2.8
Fail
2.4
Fail
1.1
Fail
1.3
Fail
—
White BG
1.9Fail
2.2Fail
5.0AA
6.7AA
5.3AA
Black BG
11.1AAA
9.5AAA
4.2AA Large
3.1AA Large
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBC48
686A85
4343B2
5D5C9F
7F7D66

Deuteranopia

BBB952
5F528A
3E38AD
636B95
889561

Tritanopia

B4686F
289699
24A19E
867F78
BF5551

Achromatopsia

AEAEAE
8B8B8B
626262
535353
5D5D5D

Shades & Tints Shades & Tints

#B3C720

Dark
Light

#20C770

Dark
Light

#2070C7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3c720;
  --color-2: #20c770;
  --color-3: #2070c7;
  --color-4: #8b20c7;
  --color-5: #c7207d;
}

SCSS

$color-1: #b3c720;
$color-2: #20c770;
$color-3: #2070c7;
$color-4: #8b20c7;
$color-5: #c7207d;

TAILWIND

colors: {
  'brand-1': '#b3c720',
  'brand-2': '#20c770',
  'brand-3': '#2070c7',
  'brand-4': '#8b20c7',
  'brand-5': '#c7207d',
}

RGB Array

[179, 199, 32], [32, 199, 112], [32, 112, 199], [139, 32, 199], [199, 32, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3C720, #20C770, #2070C7, #8B20C7, #C7207D 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: #b3c720; --color-2: #20c770; --color-3: #2070c7; --color-4: #8b20c7; --color-5: #c7207d. 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