← Back to Editor

#8F90AC · #CF9215 · #C34C00 · #9C6A6D · #8C7C7C

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

#8F90AC

Azure · LightSlateGray · Cobalt Blue

HEX
#8F90AC
RGB
rgb(143, 144, 172)
HSL
hsl(238, 15%, 62%)
HSB
hsb(238, 17%, 67%)
CMYK
cmyk(17%, 16%, 0%, 33%)
Oklch
oklch(66.2% 0.041 283.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#CF9215

Ochre · GoldenRod · Honey Gold

HEX
#CF9215
RGB
rgb(207, 146, 21)
HSL
hsl(40, 82%, 45%)
HSB
hsb(40, 90%, 81%)
CMYK
cmyk(0%, 29%, 90%, 19%)
Oklch
oklch(70.2% 0.142 77.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#C34C00

Tangerine · Chocolate · Amber Brown

HEX
#C34C00
RGB
rgb(195, 76, 0)
HSL
hsl(23, 100%, 38%)
HSB
hsb(23, 100%, 76%)
CMYK
cmyk(0%, 61%, 100%, 24%)
Oklch
oklch(56.8% 0.167 43.4)

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

#9C6A6D

Crimson · Gray · Passion Red

HEX
#9C6A6D
RGB
rgb(156, 106, 109)
HSL
hsl(356, 20%, 51%)
HSB
hsb(356, 32%, 61%)
CMYK
cmyk(0%, 32%, 30%, 39%)
Oklch
oklch(57.7% 0.064 15.3)

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

#8C7C7C

Ash · Gray · Warm Gray

HEX
#8C7C7C
RGB
rgb(140, 124, 124)
HSL
hsl(0, 7%, 52%)
HSB
hsb(0, 11%, 55%)
CMYK
cmyk(0%, 11%, 11%, 45%)
Oklch
oklch(60.1% 0.020 17.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F90AC
ADAC90

Analogous

909FAD
8F90AC
9D90AD

Triadic

8F90AC
AD9091
91AD90

Split-Comp.

8F90AC
AD9D90
9FAD90

Tetradic

8F90AC
AD909F
ADAC90
90AD9D

Contrast Matrix WCAG 2.1 Contrast

8F90AC
CF9215
C34C00
9C6A6D
8C7C7C
—
1.2
Fail
1.6
Fail
1.4
Fail
1.3
Fail
1.2
Fail
—
1.8
Fail
1.7
Fail
1.5
Fail
1.6
Fail
1.8
Fail
—
1.1
Fail
1.2
Fail
1.4
Fail
1.7
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.5
Fail
1.2
Fail
1.1
Fail
—
White BG
3.1AA Large
2.7Fail
4.8AA
4.5AA Large
4.0AA Large
Black BG
6.8AA
7.8AAA
4.4AA Large
4.7AA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8FA5
B5B433
8F8E12
86866C
85857C

Deuteranopia

8F8FA4
B8BD3B
969F17
898D6C
86877C

Tritanopia

8FA09F
CC4B50
BD2124
9A6C6C
8B7C7C

Achromatopsia

939393
969696
676767
797979
818181

Shades & Tints Shades & Tints

#8F90AC

Dark
Light

#CF9215

Dark
Light

#C34C00

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f90ac;
  --color-2: #cf9215;
  --color-3: #c34c00;
  --color-4: #9c6a6d;
  --color-5: #8c7c7c;
}

SCSS

$color-1: #8f90ac;
$color-2: #cf9215;
$color-3: #c34c00;
$color-4: #9c6a6d;
$color-5: #8c7c7c;

TAILWIND

colors: {
  'brand-1': '#8f90ac',
  'brand-2': '#cf9215',
  'brand-3': '#c34c00',
  'brand-4': '#9c6a6d',
  'brand-5': '#8c7c7c',
}

RGB Array

[143, 144, 172], [207, 146, 21], [195, 76, 0], [156, 106, 109], [140, 124, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8F90AC, #CF9215, #C34C00, #9C6A6D, #8C7C7C 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: #8f90ac; --color-2: #cf9215; --color-3: #c34c00; --color-4: #9c6a6d; --color-5: #8c7c7c. 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