← Back to Editor

#99887E · #E1D889 · #D35A63 · #5B484E · #6F696C

A 5-color palette 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

#99887E

Tangerine · Gray · Warm Sun

HEX
#99887E
RGB
rgb(153, 136, 126)
HSL
hsl(22, 12%, 55%)
HSB
hsb(22, 18%, 60%)
CMYK
cmyk(0%, 11%, 18%, 40%)
Oklch
oklch(63.9% 0.025 52.5)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#E1D889

Fresh Green · Khaki · Sunflower

HEX
#E1D889
RGB
rgb(225, 216, 137)
HSL
hsl(54, 59%, 71%)
HSB
hsb(54, 39%, 88%)
CMYK
cmyk(0%, 4%, 39%, 12%)
Oklch
oklch(87.2% 0.100 102.6)

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

#D35A63

Crimson · Tomato · Passion Red

HEX
#D35A63
RGB
rgb(211, 90, 99)
HSL
hsl(356, 58%, 59%)
HSB
hsb(356, 57%, 83%)
CMYK
cmyk(0%, 57%, 53%, 17%)
Oklch
oklch(62.3% 0.153 18.2)

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

#5B484E

Dark Violet · DarkSlateGray · Camellia

HEX
#5B484E
RGB
rgb(91, 72, 78)
HSL
hsl(341, 12%, 32%)
HSB
hsb(341, 21%, 36%)
CMYK
cmyk(0%, 21%, 14%, 64%)
Oklch
oklch(42.4% 0.027 357.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#6F696C

Ink Gray · DimGray · Warm Gray

HEX
#6F696C
RGB
rgb(111, 105, 108)
HSL
hsl(330, 3%, 42%)
HSB
hsb(330, 5%, 44%)
CMYK
cmyk(0%, 5%, 3%, 56%)
Oklch
oklch(52.7% 0.009 345.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99887E
7E909A

Analogous

9A7E82
99887E
9A967E

Triadic

99887E
7E9A89
897E9A

Split-Comp.

99887E
7E9A96
7E829A

Tetradic

99887E
829A7E
7E909A
967E9A

Contrast Matrix WCAG 2.1 Contrast

99887E
E1D889
D35A63
5B484E
6F696C
—
2.3
Fail
1.1
Fail
2.5
Fail
1.6
Fail
2.3
Fail
—
2.7
Fail
5.8
AA
3.7
AA Large
1.1
Fail
2.7
Fail
—
2.2
Fail
1.4
Fail
2.5
Fail
5.8
AA
2.2
Fail
—
1.6
Fail
1.6
Fail
3.7
AA Large
1.4
Fail
1.6
Fail
—
White BG
3.4AA Large
1.5Fail
3.9AA Large
8.5AAA
5.4AA
Black BG
6.2AA
14.4AAA
5.4AA
2.5Fail
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

929180
DDDD9C
9F9E61
53534D
6C6C6B

Deuteranopia

939481
DEDEA1
A6AF60
54554C
6D6D6B

Tritanopia

988283
E1ABAF
CD5F5F
5A4B4B
6F6B6B

Achromatopsia

8C8C8C
D2D2D2
7F7F7F
4E4E4E
6B6B6B

Shades & Tints Shades & Tints

#99887E

Dark
Light

#E1D889

Dark
Light

#D35A63

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99887e;
  --color-2: #e1d889;
  --color-3: #d35a63;
  --color-4: #5b484e;
  --color-5: #6f696c;
}

SCSS

$color-1: #99887e;
$color-2: #e1d889;
$color-3: #d35a63;
$color-4: #5b484e;
$color-5: #6f696c;

TAILWIND

colors: {
  'brand-1': '#99887e',
  'brand-2': '#e1d889',
  'brand-3': '#d35a63',
  'brand-4': '#5b484e',
  'brand-5': '#6f696c',
}

RGB Array

[153, 136, 126], [225, 216, 137], [211, 90, 99], [91, 72, 78], [111, 105, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99887E, #E1D889, #D35A63, #5B484E, #6F696C 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: #99887e; --color-2: #e1d889; --color-3: #d35a63; --color-4: #5b484e; --color-5: #6f696c. 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