← Back to Editor

#F7B183 · #F14444 · #AF1A1A · #EC9A2F · #F8D86F

summer

A 5-color summer palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#F7B183

Apricot · LightSalmon · Warm Sun

HEX
#F7B183
RGB
rgb(247, 177, 131)
HSL
hsl(24, 88%, 74%)
HSB
hsb(24, 47%, 97%)
CMYK
cmyk(0%, 28%, 47%, 3%)
Oklch
oklch(81.6% 0.102 54.1)

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

#F14444

Peach Pink · Tomato · Coral Red

HEX
#F14444
RGB
rgb(241, 68, 68)
HSL
hsl(0, 86%, 61%)
HSB
hsb(0, 72%, 95%)
CMYK
cmyk(0%, 72%, 72%, 5%)
Oklch
oklch(64.0% 0.210 25.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#AF1A1A

Vermilion · FireBrick · Wine Red

HEX
#AF1A1A
RGB
rgb(175, 26, 26)
HSL
hsl(0, 74%, 39%)
HSB
hsb(0, 85%, 69%)
CMYK
cmyk(0%, 85%, 85%, 31%)
Oklch
oklch(48.5% 0.183 27.5)

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

#EC9A2F

Ginger · GoldenRod · Warm Sun

HEX
#EC9A2F
RGB
rgb(236, 154, 47)
HSL
hsl(34, 83%, 55%)
HSB
hsb(34, 80%, 93%)
CMYK
cmyk(0%, 35%, 80%, 7%)
Oklch
oklch(75.2% 0.150 67.9)

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

#F8D86F

Ginger · Khaki · Sunflower

HEX
#F8D86F
RGB
rgb(248, 216, 111)
HSL
hsl(46, 91%, 70%)
HSB
hsb(46, 55%, 97%)
CMYK
cmyk(0%, 13%, 55%, 3%)
Oklch
oklch(88.8% 0.129 92.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7B183
82C8F7

Analogous

F7828E
F7B183
F7EB82

Triadic

F7B183
82F7B1
B182F7

Split-Comp.

F7B183
82F7EB
828EF7

Tetradic

F7B183
8EF782
82C8F7
EB82F7

Contrast Matrix WCAG 2.1 Contrast

F7B183
F14444
AF1A1A
EC9A2F
F8D86F
—
2.0
Fail
3.9
AA Large
1.3
Fail
1.3
Fail
2.0
Fail
—
1.9
Fail
1.6
Fail
2.7
Fail
3.9
AA Large
1.9
Fail
—
3.1
AA Large
5.0
AA
1.3
Fail
1.6
Fail
3.1
AA Large
—
1.6
Fail
1.3
Fail
2.7
Fail
5.0
AA
1.6
Fail
—
White BG
1.8Fail
3.7AA Large
7.0AAA
2.3Fail
1.4Fail
Black BG
11.6AAA
5.7AA
3.0Fail
9.2AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D88E
A6A544
6E6D1A
C8C849
EAEA88

Deuteranopia

DDE291
B0BD44
77821A
CDD34F
ECEE8F

Tritanopia

F39799
E84444
A81A1A
E85D62
F69CA1

Achromatopsia

C1C1C1
787878
474747
A6A6A6
D6D6D6

Shades & Tints Shades & Tints

#F7B183

Dark
Light

#F14444

Dark
Light

#AF1A1A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7b183;
  --color-2: #f14444;
  --color-3: #af1a1a;
  --color-4: #ec9a2f;
  --color-5: #f8d86f;
}

SCSS

$color-1: #f7b183;
$color-2: #f14444;
$color-3: #af1a1a;
$color-4: #ec9a2f;
$color-5: #f8d86f;

TAILWIND

colors: {
  'brand-1': '#f7b183',
  'brand-2': '#f14444',
  'brand-3': '#af1a1a',
  'brand-4': '#ec9a2f',
  'brand-5': '#f8d86f',
}

RGB Array

[247, 177, 131], [241, 68, 68], [175, 26, 26], [236, 154, 47], [248, 216, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #F7B183, #F14444, #AF1A1A, #EC9A2F, #F8D86F 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: #f7b183; --color-2: #f14444; --color-3: #af1a1a; --color-4: #ec9a2f; --color-5: #f8d86f. 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 summer-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