← Back to Editor

#5F747F · #787285 · #A16A85 · #D07E8B · #8D7160

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

#5F747F

Slate Blue · DimGray · Navy Blue

HEX
#5F747F
RGB
rgb(95, 116, 127)
HSL
hsl(201, 14%, 44%)
HSB
hsb(201, 25%, 50%)
CMYK
cmyk(25%, 9%, 0%, 50%)
Oklch
oklch(54.6% 0.030 230.8)

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

#787285

Deep Indigo · Gray · Warm Gray

HEX
#787285
RGB
rgb(120, 114, 133)
HSL
hsl(259, 8%, 48%)
HSB
hsb(259, 14%, 52%)
CMYK
cmyk(10%, 14%, 0%, 48%)
Oklch
oklch(56.4% 0.030 299.9)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#A16A85

Dark Violet · Gray · Rose Pink

HEX
#A16A85
RGB
rgb(161, 106, 133)
HSL
hsl(331, 23%, 52%)
HSB
hsb(331, 34%, 63%)
CMYK
cmyk(0%, 34%, 17%, 37%)
Oklch
oklch(59.1% 0.079 348.9)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#D07E8B

Peach Pink · LightCoral · Coral Red

HEX
#D07E8B
RGB
rgb(208, 126, 139)
HSL
hsl(350, 47%, 65%)
HSB
hsb(350, 39%, 82%)
CMYK
cmyk(0%, 39%, 33%, 18%)
Oklch
oklch(68.4% 0.103 9.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#8D7160

Tangerine · Gray · Amber Brown

HEX
#8D7160
RGB
rgb(141, 113, 96)
HSL
hsl(23, 19%, 46%)
HSB
hsb(23, 32%, 55%)
CMYK
cmyk(0%, 20%, 32%, 45%)
Oklch
oklch(57.1% 0.044 52.8)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F747F
806B60

Analogous

60807B
5F747F
606580

Triadic

5F747F
806075
758060

Split-Comp.

5F747F
806065
807B60

Tetradic

5F747F
7B6080
806B60
658060

Contrast Matrix WCAG 2.1 Contrast

5F747F
787285
A16A85
D07E8B
8D7160
—
1.1
Fail
1.1
Fail
1.6
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
1.4
Fail
1.1
Fail
1.6
Fail
1.5
Fail
1.4
Fail
—
1.5
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.5
Fail
—
White BG
4.9AA
4.6AA
4.3AA Large
3.0Fail
4.5AA
Black BG
4.3AA Large
4.5AA
4.9AA
7.0AAA
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

68687C
757580
89897E
ACAC88
818164

Deuteranopia

67657C
76767F
8C917D
B1B787
838565

Tritanopia

607A7A
787D7C
9E7978
CC8585
8C6768

Achromatopsia

6F6F6F
767676
7E7E7E
989898
777777

Shades & Tints Shades & Tints

#5F747F

Dark
Light

#787285

Dark
Light

#A16A85

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f747f;
  --color-2: #787285;
  --color-3: #a16a85;
  --color-4: #d07e8b;
  --color-5: #8d7160;
}

SCSS

$color-1: #5f747f;
$color-2: #787285;
$color-3: #a16a85;
$color-4: #d07e8b;
$color-5: #8d7160;

TAILWIND

colors: {
  'brand-1': '#5f747f',
  'brand-2': '#787285',
  'brand-3': '#a16a85',
  'brand-4': '#d07e8b',
  'brand-5': '#8d7160',
}

RGB Array

[95, 116, 127], [120, 114, 133], [161, 106, 133], [208, 126, 139], [141, 113, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #5F747F, #787285, #A16A85, #D07E8B, #8D7160 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #5f747f; --color-2: #787285; --color-3: #a16a85; --color-4: #d07e8b; --color-5: #8d7160. 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. Restrained colors convey professionalism and trust. 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