← Back to Editor

#F9BB58 · #F69E6E · #CF8373 · #A97C83 · #7D839D

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

#F9BB58

Ginger · SandyBrown · Warm Sun

HEX
#F9BB58
RGB
rgb(249, 187, 88)
HSL
hsl(37, 93%, 66%)
HSB
hsb(37, 65%, 98%)
CMYK
cmyk(0%, 25%, 65%, 2%)
Oklch
oklch(83.1% 0.135 76.6)

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

#F69E6E

Apricot · LightSalmon · Warm Sun

HEX
#F69E6E
RGB
rgb(246, 158, 110)
HSL
hsl(21, 88%, 70%)
HSB
hsb(21, 55%, 96%)
CMYK
cmyk(0%, 36%, 55%, 4%)
Oklch
oklch(77.8% 0.123 48.9)

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

#CF8373

Peach Pink · DarkSalmon · Coral Red

HEX
#CF8373
RGB
rgb(207, 131, 115)
HSL
hsl(10, 49%, 63%)
HSB
hsb(10, 44%, 81%)
CMYK
cmyk(0%, 37%, 44%, 19%)
Oklch
oklch(68.5% 0.098 32.6)

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

#A97C83

Crimson · Gray · Passion Red

HEX
#A97C83
RGB
rgb(169, 124, 131)
HSL
hsl(351, 21%, 57%)
HSB
hsb(351, 27%, 66%)
CMYK
cmyk(0%, 27%, 22%, 34%)
Oklch
oklch(63.3% 0.057 8.5)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#7D839D

Azure · LightSlateGray · Navy Blue

HEX
#7D839D
RGB
rgb(125, 131, 157)
HSL
hsl(229, 14%, 55%)
HSB
hsb(229, 20%, 62%)
CMYK
cmyk(20%, 17%, 0%, 38%)
Oklch
oklch(61.4% 0.040 275.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9BB58
5895F9

Analogous

F96A58
F9BB58
E6F958

Triadic

F9BB58
58F9BB
BB58F9

Split-Comp.

F9BB58
58E6F9
6A58F9

Tetradic

F9BB58
58F96A
5895F9
F958E6

Contrast Matrix WCAG 2.1 Contrast

F9BB58
F69E6E
CF8373
A97C83
7D839D
—
1.2
Fail
1.7
Fail
2.1
Fail
2.2
Fail
1.2
Fail
—
1.4
Fail
1.7
Fail
1.8
Fail
1.7
Fail
1.4
Fail
—
1.2
Fail
1.3
Fail
2.1
Fail
1.7
Fail
1.2
Fail
—
1.1
Fail
2.2
Fail
1.8
Fail
1.3
Fail
1.1
Fail
—
White BG
1.7Fail
2.1Fail
2.9Fail
3.6AA Large
3.7AA Large
Black BG
12.3AAA
10.0AAA
7.1AAA
5.9AA
5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDE70
D0CF7A
AEAD77
969581
808097

Deuteranopia

E2E676
D5DC7C
B3B878
989C81
7F7F95

Tritanopia

F68387
F28385
CB7A7B
A78080
7D9291

Achromatopsia

C2C2C2
B3B3B3
989898
8A8A8A
848484

Shades & Tints Shades & Tints

#F9BB58

Dark
Light

#F69E6E

Dark
Light

#CF8373

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9bb58;
  --color-2: #f69e6e;
  --color-3: #cf8373;
  --color-4: #a97c83;
  --color-5: #7d839d;
}

SCSS

$color-1: #f9bb58;
$color-2: #f69e6e;
$color-3: #cf8373;
$color-4: #a97c83;
$color-5: #7d839d;

TAILWIND

colors: {
  'brand-1': '#f9bb58',
  'brand-2': '#f69e6e',
  'brand-3': '#cf8373',
  'brand-4': '#a97c83',
  'brand-5': '#7d839d',
}

RGB Array

[249, 187, 88], [246, 158, 110], [207, 131, 115], [169, 124, 131], [125, 131, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #F9BB58, #F69E6E, #CF8373, #A97C83, #7D839D 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: #f9bb58; --color-2: #f69e6e; --color-3: #cf8373; --color-4: #a97c83; --color-5: #7d839d. 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