← Back to Editor

#FAE1A2 · #007C77 · #FC5738 · #FA843F · #F8AB47

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

#FAE1A2

Goose Yellow · Wheat · Lemon Cream

HEX
#FAE1A2
RGB
rgb(250, 225, 162)
HSL
hsl(43, 90%, 81%)
HSB
hsb(43, 35%, 98%)
CMYK
cmyk(0%, 10%, 35%, 2%)
Oklch
oklch(91.6% 0.085 88.8)

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

#007C77

Mineral Blue · Teal · Peacock Green

HEX
#007C77
RGB
rgb(0, 124, 119)
HSL
hsl(178, 100%, 24%)
HSB
hsb(178, 100%, 49%)
CMYK
cmyk(100%, 0%, 4%, 51%)
Oklch
oklch(52.9% 0.091 189.8)

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

#FC5738

Vermilion · Tomato · Passion Red

HEX
#FC5738
RGB
rgb(252, 87, 56)
HSL
hsl(9, 97%, 60%)
HSB
hsb(9, 78%, 99%)
CMYK
cmyk(0%, 65%, 78%, 1%)
Oklch
oklch(67.6% 0.206 32.8)

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

#FA843F

Apricot · Coral · Warm Sun

HEX
#FA843F
RGB
rgb(250, 132, 63)
HSL
hsl(22, 95%, 61%)
HSB
hsb(22, 75%, 98%)
CMYK
cmyk(0%, 47%, 75%, 2%)
Oklch
oklch(73.4% 0.165 48.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F8AB47

Ginger · SandyBrown · Warm Sun

HEX
#F8AB47
RGB
rgb(248, 171, 71)
HSL
hsl(34, 93%, 63%)
HSB
hsb(34, 71%, 97%)
CMYK
cmyk(0%, 31%, 71%, 3%)
Oklch
oklch(79.8% 0.144 69.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAE1A2
A3BCFA

Analogous

FAB6A3
FAE1A2
E7FAA3

Triadic

FAE1A2
A3FAE1
E1A3FA

Split-Comp.

FAE1A2
A3E7FA
B6A3FA

Tetradic

FAE1A2
A3FAB6
A3BCFA
FAA3E7

Contrast Matrix WCAG 2.1 Contrast

FAE1A2
007C77
FC5738
FA843F
F8AB47
—
3.9
AA Large
2.5
Fail
1.9
Fail
1.5
Fail
3.9
AA Large
—
1.6
Fail
2.0
Fail
2.6
Fail
2.5
Fail
1.6
Fail
—
1.3
Fail
1.7
Fail
1.9
Fail
2.0
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
2.6
Fail
1.7
Fail
1.3
Fail
—
White BG
1.3Fail
5.1AA
3.2AA Large
2.5Fail
1.9Fail
Black BG
16.4AAA
4.1AA Large
6.6AA
8.4AAA
10.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFB1
363778
B5B340
C7C650
D7D65F

Deuteranopia

F1F3B5
2F2579
BECA41
CED754
DBE165

Tritanopia

F9BDC0
067979
F44547
F45D60
F47277

Achromatopsia

E1E1E1
565656
858585
9F9F9F
B7B7B7

Shades & Tints Shades & Tints

#FAE1A2

Dark
Light

#007C77

Dark
Light

#FC5738

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fae1a2;
  --color-2: #007c77;
  --color-3: #fc5738;
  --color-4: #fa843f;
  --color-5: #f8ab47;
}

SCSS

$color-1: #fae1a2;
$color-2: #007c77;
$color-3: #fc5738;
$color-4: #fa843f;
$color-5: #f8ab47;

TAILWIND

colors: {
  'brand-1': '#fae1a2',
  'brand-2': '#007c77',
  'brand-3': '#fc5738',
  'brand-4': '#fa843f',
  'brand-5': '#f8ab47',
}

RGB Array

[250, 225, 162], [0, 124, 119], [252, 87, 56], [250, 132, 63], [248, 171, 71]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FAE1A2, #007C77, #FC5738, #FA843F, #F8AB47 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #fae1a2; --color-2: #007c77; --color-3: #fc5738; --color-4: #fa843f; --color-5: #f8ab47. 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. 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