← Back to Editor

#976168 · #618B97 · #C4BF93 · #8FBC98 · #756142

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

#976168

Crimson · Gray · Passion Red

HEX
#976168
RGB
rgb(151, 97, 104)
HSL
hsl(352, 22%, 49%)
HSB
hsb(352, 36%, 59%)
CMYK
cmyk(0%, 36%, 31%, 41%)
Oklch
oklch(55.3% 0.071 11.2)

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

#618B97

Slate Blue · SlateGray · Mint Ice

HEX
#618B97
RGB
rgb(97, 139, 151)
HSL
hsl(193, 22%, 49%)
HSB
hsb(193, 36%, 59%)
CMYK
cmyk(36%, 8%, 0%, 41%)
Oklch
oklch(61.0% 0.050 217.5)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#C4BF93

Fresh Green · Tan · Sunflower

HEX
#C4BF93
RGB
rgb(196, 191, 147)
HSL
hsl(54, 29%, 67%)
HSB
hsb(54, 25%, 77%)
CMYK
cmyk(0%, 3%, 25%, 23%)
Oklch
oklch(79.8% 0.059 102.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#8FBC98

Celadon · DarkSeaGreen · Apple Green

HEX
#8FBC98
RGB
rgb(143, 188, 152)
HSL
hsl(132, 25%, 65%)
HSB
hsb(132, 24%, 74%)
CMYK
cmyk(24%, 0%, 19%, 26%)
Oklch
oklch(75.3% 0.070 150.5)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#756142

Ochre · DarkOliveGreen · Amber Brown

HEX
#756142
RGB
rgb(117, 97, 66)
HSL
hsl(36, 28%, 36%)
HSB
hsb(36, 44%, 46%)
CMYK
cmyk(0%, 17%, 44%, 54%)
Oklch
oklch(50.4% 0.052 78.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

976168
619891

Analogous

986184
976168
987661

Triadic

976168
699861
616998

Split-Comp.

976168
619876
618498

Tetradic

976168
849861
619891
766198

Contrast Matrix WCAG 2.1 Contrast

976168
618B97
C4BF93
8FBC98
756142
—
1.3
Fail
2.7
Fail
2.3
Fail
1.2
Fail
1.3
Fail
—
2.0
Fail
1.7
Fail
1.6
Fail
2.7
Fail
2.0
Fail
—
1.1
Fail
3.2
AA Large
2.3
Fail
1.7
Fail
1.1
Fail
—
2.8
Fail
1.2
Fail
1.6
Fail
3.2
AA Large
2.8
Fail
—
White BG
5.0AA
3.7AA Large
1.9Fail
2.1Fail
5.9AA
Black BG
4.2AA Large
5.6AA
11.2AAA
9.8AAA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

807F66
737494
C2C29E
A2A3A1
6C6C4A

Deuteranopia

838766
716E93
C2C3A0
A09DA3
6E6F4B

Tritanopia

946565
639291
C4A6A8
91A8A9
744F51

Achromatopsia

727272
808080
BBBBBB
AAAAAA
636363

Shades & Tints Shades & Tints

#976168

Dark
Light

#618B97

Dark
Light

#C4BF93

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #976168;
  --color-2: #618b97;
  --color-3: #c4bf93;
  --color-4: #8fbc98;
  --color-5: #756142;
}

SCSS

$color-1: #976168;
$color-2: #618b97;
$color-3: #c4bf93;
$color-4: #8fbc98;
$color-5: #756142;

TAILWIND

colors: {
  'brand-1': '#976168',
  'brand-2': '#618b97',
  'brand-3': '#c4bf93',
  'brand-4': '#8fbc98',
  'brand-5': '#756142',
}

RGB Array

[151, 97, 104], [97, 139, 151], [196, 191, 147], [143, 188, 152], [117, 97, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #976168, #618B97, #C4BF93, #8FBC98, #756142 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #976168; --color-2: #618b97; --color-3: #c4bf93; --color-4: #8fbc98; --color-5: #756142. 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. Restrained colors convey professionalism and trust. 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