← Back to Editor

#473D25 · #E3D921 · #F2ED81 · #DDFAB5 · #45B0A6

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

#473D25

Ochre · DarkOliveGreen · Amber Gold

HEX
#473D25
RGB
rgb(71, 61, 37)
HSL
hsl(42, 31%, 21%)
HSB
hsb(42, 48%, 28%)
CMYK
cmyk(0%, 14%, 48%, 72%)
Oklch
oklch(36.4% 0.040 87.8)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

#E3D921

Autumn Sage · Gold · Sunflower

HEX
#E3D921
RGB
rgb(227, 217, 33)
HSL
hsl(57, 78%, 51%)
HSB
hsb(57, 85%, 89%)
CMYK
cmyk(0%, 4%, 85%, 11%)
Oklch
oklch(86.6% 0.179 106.1)

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

#F2ED81

Fresh Green · Khaki · Sunflower

HEX
#F2ED81
RGB
rgb(242, 237, 129)
HSL
hsl(57, 81%, 73%)
HSB
hsb(57, 47%, 95%)
CMYK
cmyk(0%, 2%, 47%, 5%)
Oklch
oklch(92.8% 0.131 106.3)

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

#DDFAB5

Willow Green · Wheat · Mint Green

HEX
#DDFAB5
RGB
rgb(221, 250, 181)
HSL
hsl(85, 87%, 85%)
HSB
hsb(85, 28%, 98%)
CMYK
cmyk(12%, 0%, 28%, 2%)
Oklch
oklch(94.7% 0.094 126.6)

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

#45B0A6

Mineral Blue · CadetBlue · Mint Ice

HEX
#45B0A6
RGB
rgb(69, 176, 166)
HSL
hsl(174, 44%, 48%)
HSB
hsb(174, 61%, 69%)
CMYK
cmyk(61%, 0%, 6%, 31%)
Oklch
oklch(69.3% 0.098 186.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

473D25
252F46

Analogous

462C25
473D25
404625

Triadic

473D25
25463C
3C2546

Split-Comp.

473D25
254046
2C2546

Tetradic

473D25
25462C
252F46
462540

Contrast Matrix WCAG 2.1 Contrast

473D25
E3D921
F2ED81
DDFAB5
45B0A6
—
7.2
AAA
8.8
AAA
9.4
AAA
4.1
AA Large
7.2
AAA
—
1.2
Fail
1.3
Fail
1.8
Fail
8.8
AAA
1.2
Fail
—
1.1
Fail
2.1
Fail
9.4
AAA
1.3
Fail
1.1
Fail
—
2.3
Fail
4.1
AA Large
1.8
Fail
2.1
Fail
2.3
Fail
—
White BG
10.7AAA
1.5Fail
1.2Fail
1.1Fail
2.6Fail
Black BG
2.0Fail
14.2AAA
17.2AAA
18.4AAA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

43432B
DFDF4E
F0F09B
EAEAC6
7374A8

Deuteranopia

43442C
DFE058
F0F0A1
E8E6CA
6D65A9

Tritanopia

472F30
E27178
F2B0B4
DED3D6
4AAAAB

Achromatopsia

3D3D3D
C7C7C7
E2E2E2
E9E9E9
8F8F8F

Shades & Tints Shades & Tints

#473D25

Dark
Light

#E3D921

Dark
Light

#F2ED81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #473d25;
  --color-2: #e3d921;
  --color-3: #f2ed81;
  --color-4: #ddfab5;
  --color-5: #45b0a6;
}

SCSS

$color-1: #473d25;
$color-2: #e3d921;
$color-3: #f2ed81;
$color-4: #ddfab5;
$color-5: #45b0a6;

TAILWIND

colors: {
  'brand-1': '#473d25',
  'brand-2': '#e3d921',
  'brand-3': '#f2ed81',
  'brand-4': '#ddfab5',
  'brand-5': '#45b0a6',
}

RGB Array

[71, 61, 37], [227, 217, 33], [242, 237, 129], [221, 250, 181], [69, 176, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #473D25, #E3D921, #F2ED81, #DDFAB5, #45B0A6 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: #473d25; --color-2: #e3d921; --color-3: #f2ed81; --color-4: #ddfab5; --color-5: #45b0a6. 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