← Back to Editor

#FD8C62 · #B78191 · #6E6D97 · #24A3AC · #07C0B2

summer

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FD8C62

Apricot · Salmon · Warm Sun

HEX
#FD8C62
RGB
rgb(253, 140, 98)
HSL
hsl(16, 97%, 69%)
HSB
hsb(16, 61%, 99%)
CMYK
cmyk(0%, 45%, 61%, 1%)
Oklch
oklch(75.5% 0.149 40.8)

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

#B78191

Rouge · DarkGray · Rose Pink

HEX
#B78191
RGB
rgb(183, 129, 145)
HSL
hsl(342, 27%, 61%)
HSB
hsb(342, 30%, 72%)
CMYK
cmyk(0%, 30%, 21%, 28%)
Oklch
oklch(66.2% 0.070 359.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#6E6D97

Deep Indigo · SlateGray · Navy Blue

HEX
#6E6D97
RGB
rgb(110, 109, 151)
HSL
hsl(241, 17%, 51%)
HSB
hsb(241, 28%, 59%)
CMYK
cmyk(27%, 28%, 0%, 41%)
Oklch
oklch(55.2% 0.065 285.2)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#24A3AC

Lake Blue · LightSeaGreen · Mint Ice

HEX
#24A3AC
RGB
rgb(36, 163, 172)
HSL
hsl(184, 65%, 41%)
HSB
hsb(184, 79%, 67%)
CMYK
cmyk(79%, 5%, 0%, 33%)
Oklch
oklch(65.5% 0.104 202.3)

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

#07C0B2

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#07C0B2
RGB
rgb(7, 192, 178)
HSL
hsl(175, 93%, 39%)
HSB
hsb(175, 96%, 75%)
CMYK
cmyk(96%, 0%, 7%, 25%)
Oklch
oklch(72.7% 0.127 185.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD8C62
63D4FD

Analogous

FD6387
FD8C62
FDD963

Triadic

FD8C62
63FD8C
8C63FD

Split-Comp.

FD8C62
63FDD9
6387FD

Tetradic

FD8C62
87FD63
63D4FD
D963FD

Contrast Matrix WCAG 2.1 Contrast

FD8C62
B78191
6E6D97
24A3AC
07C0B2
—
1.4
Fail
2.1
Fail
1.3
Fail
1.0
Fail
1.4
Fail
—
1.5
Fail
1.1
Fail
1.4
Fail
2.1
Fail
1.5
Fail
—
1.6
Fail
2.1
Fail
1.3
Fail
1.1
Fail
1.6
Fail
—
1.3
Fail
1.0
Fail
1.4
Fail
2.1
Fail
1.3
Fail
—
White BG
2.3Fail
3.2AA Large
4.9AA
3.0AA Large
2.3Fail
Black BG
9.1AAA
6.6AA
4.3AA Large
6.9AA
9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCB6C
A09F8D
6E6E8D
5B5CAA
5759B5

Deuteranopia

D3DB6F
A3A78C
6E6E8A
544AA9
4C3EB6

Tritanopia

F77476
B48A89
6E8583
2AA8A8
10B8B9

Achromatopsia

A9A9A9
939393
727272
7E7E7E
878787

Shades & Tints Shades & Tints

#FD8C62

Dark
Light

#B78191

Dark
Light

#6E6D97

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd8c62;
  --color-2: #b78191;
  --color-3: #6e6d97;
  --color-4: #24a3ac;
  --color-5: #07c0b2;
}

SCSS

$color-1: #fd8c62;
$color-2: #b78191;
$color-3: #6e6d97;
$color-4: #24a3ac;
$color-5: #07c0b2;

TAILWIND

colors: {
  'brand-1': '#fd8c62',
  'brand-2': '#b78191',
  'brand-3': '#6e6d97',
  'brand-4': '#24a3ac',
  'brand-5': '#07c0b2',
}

RGB Array

[253, 140, 98], [183, 129, 145], [110, 109, 151], [36, 163, 172], [7, 192, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #FD8C62, #B78191, #6E6D97, #24A3AC, #07C0B2 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fd8c62; --color-2: #b78191; --color-3: #6e6d97; --color-4: #24a3ac; --color-5: #07c0b2. 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 tech, SaaS, healthcare, eco industries. 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