← Back to Editor

#665544 · #996644 · #BB9966 · #BBAA99 · #778888

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

#665544

Ochre · DarkOliveGreen · Amber Brown

HEX
#665544
RGB
rgb(102, 85, 68)
HSL
hsl(30, 20%, 33%)
HSB
hsb(30, 33%, 40%)
CMYK
cmyk(0%, 17%, 33%, 60%)
Oklch
oklch(46.2% 0.035 66.8)

Traditional「Ochre」· Paint「Amber Brown」· 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

#BBAA99

Ginger · DarkGray · Warm Sun

HEX
#BBAA99
RGB
rgb(187, 170, 153)
HSL
hsl(30, 20%, 67%)
HSB
hsb(30, 18%, 73%)
CMYK
cmyk(0%, 9%, 18%, 27%)
Oklch
oklch(74.8% 0.031 67.3)

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

#778888

Ink Gray · SlateGray · Warm Gray

HEX
#778888
RGB
rgb(119, 136, 136)
HSL
hsl(180, 7%, 50%)
HSB
hsb(180, 12%, 53%)
CMYK
cmyk(12%, 0%, 0%, 47%)
Oklch
oklch(61.3% 0.020 196.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

665544
435465

Analogous

654343
665544
656543

Triadic

665544
436554
544365

Split-Comp.

665544
436565
434365

Tetradic

665544
436543
435465
654365

Contrast Matrix WCAG 2.1 Contrast

665544
996644
BB9966
BBAA99
778888
—
1.5
Fail
2.7
Fail
3.2
AA Large
1.9
Fail
1.5
Fail
—
1.8
Fail
2.1
Fail
1.3
Fail
2.7
Fail
1.8
Fail
—
1.2
Fail
1.4
Fail
3.2
AA Large
2.1
Fail
1.2
Fail
—
1.6
Fail
1.9
Fail
1.3
Fail
1.4
Fail
1.6
Fail
—
White BG
7.1AAA
4.8AA
2.7Fail
2.3Fail
3.7AA Large
Black BG
2.9Fail
4.3AA Large
7.9AAA
9.3AAA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F5E48
83824C
ACAC72
B4B39D
7E7F88

Deuteranopia

606149
868A4E
AEB175
B5B69E
7D7C88

Tritanopia

654B4C
965354
B97C7E
BAA0A1
788888

Achromatopsia

585858
717171
9D9D9D
ADADAD
838383

Shades & Tints Shades & Tints

#665544

Dark
Light

#996644

Dark
Light

#BB9966

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #665544;
  --color-2: #996644;
  --color-3: #bb9966;
  --color-4: #bbaa99;
  --color-5: #778888;
}

SCSS

$color-1: #665544;
$color-2: #996644;
$color-3: #bb9966;
$color-4: #bbaa99;
$color-5: #778888;

TAILWIND

colors: {
  'brand-1': '#665544',
  'brand-2': '#996644',
  'brand-3': '#bb9966',
  'brand-4': '#bbaa99',
  'brand-5': '#778888',
}

RGB Array

[102, 85, 68], [153, 102, 68], [187, 153, 102], [187, 170, 153], [119, 136, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #665544, #996644, #BB9966, #BBAA99, #778888 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: #665544; --color-2: #996644; --color-3: #bb9966; --color-4: #bbaa99; --color-5: #778888. 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