← Back to Editor

#FBA121 · #FF2244 · #3D8476 · #09C6AF · #010D0C

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

#FBA121

Ginger · GoldenRod · Warm Sun

HEX
#FBA121
RGB
rgb(251, 161, 33)
HSL
hsl(35, 96%, 56%)
HSB
hsb(35, 87%, 98%)
CMYK
cmyk(0%, 36%, 87%, 2%)
Oklch
oklch(78.2% 0.164 68.2)

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

#FF2244

Vermilion · Crimson · Passion Red

HEX
#FF2244
RGB
rgb(255, 34, 68)
HSL
hsl(351, 100%, 57%)
HSB
hsb(351, 87%, 100%)
CMYK
cmyk(0%, 87%, 73%, 0%)
Oklch
oklch(64.2% 0.245 21.5)

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

#3D8476

Mineral Blue · SeaGreen · Mint Ice

HEX
#3D8476
RGB
rgb(61, 132, 118)
HSL
hsl(168, 37%, 38%)
HSB
hsb(168, 54%, 52%)
CMYK
cmyk(54%, 0%, 11%, 48%)
Oklch
oklch(56.3% 0.075 178.7)

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

#09C6AF

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#09C6AF
RGB
rgb(9, 198, 175)
HSL
hsl(173, 91%, 41%)
HSB
hsb(173, 95%, 78%)
CMYK
cmyk(95%, 0%, 12%, 22%)
Oklch
oklch(74.1% 0.133 180.4)

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

#010D0C

Mineral Blue · Black · Peacock Green

HEX
#010D0C
RGB
rgb(1, 13, 12)
HSL
hsl(175, 86%, 3%)
HSB
hsb(175, 92%, 5%)
CMYK
cmyk(92%, 0%, 8%, 95%)
Oklch
oklch(14.5% 0.022 189.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBA121
237DFB

Analogous

FB3523
FBA121
E9FB23

Triadic

FBA121
23FBA1
A123FB

Split-Comp.

FBA121
23E9FB
3523FB

Tetradic

FBA121
23FB35
237DFB
FB23E9

Contrast Matrix WCAG 2.1 Contrast

FBA121
FF2244
3D8476
09C6AF
010D0C
—
1.8
Fail
2.1
Fail
1.1
Fail
9.6
AAA
1.8
Fail
—
1.2
Fail
1.7
Fail
5.2
AA
2.1
Fail
1.2
Fail
—
2.0
Fail
4.5
AA Large
1.1
Fail
1.7
Fail
2.0
Fail
—
9.1
AAA
9.6
AAA
5.2
AA
4.5
AA Large
9.1
AAA
—
White BG
2.1Fail
3.8AA Large
4.4AA Large
2.2Fail
19.7AAA
Black BG
10.2AAA
5.6AA
4.8AA
9.7AAA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D340
9F9D3C
5C5C79
5B5DB5
06060C

Deuteranopia

D9E047
ACBD3A
58527A
5042B6
06050C

Tritanopia

F7585E
F43534
417C7D
12B9BA
020C0C

Achromatopsia

ADADAD
686868
6D6D6D
8B8B8B
090909

Shades & Tints Shades & Tints

#FBA121

Dark
Light

#FF2244

Dark
Light

#3D8476

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fba121;
  --color-2: #ff2244;
  --color-3: #3d8476;
  --color-4: #09c6af;
  --color-5: #010d0c;
}

SCSS

$color-1: #fba121;
$color-2: #ff2244;
$color-3: #3d8476;
$color-4: #09c6af;
$color-5: #010d0c;

TAILWIND

colors: {
  'brand-1': '#fba121',
  'brand-2': '#ff2244',
  'brand-3': '#3d8476',
  'brand-4': '#09c6af',
  'brand-5': '#010d0c',
}

RGB Array

[251, 161, 33], [255, 34, 68], [61, 132, 118], [9, 198, 175], [1, 13, 12]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBA121, #FF2244, #3D8476, #09C6AF, #010D0C 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: #fba121; --color-2: #ff2244; --color-3: #3d8476; --color-4: #09c6af; --color-5: #010d0c. 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