← Back to Editor

#9C8A8E · #C49088 · #FF8040 · #FC6153 · #495778

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

#9C8A8E

Crimson · Gray · Silver Sand

HEX
#9C8A8E
RGB
rgb(156, 138, 142)
HSL
hsl(347, 8%, 58%)
HSB
hsb(347, 12%, 61%)
CMYK
cmyk(0%, 12%, 9%, 39%)
Oklch
oklch(65.1% 0.022 2.6)

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

#C49088

Peach Pink · Tan · Coral Red

HEX
#C49088
RGB
rgb(196, 144, 136)
HSL
hsl(8, 34%, 65%)
HSB
hsb(8, 31%, 77%)
CMYK
cmyk(0%, 27%, 31%, 23%)
Oklch
oklch(70.1% 0.065 28.7)

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

#FF8040

Apricot · Coral · Warm Sun

HEX
#FF8040
RGB
rgb(255, 128, 64)
HSL
hsl(20, 100%, 63%)
HSB
hsb(20, 75%, 100%)
CMYK
cmyk(0%, 50%, 75%, 0%)
Oklch
oklch(73.5% 0.173 45.1)

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

#FC6153

Peach Pink · Tomato · Coral Red

HEX
#FC6153
RGB
rgb(252, 97, 83)
HSL
hsl(5, 97%, 66%)
HSB
hsb(5, 67%, 99%)
CMYK
cmyk(0%, 62%, 67%, 1%)
Oklch
oklch(69.1% 0.192 28.2)

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

#495778

Indigo · DarkSlateBlue · Prussian Blue

HEX
#495778
RGB
rgb(73, 87, 120)
HSL
hsl(222, 24%, 38%)
HSB
hsb(222, 39%, 47%)
CMYK
cmyk(39%, 27%, 0%, 53%)
Oklch
oklch(45.9% 0.057 266.5)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9C8A8E
8B9C99

Analogous

9C8B98
9C8A8E
9C908B

Triadic

9C8A8E
8F9C8B
8B8F9C

Split-Comp.

9C8A8E
8B9C90
8B989C

Tetradic

9C8A8E
989C8B
8B9C99
908B9C

Contrast Matrix WCAG 2.1 Contrast

9C8A8E
C49088
FF8040
FC6153
495778
—
1.2
Fail
1.3
Fail
1.1
Fail
2.2
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
2.6
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
2.9
Fail
1.1
Fail
1.1
Fail
1.2
Fail
—
2.4
Fail
2.2
Fail
2.6
Fail
2.9
Fail
2.4
Fail
—
White BG
3.3AA Large
2.7Fail
2.5Fail
3.0AA Large
7.2AAA
Black BG
6.4AA
7.7AAA
8.4AAA
7.0AA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

94948D
ADAD8A
C8C74F
B9B756
4F4F70

Deuteranopia

95978D
B1B48A
CFD953
C2CD57
4E4D6E

Tritanopia

9B8C8C
C18B8C
F95C5E
F4595A
4A6A68

Achromatopsia

909090
9F9F9F
9F9F9F
8E8E8E
575757

Shades & Tints Shades & Tints

#9C8A8E

Dark
Light

#C49088

Dark
Light

#FF8040

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9c8a8e;
  --color-2: #c49088;
  --color-3: #ff8040;
  --color-4: #fc6153;
  --color-5: #495778;
}

SCSS

$color-1: #9c8a8e;
$color-2: #c49088;
$color-3: #ff8040;
$color-4: #fc6153;
$color-5: #495778;

TAILWIND

colors: {
  'brand-1': '#9c8a8e',
  'brand-2': '#c49088',
  'brand-3': '#ff8040',
  'brand-4': '#fc6153',
  'brand-5': '#495778',
}

RGB Array

[156, 138, 142], [196, 144, 136], [255, 128, 64], [252, 97, 83], [73, 87, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9C8A8E, #C49088, #FF8040, #FC6153, #495778 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: #9c8a8e; --color-2: #c49088; --color-3: #ff8040; --color-4: #fc6153; --color-5: #495778. 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