← Back to Editor

#F84600 · #FCF2E8 · #F5D77F · #C0CCB4 · #4E8989

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

#F84600

Tangerine · OrangeRed · Amber Brown

HEX
#F84600
RGB
rgb(248, 70, 0)
HSL
hsl(17, 100%, 49%)
HSB
hsb(17, 100%, 97%)
CMYK
cmyk(0%, 72%, 100%, 3%)
Oklch
oklch(64.9% 0.222 36.0)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#FCF2E8

Goose Yellow · Linen · Peach Orange

HEX
#FCF2E8
RGB
rgb(252, 242, 232)
HSL
hsl(30, 77%, 95%)
HSB
hsb(30, 8%, 99%)
CMYK
cmyk(0%, 4%, 8%, 1%)
Oklch
oklch(96.6% 0.017 67.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#F5D77F

Goose Yellow · Khaki · Sunflower

HEX
#F5D77F
RGB
rgb(245, 215, 127)
HSL
hsl(45, 86%, 73%)
HSB
hsb(45, 48%, 96%)
CMYK
cmyk(0%, 12%, 48%, 4%)
Oklch
oklch(88.6% 0.113 91.2)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#C0CCB4

Celadon · Silver · Apple Green

HEX
#C0CCB4
RGB
rgb(192, 204, 180)
HSL
hsl(90, 19%, 75%)
HSB
hsb(90, 12%, 80%)
CMYK
cmyk(6%, 0%, 12%, 20%)
Oklch
oklch(82.9% 0.035 128.9)

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

#4E8989

Slate Blue · CadetBlue · Mint Ice

HEX
#4E8989
RGB
rgb(78, 137, 137)
HSL
hsl(180, 27%, 42%)
HSB
hsb(180, 43%, 54%)
CMYK
cmyk(43%, 0%, 0%, 46%)
Oklch
oklch(59.0% 0.062 195.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F84600
00B3FA

Analogous

FA0036
F84600
FAC400

Triadic

F84600
00FA47
4700FA

Split-Comp.

F84600
00FAC4
0036FA

Tetradic

F84600
36FA00
00B3FA
C400FA

Contrast Matrix WCAG 2.1 Contrast

F84600
FCF2E8
F5D77F
C0CCB4
4E8989
—
3.2
AA Large
2.5
Fail
2.1
Fail
1.1
Fail
3.2
AA Large
—
1.3
Fail
1.5
Fail
3.6
AA Large
2.5
Fail
1.3
Fail
—
1.2
Fail
2.8
Fail
2.1
Fail
1.5
Fail
1.2
Fail
—
2.4
Fail
1.1
Fail
3.6
AA Large
2.8
Fail
2.4
Fail
—
White BG
3.6AA Large
1.1Fail
1.4Fail
1.7Fail
4.0AA Large
Black BG
5.9AA
19.0AAA
14.9AAA
12.5AAA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABA911
F8F8EA
E8E894
C5C5BA
686889

Deuteranopia

B5C315
F8F9EB
EAEC99
C5C4BB
646089

Tritanopia

EF1E21
FBECED
F4A5A9
C1BEBF
518989

Achromatopsia

737373
F4F4F4
D6D6D6
C6C6C6
777777

Shades & Tints Shades & Tints

#F84600

Dark
Light

#FCF2E8

Dark
Light

#F5D77F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f84600;
  --color-2: #fcf2e8;
  --color-3: #f5d77f;
  --color-4: #c0ccb4;
  --color-5: #4e8989;
}

SCSS

$color-1: #f84600;
$color-2: #fcf2e8;
$color-3: #f5d77f;
$color-4: #c0ccb4;
$color-5: #4e8989;

TAILWIND

colors: {
  'brand-1': '#f84600',
  'brand-2': '#fcf2e8',
  'brand-3': '#f5d77f',
  'brand-4': '#c0ccb4',
  'brand-5': '#4e8989',
}

RGB Array

[248, 70, 0], [252, 242, 232], [245, 215, 127], [192, 204, 180], [78, 137, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F84600, #FCF2E8, #F5D77F, #C0CCB4, #4E8989 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #f84600; --color-2: #fcf2e8; --color-3: #f5d77f; --color-4: #c0ccb4; --color-5: #4e8989. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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