← Back to Editor

#FFF766 · #D3D936 · #A3B32D · #618020 · #4D3913

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

#FFF766

Fresh Green · Khaki · Sunflower

HEX
#FFF766
RGB
rgb(255, 247, 102)
HSL
hsl(57, 100%, 70%)
HSB
hsb(57, 60%, 100%)
CMYK
cmyk(0%, 3%, 60%, 0%)
Oklch
oklch(95.6% 0.164 106.1)

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

#D3D936

Autumn Sage · GreenYellow · Sunflower

HEX
#D3D936
RGB
rgb(211, 217, 54)
HSL
hsl(62, 68%, 53%)
HSB
hsb(62, 75%, 85%)
CMYK
cmyk(3%, 0%, 75%, 15%)
Oklch
oklch(85.4% 0.173 111.7)

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

#A3B32D

Autumn Sage · GoldenRod · Honey Gold

HEX
#A3B32D
RGB
rgb(163, 179, 45)
HSL
hsl(67, 60%, 44%)
HSB
hsb(67, 75%, 70%)
CMYK
cmyk(9%, 0%, 75%, 30%)
Oklch
oklch(73.0% 0.152 116.3)

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

#618020

Grass Green · DarkOliveGreen · Forest Green

HEX
#618020
RGB
rgb(97, 128, 32)
HSL
hsl(79, 60%, 31%)
HSB
hsb(79, 75%, 50%)
CMYK
cmyk(24%, 0%, 75%, 50%)
Oklch
oklch(55.7% 0.126 126.0)

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

#4D3913

Ochre · DarkOliveGreen · Cinnamon

HEX
#4D3913
RGB
rgb(77, 57, 19)
HSL
hsl(39, 60%, 19%)
HSB
hsb(39, 75%, 30%)
CMYK
cmyk(0%, 26%, 75%, 70%)
Oklch
oklch(35.9% 0.060 80.6)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF766
666EFF

Analogous

FFAB66
FFF766
BAFF66

Triadic

FFF766
66FFF7
F766FF

Split-Comp.

FFF766
66BAFF
AB66FF

Tetradic

FFF766
66FFAB
666EFF
FF66BA

Contrast Matrix WCAG 2.1 Contrast

FFF766
D3D936
A3B32D
618020
4D3913
—
1.4
Fail
2.1
Fail
4.1
AA Large
9.8
AAA
1.4
Fail
—
1.5
Fail
3.0
Fail
7.2
AAA
2.1
Fail
1.5
Fail
—
2.0
Fail
4.7
AA
4.1
AA Large
3.0
Fail
2.0
Fail
—
2.4
Fail
9.8
AAA
7.2
AAA
4.7
AA
2.4
Fail
—
White BG
1.1Fail
1.5Fail
2.3Fail
4.5AA
11.0AAA
Black BG
18.7AAA
13.7AAA
9.0AAA
4.6AA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFB89
D6D65D
AAAA4D
6E6F37
44441C

Deuteranopia

FCFD92
D5D567
A9A855
6D6A3D
46471E

Tritanopia

FFA5AB
D37D83
A4676D
634A4E
4C2325

Achromatopsia

E9E9E9
C5C5C5
9F9F9F
6C6C6C
3B3B3B

Shades & Tints Shades & Tints

#FFF766

Dark
Light

#D3D936

Dark
Light

#A3B32D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff766;
  --color-2: #d3d936;
  --color-3: #a3b32d;
  --color-4: #618020;
  --color-5: #4d3913;
}

SCSS

$color-1: #fff766;
$color-2: #d3d936;
$color-3: #a3b32d;
$color-4: #618020;
$color-5: #4d3913;

TAILWIND

colors: {
  'brand-1': '#fff766',
  'brand-2': '#d3d936',
  'brand-3': '#a3b32d',
  'brand-4': '#618020',
  'brand-5': '#4d3913',
}

RGB Array

[255, 247, 102], [211, 217, 54], [163, 179, 45], [97, 128, 32], [77, 57, 19]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF766, #D3D936, #A3B32D, #618020, #4D3913 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: #fff766; --color-2: #d3d936; --color-3: #a3b32d; --color-4: #618020; --color-5: #4d3913. 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