← Back to Editor

#42A586 · #DAE974 · #F3A428 · #5D3C09 · #DB651E

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

#42A586

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#42A586
RGB
rgb(66, 165, 134)
HSL
hsl(161, 43%, 45%)
HSB
hsb(161, 60%, 65%)
CMYK
cmyk(60%, 0%, 19%, 35%)
Oklch
oklch(65.5% 0.104 169.3)

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

#DAE974

Fresh Green · Khaki · Sunflower

HEX
#DAE974
RGB
rgb(218, 233, 116)
HSL
hsl(68, 73%, 68%)
HSB
hsb(68, 50%, 91%)
CMYK
cmyk(6%, 0%, 50%, 9%)
Oklch
oklch(89.9% 0.143 115.4)

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

#F3A428

Ginger · GoldenRod · Warm Sun

HEX
#F3A428
RGB
rgb(243, 164, 40)
HSL
hsl(37, 89%, 55%)
HSB
hsb(37, 84%, 95%)
CMYK
cmyk(0%, 33%, 84%, 5%)
Oklch
oklch(77.8% 0.156 72.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#5D3C09

Ochre · DarkOliveGreen · Cinnamon

HEX
#5D3C09
RGB
rgb(93, 60, 9)
HSL
hsl(36, 82%, 20%)
HSB
hsb(36, 90%, 36%)
CMYK
cmyk(0%, 35%, 90%, 64%)
Oklch
oklch(38.6% 0.077 71.8)

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

#DB651E

Tangerine · Chocolate · Amber Brown

HEX
#DB651E
RGB
rgb(219, 101, 30)
HSL
hsl(23, 76%, 49%)
HSB
hsb(23, 86%, 86%)
CMYK
cmyk(0%, 54%, 86%, 14%)
Oklch
oklch(64.1% 0.167 46.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

42A586
A44161

Analogous

41A453
42A586
4192A4

Triadic

42A586
8541A4
A48541

Split-Comp.

42A586
A44192
A45341

Tetradic

42A586
5341A4
A44161
92A441

Contrast Matrix WCAG 2.1 Contrast

42A586
DAE974
F3A428
5D3C09
DB651E
—
2.3
Fail
1.5
Fail
3.3
AA Large
1.2
Fail
2.3
Fail
—
1.6
Fail
7.5
AAA
2.7
Fail
1.5
Fail
1.6
Fail
—
4.8
AA
1.7
Fail
3.3
AA Large
7.5
AAA
4.8
AA
—
2.8
Fail
1.2
Fail
2.7
Fail
1.7
Fail
2.8
Fail
—
White BG
3.0AA Large
1.3Fail
2.1Fail
9.9AAA
3.6AA Large
Black BG
7.0AA
15.9AAA
10.2AAA
2.1Fail
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6E8E
E0E190
D1D046
4F4E15
A8A72F

Deuteranopia

67608F
E0DF97
D5DB4D
515318
AFB833

Tritanopia

479395
DBA7AC
EF5E63
5B1F21
D53D40

Achromatopsia

848484
D7D7D7
ADADAD
404040
808080

Shades & Tints Shades & Tints

#42A586

Dark
Light

#DAE974

Dark
Light

#F3A428

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #42a586;
  --color-2: #dae974;
  --color-3: #f3a428;
  --color-4: #5d3c09;
  --color-5: #db651e;
}

SCSS

$color-1: #42a586;
$color-2: #dae974;
$color-3: #f3a428;
$color-4: #5d3c09;
$color-5: #db651e;

TAILWIND

colors: {
  'brand-1': '#42a586',
  'brand-2': '#dae974',
  'brand-3': '#f3a428',
  'brand-4': '#5d3c09',
  'brand-5': '#db651e',
}

RGB Array

[66, 165, 134], [218, 233, 116], [243, 164, 40], [93, 60, 9], [219, 101, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #42A586, #DAE974, #F3A428, #5D3C09, #DB651E 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: #42a586; --color-2: #dae974; --color-3: #f3a428; --color-4: #5d3c09; --color-5: #db651e. 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