← Back to Editor

#BA2737 · #FA6431 · #FFB12A · #FCEE9B · #FB2255

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

#BA2737

Vermilion · FireBrick · Passion Red

HEX
#BA2737
RGB
rgb(186, 39, 55)
HSL
hsl(353, 65%, 44%)
HSB
hsb(353, 79%, 73%)
CMYK
cmyk(0%, 79%, 70%, 27%)
Oklch
oklch(51.8% 0.182 21.1)

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

#FA6431

Tangerine · Tomato · Warm Sun

HEX
#FA6431
RGB
rgb(250, 100, 49)
HSL
hsl(15, 95%, 59%)
HSB
hsb(15, 80%, 98%)
CMYK
cmyk(0%, 60%, 80%, 2%)
Oklch
oklch(68.8% 0.194 38.2)

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

#FFB12A

Ginger · GoldenRod · Warm Sun

HEX
#FFB12A
RGB
rgb(255, 177, 42)
HSL
hsl(38, 100%, 58%)
HSB
hsb(38, 84%, 100%)
CMYK
cmyk(0%, 31%, 84%, 0%)
Oklch
oklch(81.5% 0.162 74.8)

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

#FCEE9B

Fresh Green · Khaki · Lemon Cream

HEX
#FCEE9B
RGB
rgb(252, 238, 155)
HSL
hsl(51, 94%, 80%)
HSB
hsb(51, 38%, 99%)
CMYK
cmyk(0%, 6%, 38%, 1%)
Oklch
oklch(94.2% 0.104 99.8)

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

#FB2255

Vermilion · Crimson · Passion Red

HEX
#FB2255
RGB
rgb(251, 34, 85)
HSL
hsl(346, 96%, 56%)
HSB
hsb(346, 86%, 98%)
CMYK
cmyk(0%, 86%, 66%, 2%)
Oklch
oklch(63.7% 0.241 16.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BA2737
27B9A8

Analogous

B92781
BA2737
B95F27

Triadic

BA2737
38B927
2738B9

Split-Comp.

BA2737
27B95F
2781B9

Tetradic

BA2737
81B927
27B9A8
5F27B9

Contrast Matrix WCAG 2.1 Contrast

BA2737
FA6431
FFB12A
FCEE9B
FB2255
—
2.0
Fail
3.4
AA Large
5.2
AA
1.6
Fail
2.0
Fail
—
1.7
Fail
2.6
Fail
1.3
Fail
3.4
AA Large
1.7
Fail
—
1.5
Fail
2.1
Fail
5.2
AA
2.6
Fail
1.5
Fail
—
3.3
AA Large
1.6
Fail
1.3
Fail
2.1
Fail
3.3
AA Large
—
White BG
6.1AA
3.0AA Large
1.8Fail
1.2Fail
3.8AA Large
Black BG
3.4AA Large
6.9AA
11.6AAA
17.8AAA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7933
B9B83D
DDDD4B
F6F6AF
9D9B49

Deuteranopia

838E32
C2CD40
E2E853
F7F8B4
AABA46

Tritanopia

B3302F
F34749
FB646A
FBBFC2
F03F3D

Achromatopsia

555555
8B8B8B
B9B9B9
E9E9E9
696969

Shades & Tints Shades & Tints

#BA2737

Dark
Light

#FA6431

Dark
Light

#FFB12A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ba2737;
  --color-2: #fa6431;
  --color-3: #ffb12a;
  --color-4: #fcee9b;
  --color-5: #fb2255;
}

SCSS

$color-1: #ba2737;
$color-2: #fa6431;
$color-3: #ffb12a;
$color-4: #fcee9b;
$color-5: #fb2255;

TAILWIND

colors: {
  'brand-1': '#ba2737',
  'brand-2': '#fa6431',
  'brand-3': '#ffb12a',
  'brand-4': '#fcee9b',
  'brand-5': '#fb2255',
}

RGB Array

[186, 39, 55], [250, 100, 49], [255, 177, 42], [252, 238, 155], [251, 34, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BA2737, #FA6431, #FFB12A, #FCEE9B, #FB2255 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: #ba2737; --color-2: #fa6431; --color-3: #ffb12a; --color-4: #fcee9b; --color-5: #fb2255. 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