← Back to Editor

#8790A0 · #D2C3A6 · #DEAD57 · #DE794E · #AA1950

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

#8790A0

Azure · LightSlateGray · Navy Blue

HEX
#8790A0
RGB
rgb(135, 144, 160)
HSL
hsl(218, 12%, 58%)
HSB
hsb(218, 16%, 63%)
CMYK
cmyk(16%, 10%, 0%, 37%)
Oklch
oklch(65.1% 0.026 262.1)

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

#D2C3A6

Goose Yellow · Tan · Sunflower

HEX
#D2C3A6
RGB
rgb(210, 195, 166)
HSL
hsl(40, 33%, 74%)
HSB
hsb(40, 21%, 82%)
CMYK
cmyk(0%, 7%, 21%, 18%)
Oklch
oklch(82.2% 0.043 83.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#DEAD57

Ginger · SandyBrown · Warm Sun

HEX
#DEAD57
RGB
rgb(222, 173, 87)
HSL
hsl(38, 67%, 61%)
HSB
hsb(38, 61%, 87%)
CMYK
cmyk(0%, 22%, 61%, 13%)
Oklch
oklch(77.6% 0.118 79.6)

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

#DE794E

Tangerine · Coral · Warm Sun

HEX
#DE794E
RGB
rgb(222, 121, 78)
HSL
hsl(18, 69%, 59%)
HSB
hsb(18, 65%, 87%)
CMYK
cmyk(0%, 45%, 65%, 13%)
Oklch
oklch(68.1% 0.138 43.0)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#AA1950

Dark Violet · Brown · Camellia

HEX
#AA1950
RGB
rgb(170, 25, 80)
HSL
hsl(337, 74%, 38%)
HSB
hsb(337, 85%, 67%)
CMYK
cmyk(0%, 85%, 53%, 33%)
Oklch
oklch(48.5% 0.180 5.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8790A0
A19787

Analogous

879DA1
8790A0
8A87A1

Triadic

8790A0
A18790
90A187

Split-Comp.

8790A0
A18A87
9DA187

Tetradic

8790A0
A1879D
A19787
87A18A

Contrast Matrix WCAG 2.1 Contrast

8790A0
D2C3A6
DEAD57
DE794E
AA1950
—
1.9
Fail
1.6
Fail
1.1
Fail
2.2
Fail
1.9
Fail
—
1.2
Fail
1.7
Fail
4.1
AA Large
1.6
Fail
1.2
Fail
—
1.5
Fail
3.4
AA Large
1.1
Fail
1.7
Fail
1.5
Fail
—
2.3
Fail
2.2
Fail
4.1
AA Large
3.4
AA Large
2.3
Fail
—
White BG
3.2AA Large
1.7Fail
2.1Fail
3.0AA Large
7.1AAA
Black BG
6.5AA
12.1AAA
10.2AAA
7.0AA
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8B9C
CCCBAD
C9C86C
B2B158
6B6A43

Deuteranopia

8A8A9B
CCCEAF
CCCF71
B8C05B
747E40

Tritanopia

879998
D1B3B4
DC7C80
D96162
A33836

Achromatopsia

8F8F8F
C4C4C4
B2B2B2
929292
4B4B4B

Shades & Tints Shades & Tints

#8790A0

Dark
Light

#D2C3A6

Dark
Light

#DEAD57

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8790a0;
  --color-2: #d2c3a6;
  --color-3: #dead57;
  --color-4: #de794e;
  --color-5: #aa1950;
}

SCSS

$color-1: #8790a0;
$color-2: #d2c3a6;
$color-3: #dead57;
$color-4: #de794e;
$color-5: #aa1950;

TAILWIND

colors: {
  'brand-1': '#8790a0',
  'brand-2': '#d2c3a6',
  'brand-3': '#dead57',
  'brand-4': '#de794e',
  'brand-5': '#aa1950',
}

RGB Array

[135, 144, 160], [210, 195, 166], [222, 173, 87], [222, 121, 78], [170, 25, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8790A0, #D2C3A6, #DEAD57, #DE794E, #AA1950 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: #8790a0; --color-2: #d2c3a6; --color-3: #dead57; --color-4: #de794e; --color-5: #aa1950. 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