← Back to Editor

#F5BD3B · #FA9837 · #F23A30 · #A11D42 · #52153E

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 App

Color Details Color Details

#F5BD3B

Ginger · SandyBrown · Sunflower

HEX
#F5BD3B
RGB
rgb(245, 189, 59)
HSL
hsl(42, 90%, 60%)
HSB
hsb(42, 76%, 96%)
CMYK
cmyk(0%, 23%, 76%, 4%)
Oklch
oklch(82.8% 0.152 84.0)

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

#FA9837

Ginger · Coral · Warm Sun

HEX
#FA9837
RGB
rgb(250, 152, 55)
HSL
hsl(30, 95%, 60%)
HSB
hsb(30, 78%, 98%)
CMYK
cmyk(0%, 39%, 78%, 2%)
Oklch
oklch(76.6% 0.158 60.6)

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

#F23A30

Vermilion · Crimson · Passion Red

HEX
#F23A30
RGB
rgb(242, 58, 48)
HSL
hsl(3, 88%, 57%)
HSB
hsb(3, 80%, 95%)
CMYK
cmyk(0%, 76%, 80%, 5%)
Oklch
oklch(63.1% 0.221 28.5)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#A11D42

Dark Violet · Brown · Camellia

HEX
#A11D42
RGB
rgb(161, 29, 66)
HSL
hsl(343, 69%, 37%)
HSB
hsb(343, 82%, 63%)
CMYK
cmyk(0%, 82%, 59%, 37%)
Oklch
oklch(46.7% 0.166 11.2)

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

#52153E

Rose Purple · DarkSlateGray · Raspberry

HEX
#52153E
RGB
rgb(82, 21, 62)
HSL
hsl(320, 59%, 20%)
HSB
hsb(320, 74%, 32%)
CMYK
cmyk(0%, 74%, 24%, 68%)
Oklch
oklch(31.3% 0.103 343.5)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5BD3B
3D74F5

Analogous

F5623D
F5BD3B
D0F53D

Triadic

F5BD3B
3DF5BE
BE3DF5

Split-Comp.

F5BD3B
3DD0F5
623DF5

Tetradic

F5BD3B
3DF562
3D74F5
F53DD0

Contrast Matrix WCAG 2.1 Contrast

F5BD3B
FA9837
F23A30
A11D42
52153E
—
1.3
Fail
2.3
Fail
4.4
AA Large
8.0
AAA
1.3
Fail
—
1.8
Fail
3.5
AA Large
6.3
AA
2.3
Fail
1.8
Fail
—
2.0
Fail
3.5
AA Large
4.4
AA Large
3.5
AA Large
2.0
Fail
—
1.8
Fail
8.0
AAA
6.3
AA
3.5
AA Large
1.8
Fail
—
White BG
1.7Fail
2.2Fail
3.9AA Large
7.6AAA
13.7AAA
Black BG
12.2AAA
9.6AAA
5.4AA
2.8Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDC5A
D0CF4E
A2A132
686739
383734

Deuteranopia

E0E462
D5DD54
ADBB33
707937
3B4032

Tritanopia

F27379
F56165
E93435
9A3230
4F2C2B

Achromatopsia

BFBFBF
AAAAAA
707070
494949
2C2C2C

Shades & Tints Shades & Tints

#F5BD3B

Dark
Light

#FA9837

Dark
Light

#F23A30

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5bd3b;
  --color-2: #fa9837;
  --color-3: #f23a30;
  --color-4: #a11d42;
  --color-5: #52153e;
}

SCSS

$color-1: #f5bd3b;
$color-2: #fa9837;
$color-3: #f23a30;
$color-4: #a11d42;
$color-5: #52153e;

TAILWIND

colors: {
  'brand-1': '#f5bd3b',
  'brand-2': '#fa9837',
  'brand-3': '#f23a30',
  'brand-4': '#a11d42',
  'brand-5': '#52153e',
}

RGB Array

[245, 189, 59], [250, 152, 55], [242, 58, 48], [161, 29, 66], [82, 21, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5BD3B, #FA9837, #F23A30, #A11D42, #52153E 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: #f5bd3b; --color-2: #fa9837; --color-3: #f23a30; --color-4: #a11d42; --color-5: #52153e. 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