← Back to Editor

#71787A · #947D76 · #C48876 · #EB8571 · #FF6666

sunset

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

#71787A

Ink Gray · Gray · Warm Gray

HEX
#71787A
RGB
rgb(113, 120, 122)
HSL
hsl(193, 4%, 46%)
HSB
hsb(193, 7%, 48%)
CMYK
cmyk(7%, 2%, 0%, 52%)
Oklch
oklch(56.7% 0.009 216.7)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#947D76

Crimson · Gray · Passion Red

HEX
#947D76
RGB
rgb(148, 125, 118)
HSL
hsl(14, 12%, 52%)
HSB
hsb(14, 20%, 58%)
CMYK
cmyk(0%, 16%, 20%, 42%)
Oklch
oklch(60.9% 0.030 37.6)

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

#C48876

Peach Pink · DarkSalmon · Coral Red

HEX
#C48876
RGB
rgb(196, 136, 118)
HSL
hsl(14, 40%, 62%)
HSB
hsb(14, 40%, 77%)
CMYK
cmyk(0%, 31%, 40%, 23%)
Oklch
oklch(68.2% 0.079 37.4)

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

#EB8571

Peach Pink · Salmon · Coral Red

HEX
#EB8571
RGB
rgb(235, 133, 113)
HSL
hsl(10, 75%, 68%)
HSB
hsb(10, 52%, 92%)
CMYK
cmyk(0%, 43%, 52%, 8%)
Oklch
oklch(72.3% 0.129 32.1)

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

#FF6666

Peach Pink · Salmon · Coral Red

HEX
#FF6666
RGB
rgb(255, 102, 102)
HSL
hsl(0, 100%, 70%)
HSB
hsb(0, 60%, 100%)
CMYK
cmyk(0%, 60%, 60%, 0%)
Oklch
oklch(70.4% 0.187 23.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71787A
7A7371

Analogous

717A77
71787A
71737A

Triadic

71787A
7A7178
787A71

Split-Comp.

71787A
7A7173
7A7771

Tetradic

71787A
77717A
7A7371
737A71

Contrast Matrix WCAG 2.1 Contrast

71787A
947D76
C48876
EB8571
FF6666
—
1.2
Fail
1.5
Fail
1.7
Fail
1.6
Fail
1.2
Fail
—
1.3
Fail
1.5
Fail
1.3
Fail
1.5
Fail
1.3
Fail
—
1.1
Fail
1.0
Fail
1.7
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
1.6
Fail
1.3
Fail
1.0
Fail
1.1
Fail
—
White BG
4.5AA Large
3.9AA Large
2.9Fail
2.6Fail
2.9Fail
Black BG
4.7AA
5.5AA
7.1AAA
8.1AAA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

74747A
8A8A78
AAA97A
BFBE76
BDBB66

Deuteranopia

747379
8B8D78
AEB27B
C5CC77
C6D166

Tritanopia

717979
937979
C17E7F
E67A7B
F76666

Achromatopsia

767676
838383
989898
A1A1A1
949494

Shades & Tints Shades & Tints

#71787A

Dark
Light

#947D76

Dark
Light

#C48876

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71787a;
  --color-2: #947d76;
  --color-3: #c48876;
  --color-4: #eb8571;
  --color-5: #ff6666;
}

SCSS

$color-1: #71787a;
$color-2: #947d76;
$color-3: #c48876;
$color-4: #eb8571;
$color-5: #ff6666;

TAILWIND

colors: {
  'brand-1': '#71787a',
  'brand-2': '#947d76',
  'brand-3': '#c48876',
  'brand-4': '#eb8571',
  'brand-5': '#ff6666',
}

RGB Array

[113, 120, 122], [148, 125, 118], [196, 136, 118], [235, 133, 113], [255, 102, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #71787A, #947D76, #C48876, #EB8571, #FF6666 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: #71787a; --color-2: #947d76; --color-3: #c48876; --color-4: #eb8571; --color-5: #ff6666. 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 sunset-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