← Back to Editor

#27595E · #377E84 · #FFD932 · #F9BC40 · #E0A118

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 App

Color Details Color Details

#27595E

Slate Blue · DarkSlateGray · Mint Ice

HEX
#27595E
RGB
rgb(39, 89, 94)
HSL
hsl(185, 41%, 26%)
HSB
hsb(185, 59%, 37%)
CMYK
cmyk(59%, 5%, 0%, 63%)
Oklch
oklch(43.2% 0.054 204.1)

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

#377E84

Slate Blue · SeaGreen · Mint Ice

HEX
#377E84
RGB
rgb(55, 126, 132)
HSL
hsl(185, 41%, 37%)
HSB
hsb(185, 58%, 52%)
CMYK
cmyk(58%, 5%, 0%, 48%)
Oklch
oklch(55.1% 0.071 202.8)

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

#FFD932

Ginger · Gold · Sunflower

HEX
#FFD932
RGB
rgb(255, 217, 50)
HSL
hsl(49, 100%, 60%)
HSB
hsb(49, 80%, 100%)
CMYK
cmyk(0%, 15%, 80%, 0%)
Oklch
oklch(89.2% 0.172 95.1)

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

#F9BC40

Ginger · SandyBrown · Sunflower

HEX
#F9BC40
RGB
rgb(249, 188, 64)
HSL
hsl(40, 94%, 61%)
HSB
hsb(40, 74%, 98%)
CMYK
cmyk(0%, 24%, 74%, 2%)
Oklch
oklch(83.1% 0.151 81.1)

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

#E0A118

Ochre · GoldenRod · Honey Gold

HEX
#E0A118
RGB
rgb(224, 161, 24)
HSL
hsl(41, 81%, 49%)
HSB
hsb(41, 89%, 88%)
CMYK
cmyk(0%, 28%, 89%, 12%)
Oklch
oklch(75.0% 0.151 79.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

27595E
5D2C27

Analogous

275D47
27595E
273E5D

Triadic

27595E
5D2759
595D27

Split-Comp.

27595E
5D273E
5D4727

Tetradic

27595E
47275D
5D2C27
3E5D27

Contrast Matrix WCAG 2.1 Contrast

27595E
377E84
FFD932
F9BC40
E0A118
—
1.7
Fail
5.7
AA
4.6
AA
3.5
AA Large
1.7
Fail
—
3.4
AA Large
2.7
Fail
2.1
Fail
5.7
AA
3.4
AA Large
—
1.2
Fail
1.6
Fail
4.6
AA
2.7
Fail
1.2
Fail
—
1.3
Fail
3.5
AA Large
2.1
Fail
1.6
Fail
1.3
Fail
—
White BG
7.8AAA
4.7AA
1.4Fail
1.7Fail
2.3Fail
Black BG
2.7Fail
4.5AA Large
15.2AAA
12.3AAA
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3D3D5D
565683
EFEE5A
DFDE5E
C5C439

Deuteranopia

3A365D
524C82
F1F464
E2E765
C8CD41

Tritanopia

2A5C5C
3B8181
FD7A81
F6767B
DD5359

Achromatopsia

4B4B4B
696969
D1D1D1
C0C0C0
A4A4A4

Shades & Tints Shades & Tints

#27595E

Dark
Light

#377E84

Dark
Light

#FFD932

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #27595e;
  --color-2: #377e84;
  --color-3: #ffd932;
  --color-4: #f9bc40;
  --color-5: #e0a118;
}

SCSS

$color-1: #27595e;
$color-2: #377e84;
$color-3: #ffd932;
$color-4: #f9bc40;
$color-5: #e0a118;

TAILWIND

colors: {
  'brand-1': '#27595e',
  'brand-2': '#377e84',
  'brand-3': '#ffd932',
  'brand-4': '#f9bc40',
  'brand-5': '#e0a118',
}

RGB Array

[39, 89, 94], [55, 126, 132], [255, 217, 50], [249, 188, 64], [224, 161, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #27595E, #377E84, #FFD932, #F9BC40, #E0A118 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: #27595e; --color-2: #377e84; --color-3: #ffd932; --color-4: #f9bc40; --color-5: #e0a118. 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