← Back to Editor

#8CCBD0 · #F9F3B5 · #FEC02D · #ED6E29 · #504C4D

summer

A 5-color summer 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

#8CCBD0

Sky Blue · SkyBlue · Lake Green

HEX
#8CCBD0
RGB
rgb(140, 203, 208)
HSL
hsl(184, 42%, 68%)
HSB
hsb(184, 33%, 82%)
CMYK
cmyk(33%, 2%, 0%, 18%)
Oklch
oklch(80.1% 0.064 202.2)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#F9F3B5

Fresh Green · Wheat · Lemon Cream

HEX
#F9F3B5
RGB
rgb(249, 243, 181)
HSL
hsl(55, 85%, 84%)
HSB
hsb(55, 27%, 98%)
CMYK
cmyk(0%, 2%, 27%, 2%)
Oklch
oklch(95.4% 0.079 103.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#FEC02D

Ginger · GoldenRod · Sunflower

HEX
#FEC02D
RGB
rgb(254, 192, 45)
HSL
hsl(42, 99%, 59%)
HSB
hsb(42, 82%, 100%)
CMYK
cmyk(0%, 24%, 82%, 0%)
Oklch
oklch(84.2% 0.163 83.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#ED6E29

Tangerine · Chocolate · Warm Sun

HEX
#ED6E29
RGB
rgb(237, 110, 41)
HSL
hsl(21, 84%, 55%)
HSB
hsb(21, 83%, 93%)
CMYK
cmyk(0%, 54%, 83%, 7%)
Oklch
oklch(68.1% 0.175 45.1)

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

#504C4D

Ink Gray · DarkSlateGray · Charcoal

HEX
#504C4D
RGB
rgb(80, 76, 77)
HSL
hsl(345, 3%, 31%)
HSB
hsb(345, 5%, 31%)
CMYK
cmyk(0%, 5%, 4%, 69%)
Oklch
oklch(42.1% 0.006 0.2)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8CCBD0
D0908B

Analogous

8BD0B2
8CCBD0
8BA9D0

Triadic

8CCBD0
D08BCB
CBD08B

Split-Comp.

8CCBD0
D08BA9
D0B28B

Tetradic

8CCBD0
B28BD0
D0908B
A9D08B

Contrast Matrix WCAG 2.1 Contrast

8CCBD0
F9F3B5
FEC02D
ED6E29
504C4D
—
1.6
Fail
1.1
Fail
1.7
Fail
4.7
AA
1.6
Fail
—
1.4
Fail
2.7
Fail
7.5
AAA
1.1
Fail
1.4
Fail
—
1.9
Fail
5.2
AA
1.7
Fail
2.7
Fail
1.9
Fail
—
2.8
Fail
4.7
AA
7.5
AAA
5.2
AA
2.8
Fail
—
White BG
1.8Fail
1.1Fail
1.6Fail
3.1AA Large
8.5AAA
Black BG
11.6AAA
18.5AAA
12.8AAA
6.9AA
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A8CF
F6F6C4
E3E351
B6B53A
4E4E4D

Deuteranopia

A49FCF
F7F7C8
E7EB59
BDC73E
4F4F4D

Tritanopia

8FCECE
F9D0D2
FB6D73
E7474A
504D4D

Achromatopsia

B9B9B9
EEEEEE
C2C2C2
8C8C8C
4D4D4D

Shades & Tints Shades & Tints

#8CCBD0

Dark
Light

#F9F3B5

Dark
Light

#FEC02D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ccbd0;
  --color-2: #f9f3b5;
  --color-3: #fec02d;
  --color-4: #ed6e29;
  --color-5: #504c4d;
}

SCSS

$color-1: #8ccbd0;
$color-2: #f9f3b5;
$color-3: #fec02d;
$color-4: #ed6e29;
$color-5: #504c4d;

TAILWIND

colors: {
  'brand-1': '#8ccbd0',
  'brand-2': '#f9f3b5',
  'brand-3': '#fec02d',
  'brand-4': '#ed6e29',
  'brand-5': '#504c4d',
}

RGB Array

[140, 203, 208], [249, 243, 181], [254, 192, 45], [237, 110, 41], [80, 76, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #8CCBD0, #F9F3B5, #FEC02D, #ED6E29, #504C4D 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: #8ccbd0; --color-2: #f9f3b5; --color-3: #fec02d; --color-4: #ed6e29; --color-5: #504c4d. 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 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