← Back to Editor

#F5D60F · #B6E86B · #60B851 · #000000 · #45D9A0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F5D60F

Autumn Sage · Gold · Sunflower

HEX
#F5D60F
RGB
rgb(245, 214, 15)
HSL
hsl(52, 92%, 51%)
HSB
hsb(52, 94%, 96%)
CMYK
cmyk(0%, 13%, 94%, 4%)
Oklch
oklch(87.6% 0.179 98.4)

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

#B6E86B

Willow Green · LightGreen · Apple Green

HEX
#B6E86B
RGB
rgb(182, 232, 107)
HSL
hsl(84, 73%, 66%)
HSB
hsb(84, 54%, 91%)
CMYK
cmyk(22%, 0%, 54%, 9%)
Oklch
oklch(87.0% 0.163 127.6)

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

#60B851

Celadon · MediumSeaGreen · Olive Green

HEX
#60B851
RGB
rgb(96, 184, 81)
HSL
hsl(111, 42%, 52%)
HSB
hsb(111, 56%, 72%)
CMYK
cmyk(48%, 0%, 56%, 28%)
Oklch
oklch(70.4% 0.164 140.8)

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

#000000

Ink Black · Black · Jet Black

HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
HSB
hsb(0, 0%, 0%)
CMYK
cmyk(0%, 0%, 0%, 100%)
Oklch
oklch(0.0% 0.000 0.0)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#45D9A0

Mineral Blue · MediumAquaMarine · Olive Green

HEX
#45D9A0
RGB
rgb(69, 217, 160)
HSL
hsl(157, 66%, 56%)
HSB
hsb(157, 68%, 85%)
CMYK
cmyk(68%, 0%, 26%, 15%)
Oklch
oklch(79.3% 0.150 163.2)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5D60F
0F2EF5

Analogous

F5630F
F5D60F
A1F50F

Triadic

F5D60F
0FF5D6
D60FF5

Split-Comp.

F5D60F
0FA1F5
630FF5

Tetradic

F5D60F
0FF563
0F2EF5
F50FA1

Contrast Matrix WCAG 2.1 Contrast

F5D60F
B6E86B
60B851
000000
45D9A0
—
1.0
Fail
1.7
Fail
14.5
AAA
1.2
Fail
1.0
Fail
—
1.7
Fail
14.7
AAA
1.3
Fail
1.7
Fail
1.7
Fail
—
8.5
AAA
1.4
Fail
14.5
AAA
14.7
AAA
8.5
AAA
—
11.7
AAA
1.2
Fail
1.3
Fail
1.4
Fail
11.7
AAA
—
White BG
1.4Fail
1.4Fail
2.5Fail
21.0AAA
1.8Fail
Black BG
14.5AAA
14.7AAA
8.5AAA
1.0Fail
11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E73F
CCCC89
86876A
000000
8586AE

Deuteranopia

E9EC4B
C9C591
817A70
000000
7D71B1

Tritanopia

F3656E
B9A1A6
647E82
000000
4CB9BB

Achromatopsia

C9C9C9
CBCBCB
929292
000000
A6A6A6

Shades & Tints Shades & Tints

#F5D60F

Dark
Light

#B6E86B

Dark
Light

#60B851

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5d60f;
  --color-2: #b6e86b;
  --color-3: #60b851;
  --color-4: #000000;
  --color-5: #45d9a0;
}

SCSS

$color-1: #f5d60f;
$color-2: #b6e86b;
$color-3: #60b851;
$color-4: #000000;
$color-5: #45d9a0;

TAILWIND

colors: {
  'brand-1': '#f5d60f',
  'brand-2': '#b6e86b',
  'brand-3': '#60b851',
  'brand-4': '#000000',
  'brand-5': '#45d9a0',
}

RGB Array

[245, 214, 15], [182, 232, 107], [96, 184, 81], [0, 0, 0], [69, 217, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5D60F, #B6E86B, #60B851, #000000, #45D9A0 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f5d60f; --color-2: #b6e86b; --color-3: #60b851; --color-4: #000000; --color-5: #45d9a0. 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 tech, SaaS, healthcare, eco industries. 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