← Back to Editor

#99977B · #981DC9 · #9DA365 · #98918B · #989A6E

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#99977B

Autumn Sage · Gray · Sunflower

HEX
#99977B
RGB
rgb(153, 151, 123)
HSL
hsl(56, 13%, 54%)
HSB
hsb(56, 20%, 60%)
CMYK
cmyk(0%, 1%, 20%, 40%)
Oklch
oklch(67.0% 0.040 104.0)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

#981DC9

Royal Purple · DarkOrchid · Violet

HEX
#981DC9
RGB
rgb(152, 29, 201)
HSL
hsl(283, 75%, 45%)
HSB
hsb(283, 86%, 79%)
CMYK
cmyk(24%, 86%, 0%, 21%)
Oklch
oklch(52.2% 0.242 313.0)

TraditionalRoyal Purple」· PaintViolet」· Creative Blush Sunrise

#9DA365

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#9DA365
RGB
rgb(157, 163, 101)
HSL
hsl(66, 25%, 52%)
HSB
hsb(66, 38%, 64%)
CMYK
cmyk(4%, 0%, 38%, 36%)
Oklch
oklch(69.6% 0.084 113.1)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

#98918B

Ash · Gray · Silver Sand

HEX
#98918B
RGB
rgb(152, 145, 139)
HSL
hsl(28, 6%, 57%)
HSB
hsb(28, 9%, 60%)
CMYK
cmyk(0%, 5%, 9%, 40%)
Oklch
oklch(66.1% 0.012 63.3)

TraditionalAsh」· PaintSilver Sand」· Creative Urban Concrete

#989A6E

Autumn Sage · Gray · Sunflower

HEX
#989A6E
RGB
rgb(152, 154, 110)
HSL
hsl(63, 18%, 52%)
HSB
hsb(63, 29%, 60%)
CMYK
cmyk(1%, 0%, 29%, 40%)
Oklch
oklch(67.3% 0.061 110.1)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99977B
7A7C99

Analogous

99887A
99977B
8C997A

Triadic

99977B
7A9997
977A99

Split-Comp.

99977B
7A8C99
887A99

Tetradic

99977B
7A9988
7A7C99
997A8C

Contrast Matrix WCAG 2.1 Contrast

99977B
981DC9
9DA365
98918B
989A6E
2.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
2.1
Fail
2.3
Fail
2.0
Fail
2.1
Fail
1.1
Fail
2.3
Fail
1.2
Fail
1.1
Fail
1.0
Fail
2.0
Fail
1.2
Fail
1.1
Fail
1.0
Fail
2.1
Fail
1.1
Fail
1.1
Fail
White BG
3.0Fail
6.3AA
2.7Fail
3.1AA Large
2.9Fail
Black BG
7.1AAA
3.4AA Large
7.9AAA
6.8AA
7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

989882
63629F
A0A074
95958C
999979

Deuteranopia

989883
6A7395
9F9F78
95968D
99997B

Tritanopia

998788
927F77
9D8082
988E8E
988183

Achromatopsia

949494
555555
9A9A9A
929292
949494

Shades & Tints Shades & Tints

#99977B

Dark
Light

#981DC9

Dark
Light

#9DA365

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99977b;
  --color-2: #981dc9;
  --color-3: #9da365;
  --color-4: #98918b;
  --color-5: #989a6e;
}

SCSS

$color-1: #99977b;
$color-2: #981dc9;
$color-3: #9da365;
$color-4: #98918b;
$color-5: #989a6e;

TAILWIND

colors: {
  'brand-1': '#99977b',
  'brand-2': '#981dc9',
  'brand-3': '#9da365',
  'brand-4': '#98918b',
  'brand-5': '#989a6e',
}

RGB Array

[153, 151, 123], [152, 29, 201], [157, 163, 101], [152, 145, 139], [152, 154, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #99977B, #981DC9, #9DA365, #98918B, #989A6E 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: #99977b; --color-2: #981dc9; --color-3: #9da365; --color-4: #98918b; --color-5: #989a6e. 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 warm-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