← Back to Editor

#FD4130 · #FF942D · #F3DB18 · #B5D8AB · #97F3E4

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

#FD4130

Vermilion · Tomato · Passion Red

HEX
#FD4130
RGB
rgb(253, 65, 48)
HSL
hsl(5, 98%, 59%)
HSB
hsb(5, 81%, 99%)
CMYK
cmyk(0%, 74%, 81%, 1%)
Oklch
oklch(65.6% 0.226 29.6)

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

#FF942D

Tangerine · Coral · Warm Sun

HEX
#FF942D
RGB
rgb(255, 148, 45)
HSL
hsl(29, 100%, 59%)
HSB
hsb(29, 82%, 100%)
CMYK
cmyk(0%, 42%, 82%, 0%)
Oklch
oklch(76.5% 0.167 58.5)

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

#F3DB18

Autumn Sage · Gold · Sunflower

HEX
#F3DB18
RGB
rgb(243, 219, 24)
HSL
hsl(53, 90%, 52%)
HSB
hsb(53, 90%, 95%)
CMYK
cmyk(0%, 10%, 90%, 5%)
Oklch
oklch(88.4% 0.181 101.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#B5D8AB

Celadon · Silver · Apple Green

HEX
#B5D8AB
RGB
rgb(181, 216, 171)
HSL
hsl(107, 37%, 76%)
HSB
hsb(107, 21%, 85%)
CMYK
cmyk(16%, 0%, 21%, 15%)
Oklch
oklch(84.5% 0.072 138.8)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#97F3E4

Jade · LightBlue · Glacier Blue

HEX
#97F3E4
RGB
rgb(151, 243, 228)
HSL
hsl(170, 79%, 77%)
HSB
hsb(170, 38%, 95%)
CMYK
cmyk(38%, 0%, 6%, 5%)
Oklch
oklch(90.2% 0.091 182.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD4130
30ECFD

Analogous

FD3085
FD4130
FDA830

Triadic

FD4130
30FD41
4130FD

Split-Comp.

FD4130
30FDA8
3085FD

Tetradic

FD4130
85FD30
30ECFD
A830FD

Contrast Matrix WCAG 2.1 Contrast

FD4130
FF942D
F3DB18
B5D8AB
97F3E4
—
1.6
Fail
2.5
Fail
2.2
Fail
2.7
Fail
1.6
Fail
—
1.6
Fail
1.4
Fail
1.7
Fail
2.5
Fail
1.6
Fail
—
1.1
Fail
1.1
Fail
2.2
Fail
1.4
Fail
1.1
Fail
—
1.2
Fail
2.7
Fail
1.7
Fail
1.1
Fail
1.2
Fail
—
White BG
3.5AA Large
2.2Fail
1.4Fail
1.6Fail
1.3Fail
Black BG
6.0AA
9.5AAA
15.0AAA
13.4AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAA34
D1D046
E9E847
C4C4B6
BFC0E8

Deuteranopia

B7C535
D7DF4C
EAEC53
C2C0B9
BAB3E9

Tritanopia

F43738
FA5A5E
F26C75
B7BEC0
9CEAEB

Achromatopsia

777777
A8A8A8
CCCCCC
C8C8C8
D6D6D6

Shades & Tints Shades & Tints

#FD4130

Dark
Light

#FF942D

Dark
Light

#F3DB18

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd4130;
  --color-2: #ff942d;
  --color-3: #f3db18;
  --color-4: #b5d8ab;
  --color-5: #97f3e4;
}

SCSS

$color-1: #fd4130;
$color-2: #ff942d;
$color-3: #f3db18;
$color-4: #b5d8ab;
$color-5: #97f3e4;

TAILWIND

colors: {
  'brand-1': '#fd4130',
  'brand-2': '#ff942d',
  'brand-3': '#f3db18',
  'brand-4': '#b5d8ab',
  'brand-5': '#97f3e4',
}

RGB Array

[253, 65, 48], [255, 148, 45], [243, 219, 24], [181, 216, 171], [151, 243, 228]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FD4130, #FF942D, #F3DB18, #B5D8AB, #97F3E4 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: #fd4130; --color-2: #ff942d; --color-3: #f3db18; --color-4: #b5d8ab; --color-5: #97f3e4. 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