← Back to Editor

#789D8C · #DFC27E · #DDA073 · #DA9681 · #9B788C

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

#789D8C

Mineral Blue · LightSlateGray · Olive Green

HEX
#789D8C
RGB
rgb(120, 157, 140)
HSL
hsl(152, 16%, 54%)
HSB
hsb(152, 24%, 62%)
CMYK
cmyk(24%, 0%, 11%, 38%)
Oklch
oklch(66.3% 0.048 165.1)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#DFC27E

Ginger · BurlyWood · Sunflower

HEX
#DFC27E
RGB
rgb(223, 194, 126)
HSL
hsl(42, 60%, 68%)
HSB
hsb(42, 43%, 87%)
CMYK
cmyk(0%, 13%, 43%, 13%)
Oklch
oklch(82.4% 0.093 87.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#DDA073

Apricot · DarkSalmon · Warm Sun

HEX
#DDA073
RGB
rgb(221, 160, 115)
HSL
hsl(25, 61%, 66%)
HSB
hsb(25, 48%, 87%)
CMYK
cmyk(0%, 28%, 48%, 13%)
Oklch
oklch(75.4% 0.094 57.2)

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

#DA9681

Peach Pink · DarkSalmon · Coral Red

HEX
#DA9681
RGB
rgb(218, 150, 129)
HSL
hsl(14, 55%, 68%)
HSB
hsb(14, 41%, 85%)
CMYK
cmyk(0%, 31%, 41%, 15%)
Oklch
oklch(73.5% 0.088 37.9)

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

#9B788C

Rose Purple · Gray · Rose Pink

HEX
#9B788C
RGB
rgb(155, 120, 140)
HSL
hsl(326, 15%, 54%)
HSB
hsb(326, 23%, 61%)
CMYK
cmyk(0%, 23%, 10%, 39%)
Oklch
oklch(61.3% 0.052 343.5)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

789D8C
9C7788

Analogous

779C78
789D8C
779B9C

Triadic

789D8C
8B779C
9C8B77

Split-Comp.

789D8C
9C779B
9C7877

Tetradic

789D8C
78779C
9C7788
9B9C77

Contrast Matrix WCAG 2.1 Contrast

789D8C
DFC27E
DDA073
DA9681
9B788C
—
1.7
Fail
1.3
Fail
1.2
Fail
1.3
Fail
1.7
Fail
—
1.3
Fail
1.4
Fail
2.2
Fail
1.3
Fail
1.3
Fail
—
1.1
Fail
1.7
Fail
1.2
Fail
1.4
Fail
1.1
Fail
—
1.6
Fail
1.3
Fail
2.2
Fail
1.7
Fail
1.6
Fail
—
White BG
3.0Fail
1.7Fail
2.2Fail
2.4Fail
3.8AA Large
Black BG
7.0AAA
12.2AAA
9.4AAA
8.7AAA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

888890
D2D28E
C3C27E
BDBC86
8C8C87

Deuteranopia

868391
D4D692
C6CB81
C1C687
8E9186

Tritanopia

7A9394
DE9B9E
DA8688
D78A8B
998383

Achromatopsia

909090
C3C3C3
ADADAD
A8A8A8
858585

Shades & Tints Shades & Tints

#789D8C

Dark
Light

#DFC27E

Dark
Light

#DDA073

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #789d8c;
  --color-2: #dfc27e;
  --color-3: #dda073;
  --color-4: #da9681;
  --color-5: #9b788c;
}

SCSS

$color-1: #789d8c;
$color-2: #dfc27e;
$color-3: #dda073;
$color-4: #da9681;
$color-5: #9b788c;

TAILWIND

colors: {
  'brand-1': '#789d8c',
  'brand-2': '#dfc27e',
  'brand-3': '#dda073',
  'brand-4': '#da9681',
  'brand-5': '#9b788c',
}

RGB Array

[120, 157, 140], [223, 194, 126], [221, 160, 115], [218, 150, 129], [155, 120, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #789D8C, #DFC27E, #DDA073, #DA9681, #9B788C 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: #789d8c; --color-2: #dfc27e; --color-3: #dda073; --color-4: #da9681; --color-5: #9b788c. 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