← Back to Editor

#FD8A62 · #F4A56E · #FBBE55 · #E9D57B · #697783

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

#FD8A62

Apricot · Salmon · Warm Sun

HEX
#FD8A62
RGB
rgb(253, 138, 98)
HSL
hsl(15, 97%, 69%)
HSB
hsb(15, 61%, 99%)
CMYK
cmyk(0%, 45%, 61%, 1%)
Oklch
oklch(75.2% 0.150 39.7)

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

#F4A56E

Apricot · SandyBrown · Warm Sun

HEX
#F4A56E
RGB
rgb(244, 165, 110)
HSL
hsl(25, 86%, 69%)
HSB
hsb(25, 55%, 96%)
CMYK
cmyk(0%, 32%, 55%, 4%)
Oklch
oklch(78.8% 0.118 55.0)

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

#FBBE55

Ginger · SandyBrown · Warm Sun

HEX
#FBBE55
RGB
rgb(251, 190, 85)
HSL
hsl(38, 95%, 66%)
HSB
hsb(38, 66%, 98%)
CMYK
cmyk(0%, 24%, 66%, 2%)
Oklch
oklch(83.8% 0.139 78.3)

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

#E9D57B

Ginger · Khaki · Sunflower

HEX
#E9D57B
RGB
rgb(233, 213, 123)
HSL
hsl(49, 71%, 70%)
HSB
hsb(49, 47%, 91%)
CMYK
cmyk(0%, 9%, 47%, 9%)
Oklch
oklch(87.1% 0.113 97.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#697783

Slate Blue · SlateGray · Navy Blue

HEX
#697783
RGB
rgb(105, 119, 131)
HSL
hsl(208, 11%, 46%)
HSB
hsb(208, 20%, 51%)
CMYK
cmyk(20%, 9%, 0%, 49%)
Oklch
oklch(56.2% 0.025 244.1)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD8A62
63D6FD

Analogous

FD638A
FD8A62
FDD663

Triadic

FD8A62
63FD8A
8A63FD

Split-Comp.

FD8A62
63FDD6
638AFD

Tetradic

FD8A62
8AFD63
63D6FD
D663FD

Contrast Matrix WCAG 2.1 Contrast

FD8A62
F4A56E
FBBE55
E9D57B
697783
—
1.2
Fail
1.4
Fail
1.6
Fail
2.0
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
2.3
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
2.8
Fail
1.6
Fail
1.4
Fail
1.1
Fail
—
3.1
AA Large
2.0
Fail
2.3
Fail
2.8
Fail
3.1
AA Large
—
White BG
2.3Fail
2.0Fail
1.7Fail
1.5Fail
4.6AA
Black BG
9.0AAA
10.5AAA
12.6AAA
14.3AAA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCA6C
D2D17B
E1E06E
E0E091
6F6F80

Deuteranopia

D2DB6E
D6DC7F
E4E975
E2E396
6E6D7F

Tritanopia

F77375
F08688
F88287
E8A2A6
6A7E7D

Achromatopsia

A8A8A8
B6B6B6
C4C4C4
D1D1D1
747474

Shades & Tints Shades & Tints

#FD8A62

Dark
Light

#F4A56E

Dark
Light

#FBBE55

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd8a62;
  --color-2: #f4a56e;
  --color-3: #fbbe55;
  --color-4: #e9d57b;
  --color-5: #697783;
}

SCSS

$color-1: #fd8a62;
$color-2: #f4a56e;
$color-3: #fbbe55;
$color-4: #e9d57b;
$color-5: #697783;

TAILWIND

colors: {
  'brand-1': '#fd8a62',
  'brand-2': '#f4a56e',
  'brand-3': '#fbbe55',
  'brand-4': '#e9d57b',
  'brand-5': '#697783',
}

RGB Array

[253, 138, 98], [244, 165, 110], [251, 190, 85], [233, 213, 123], [105, 119, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FD8A62, #F4A56E, #FBBE55, #E9D57B, #697783 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: #fd8a62; --color-2: #f4a56e; --color-3: #fbbe55; --color-4: #e9d57b; --color-5: #697783. 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