← Back to Editor

#553333 · #996644 · #BB9966 · #DDDDBB · #887788

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 LibraryData Visualization

Color Details Color Details

#553333

Crimson · DarkSlateGray · Wine Red

HEX
#553333
RGB
rgb(85, 51, 51)
HSL
hsl(0, 25%, 27%)
HSB
hsb(0, 40%, 33%)
CMYK
cmyk(0%, 40%, 40%, 67%)
Oklch
oklch(36.3% 0.049 19.8)

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

#996644

Tangerine · Sienna · Amber Brown

HEX
#996644
RGB
rgb(153, 102, 68)
HSL
hsl(24, 38%, 43%)
HSB
hsb(24, 56%, 60%)
CMYK
cmyk(0%, 33%, 56%, 40%)
Oklch
oklch(55.7% 0.082 53.9)

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

#BB9966

Ginger · DarkSalmon · Warm Sun

HEX
#BB9966
RGB
rgb(187, 153, 102)
HSL
hsl(36, 38%, 57%)
HSB
hsb(36, 45%, 73%)
CMYK
cmyk(0%, 18%, 45%, 27%)
Oklch
oklch(70.2% 0.079 77.0)

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

#DDDDBB

Fresh Green · Wheat · Lemon Cream

HEX
#DDDDBB
RGB
rgb(221, 221, 187)
HSL
hsl(60, 33%, 80%)
HSB
hsb(60, 15%, 87%)
CMYK
cmyk(0%, 0%, 15%, 13%)
Oklch
oklch(88.9% 0.045 107.3)

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

#887788

Ink Gray · Gray · Warm Gray

HEX
#887788
RGB
rgb(136, 119, 136)
HSL
hsl(300, 7%, 50%)
HSB
hsb(300, 12%, 53%)
CMYK
cmyk(0%, 12%, 0%, 47%)
Oklch
oklch(59.1% 0.033 326.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

553333
345656

Analogous

563445
553333
564534

Triadic

553333
345634
343456

Split-Comp.

553333
345645
344556

Tetradic

553333
455634
345656
453456

Contrast Matrix WCAG 2.1 Contrast

553333
996644
BB9966
DDDDBB
887788
—
2.3
Fail
4.1
AA Large
7.9
AAA
2.6
Fail
2.3
Fail
—
1.8
Fail
3.5
AA Large
1.2
Fail
4.1
AA Large
1.8
Fail
—
1.9
Fail
1.6
Fail
7.9
AAA
3.5
AA Large
1.9
Fail
—
3.0
AA Large
2.6
Fail
1.2
Fail
1.6
Fail
3.0
AA Large
—
White BG
11.0AAA
4.8AA
2.7Fail
1.4Fail
4.2AA Large
Black BG
1.9Fail
4.3AA Large
7.9AAA
15.1AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

464633
83824C
ACAC72
DDDDC3
818084

Deuteranopia

484B33
868A4E
AEB175
DDDDC5
828383

Tritanopia

533333
965354
B97C7E
DDCACB
878180

Achromatopsia

3D3D3D
717171
9D9D9D
D9D9D9
7E7E7E

Shades & Tints Shades & Tints

#553333

Dark
Light

#996644

Dark
Light

#BB9966

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #553333;
  --color-2: #996644;
  --color-3: #bb9966;
  --color-4: #ddddbb;
  --color-5: #887788;
}

SCSS

$color-1: #553333;
$color-2: #996644;
$color-3: #bb9966;
$color-4: #ddddbb;
$color-5: #887788;

TAILWIND

colors: {
  'brand-1': '#553333',
  'brand-2': '#996644',
  'brand-3': '#bb9966',
  'brand-4': '#ddddbb',
  'brand-5': '#887788',
}

RGB Array

[85, 51, 51], [153, 102, 68], [187, 153, 102], [221, 221, 187], [136, 119, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #553333, #996644, #BB9966, #DDDDBB, #887788 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #553333; --color-2: #996644; --color-3: #bb9966; --color-4: #ddddbb; --color-5: #887788. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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