← Back to Editor

#76645E · #8A9D91 · #D0AA94 · #DF8584 · #ED737C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#76645E

Tangerine · DimGray · Amber Brown

HEX
#76645E
RGB
rgb(118, 100, 94)
HSL
hsl(15, 11%, 42%)
HSB
hsb(15, 20%, 46%)
CMYK
cmyk(0%, 15%, 20%, 54%)
Oklch
oklch(51.9% 0.025 39.3)

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

#8A9D91

Celadon · LightSlateGray · Silver Sand

HEX
#8A9D91
RGB
rgb(138, 157, 145)
HSL
hsl(142, 9%, 58%)
HSB
hsb(142, 12%, 62%)
CMYK
cmyk(12%, 0%, 8%, 38%)
Oklch
oklch(67.7% 0.028 157.9)

Traditional「Celadon」· Paint「Silver Sand」· Creative Urban Concrete

#D0AA94

Apricot · Tan · Warm Sun

HEX
#D0AA94
RGB
rgb(208, 170, 148)
HSL
hsl(22, 39%, 70%)
HSB
hsb(22, 29%, 82%)
CMYK
cmyk(0%, 18%, 29%, 18%)
Oklch
oklch(76.6% 0.054 51.7)

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

#DF8584

Peach Pink · LightCoral · Coral Red

HEX
#DF8584
RGB
rgb(223, 133, 132)
HSL
hsl(1, 59%, 70%)
HSB
hsb(1, 41%, 87%)
CMYK
cmyk(0%, 40%, 41%, 13%)
Oklch
oklch(71.2% 0.111 20.9)

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

#ED737C

Peach Pink · LightCoral · Coral Red

HEX
#ED737C
RGB
rgb(237, 115, 124)
HSL
hsl(356, 77%, 69%)
HSB
hsb(356, 51%, 93%)
CMYK
cmyk(0%, 51%, 48%, 7%)
Oklch
oklch(70.0% 0.151 17.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

76645E
5F7177

Analogous

775F65
76645E
77715F

Triadic

76645E
5F7765
655F77

Split-Comp.

76645E
5F7771
5F6577

Tetradic

76645E
65775F
5F7177
715F77

Contrast Matrix WCAG 2.1 Contrast

76645E
8A9D91
D0AA94
DF8584
ED737C
—
1.9
Fail
2.6
Fail
2.1
Fail
2.0
Fail
1.9
Fail
—
1.3
Fail
1.1
Fail
1.0
Fail
2.6
Fail
1.3
Fail
—
1.3
Fail
1.3
Fail
2.1
Fail
1.1
Fail
1.3
Fail
—
1.1
Fail
2.0
Fail
1.0
Fail
1.3
Fail
1.1
Fail
—
White BG
5.6AA
2.9Fail
2.1Fail
2.7Fail
2.9Fail
Black BG
3.8AA Large
7.3AAA
9.9AAA
7.8AAA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6E5F
929294
C0BF99
B8B784
B8B77A

Deuteranopia

6F7160
919095
C2C59B
BDC484
BFC879

Tritanopia

756161
8B9697
CE9E9E
DB8484
E77878

Achromatopsia

696969
969696
B3B3B3
A0A0A0
999999

Shades & Tints Shades & Tints

#76645E

Dark
Light

#8A9D91

Dark
Light

#D0AA94

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #76645e;
  --color-2: #8a9d91;
  --color-3: #d0aa94;
  --color-4: #df8584;
  --color-5: #ed737c;
}

SCSS

$color-1: #76645e;
$color-2: #8a9d91;
$color-3: #d0aa94;
$color-4: #df8584;
$color-5: #ed737c;

TAILWIND

colors: {
  'brand-1': '#76645e',
  'brand-2': '#8a9d91',
  'brand-3': '#d0aa94',
  'brand-4': '#df8584',
  'brand-5': '#ed737c',
}

RGB Array

[118, 100, 94], [138, 157, 145], [208, 170, 148], [223, 133, 132], [237, 115, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #76645E, #8A9D91, #D0AA94, #DF8584, #ED737C 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: #76645e; --color-2: #8a9d91; --color-3: #d0aa94; --color-4: #df8584; --color-5: #ed737c. 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 general-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