← Back to Editor

#34383C · #FC2280 · #F8AA15 · #F2C524 · #2DCFA1

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 App

Color Details Color Details

#34383C

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#34383C
RGB
rgb(52, 56, 60)
HSL
hsl(210, 7%, 22%)
HSB
hsb(210, 13%, 24%)
CMYK
cmyk(13%, 7%, 0%, 76%)
Oklch
oklch(33.8% 0.009 248.1)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#FC2280

Dark Violet · DeepPink · Rose Pink

HEX
#FC2280
RGB
rgb(252, 34, 128)
HSL
hsl(334, 97%, 56%)
HSB
hsb(334, 87%, 99%)
CMYK
cmyk(0%, 87%, 49%, 1%)
Oklch
oklch(64.9% 0.247 3.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#F8AA15

Ginger · Orange · Warm Sun

HEX
#F8AA15
RGB
rgb(248, 170, 21)
HSL
hsl(39, 94%, 53%)
HSB
hsb(39, 92%, 97%)
CMYK
cmyk(0%, 31%, 92%, 3%)
Oklch
oklch(79.4% 0.164 75.1)

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

#F2C524

Ginger · GoldenRod · Sunflower

HEX
#F2C524
RGB
rgb(242, 197, 36)
HSL
hsl(47, 89%, 55%)
HSB
hsb(47, 85%, 95%)
CMYK
cmyk(0%, 19%, 85%, 5%)
Oklch
oklch(83.9% 0.164 91.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#2DCFA1

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#2DCFA1
RGB
rgb(45, 207, 161)
HSL
hsl(163, 64%, 49%)
HSB
hsb(163, 78%, 81%)
CMYK
cmyk(78%, 0%, 22%, 19%)
Oklch
oklch(76.4% 0.145 168.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

34383C
3C3834

Analogous

343C3C
34383C
34343C

Triadic

34383C
3C3438
383C34

Split-Comp.

34383C
3C3434
3C3C34

Tetradic

34383C
3C343C
3C3834
343C34

Contrast Matrix WCAG 2.1 Contrast

34383C
FC2280
F8AA15
F2C524
2DCFA1
—
3.2
AA Large
6.1
AA
7.2
AAA
5.9
AA
3.2
AA Large
—
1.9
Fail
2.3
Fail
1.9
Fail
6.1
AA
1.9
Fail
—
1.2
Fail
1.0
Fail
7.2
AAA
2.3
Fail
1.2
Fail
—
1.2
Fail
5.9
AA
1.9
Fail
1.0
Fail
1.2
Fail
—
White BG
11.8AAA
3.7AA Large
2.0Fail
1.6Fail
2.0Fail
Black BG
1.8Fail
5.7AA
10.8AAA
12.8AAA
10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

36363B
9E9C69
D6D639
DFDE4B
7375AC

Deuteranopia

36353B
AABB64
DBE142
E1E454
6A5EAF

Tritanopia

343A3A
F15753
F4565C
F06A70
35B5B7

Achromatopsia

373737
6E6E6E
B0B0B0
C0C0C0
999999

Shades & Tints Shades & Tints

#34383C

Dark
Light

#FC2280

Dark
Light

#F8AA15

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #34383c;
  --color-2: #fc2280;
  --color-3: #f8aa15;
  --color-4: #f2c524;
  --color-5: #2dcfa1;
}

SCSS

$color-1: #34383c;
$color-2: #fc2280;
$color-3: #f8aa15;
$color-4: #f2c524;
$color-5: #2dcfa1;

TAILWIND

colors: {
  'brand-1': '#34383c',
  'brand-2': '#fc2280',
  'brand-3': '#f8aa15',
  'brand-4': '#f2c524',
  'brand-5': '#2dcfa1',
}

RGB Array

[52, 56, 60], [252, 34, 128], [248, 170, 21], [242, 197, 36], [45, 207, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #34383C, #FC2280, #F8AA15, #F2C524, #2DCFA1 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #34383c; --color-2: #fc2280; --color-3: #f8aa15; --color-4: #f2c524; --color-5: #2dcfa1. 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. 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