← Back to Editor

#FEC551 · #60A45B · #1D4F60 · #361A3E · #B00350

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

#FEC551

Ginger · SandyBrown · Sunflower

HEX
#FEC551
RGB
rgb(254, 197, 81)
HSL
hsl(40, 99%, 66%)
HSB
hsb(40, 68%, 100%)
CMYK
cmyk(0%, 22%, 68%, 0%)
Oklch
oklch(85.4% 0.145 82.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#60A45B

Celadon · MediumSeaGreen · Olive Green

HEX
#60A45B
RGB
rgb(96, 164, 91)
HSL
hsl(116, 29%, 50%)
HSB
hsb(116, 45%, 64%)
CMYK
cmyk(41%, 0%, 45%, 36%)
Oklch
oklch(65.5% 0.126 142.5)

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

#1D4F60

Lake Blue · DarkSlateGray · Peacock Green

HEX
#1D4F60
RGB
rgb(29, 79, 96)
HSL
hsl(195, 54%, 25%)
HSB
hsb(195, 70%, 38%)
CMYK
cmyk(70%, 18%, 0%, 62%)
Oklch
oklch(40.2% 0.060 223.8)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#361A3E

Dark Plum · DarkSlateGray · Dark Purple

HEX
#361A3E
RGB
rgb(54, 26, 62)
HSL
hsl(287, 41%, 17%)
HSB
hsb(287, 58%, 24%)
CMYK
cmyk(13%, 58%, 0%, 76%)
Oklch
oklch(27.4% 0.073 318.4)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#B00350

Dark Violet · Crimson · Camellia

HEX
#B00350
RGB
rgb(176, 3, 80)
HSL
hsl(333, 97%, 35%)
HSB
hsb(333, 98%, 69%)
CMYK
cmyk(0%, 98%, 55%, 31%)
Oklch
oklch(48.8% 0.194 5.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FEC551
528CFE

Analogous

FE6F52
FEC551
E2FE52

Triadic

FEC551
52FEC5
C552FE

Split-Comp.

FEC551
52E2FE
6F52FE

Tetradic

FEC551
52FE6F
528CFE
FE52E2

Contrast Matrix WCAG 2.1 Contrast

FEC551
60A45B
1D4F60
361A3E
B00350
—
1.9
Fail
5.7
AA
9.7
AAA
4.5
AA Large
1.9
Fail
—
3.0
Fail
5.1
AA
2.3
Fail
5.7
AA
3.0
Fail
—
1.7
Fail
1.3
Fail
9.7
AAA
5.1
AA
1.7
Fail
—
2.2
Fail
4.5
AA Large
2.3
Fail
1.3
Fail
2.2
Fail
—
White BG
1.6Fail
3.0AA Large
9.0AAA
15.3AAA
7.1AAA
Black BG
13.3AAA
7.0AA
2.3Fail
1.4Fail
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E56D
7D7E6D
33335C
2A2A35
65643D

Deuteranopia

E9ED74
7A7471
302C5B
2C2E33
6F7C39

Tritanopia

FB8388
637B7E
1F5958
352E2D
A72F2B

Achromatopsia

C9C9C9
878787
424242
262626
404040

Shades & Tints Shades & Tints

#FEC551

Dark
Light

#60A45B

Dark
Light

#1D4F60

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fec551;
  --color-2: #60a45b;
  --color-3: #1d4f60;
  --color-4: #361a3e;
  --color-5: #b00350;
}

SCSS

$color-1: #fec551;
$color-2: #60a45b;
$color-3: #1d4f60;
$color-4: #361a3e;
$color-5: #b00350;

TAILWIND

colors: {
  'brand-1': '#fec551',
  'brand-2': '#60a45b',
  'brand-3': '#1d4f60',
  'brand-4': '#361a3e',
  'brand-5': '#b00350',
}

RGB Array

[254, 197, 81], [96, 164, 91], [29, 79, 96], [54, 26, 62], [176, 3, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FEC551, #60A45B, #1D4F60, #361A3E, #B00350 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #fec551; --color-2: #60a45b; --color-3: #1d4f60; --color-4: #361a3e; --color-5: #b00350. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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