← Back to Editor

#000033 · #667799 · #999999 · #C9B582 · #BA9E66

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

Color Details Color Details

#000033

Deep Indigo · Black · Deep Sea Blue

HEX
#000033
RGB
rgb(0, 0, 51)
HSL
hsl(240, 100%, 10%)
HSB
hsb(240, 100%, 20%)
CMYK
cmyk(100%, 100%, 0%, 80%)
Oklch
oklch(14.5% 0.101 264.1)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#667799

Indigo · SlateGray · Navy Blue

HEX
#667799
RGB
rgb(102, 119, 153)
HSL
hsl(220, 20%, 50%)
HSB
hsb(220, 33%, 60%)
CMYK
cmyk(33%, 22%, 0%, 40%)
Oklch
oklch(56.9% 0.057 264.0)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#999999

Ash · DarkGray · Silver Sand

HEX
#999999
RGB
rgb(153, 153, 153)
HSL
hsl(0, 0%, 60%)
HSB
hsb(0, 0%, 60%)
CMYK
cmyk(0%, 0%, 0%, 40%)
Oklch
oklch(68.3% 0.000 89.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#C9B582

Ginger · Tan · Sunflower

HEX
#C9B582
RGB
rgb(201, 181, 130)
HSL
hsl(43, 40%, 65%)
HSB
hsb(43, 35%, 79%)
CMYK
cmyk(0%, 10%, 35%, 21%)
Oklch
oklch(77.8% 0.071 89.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#BA9E66

Ginger · Tan · Sunflower

HEX
#BA9E66
RGB
rgb(186, 158, 102)
HSL
hsl(40, 38%, 56%)
HSB
hsb(40, 45%, 73%)
CMYK
cmyk(0%, 15%, 45%, 27%)
Oklch
oklch(71.1% 0.081 83.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

000033
333300

Analogous

001A33
000033
1A0033

Triadic

000033
330000
003300

Split-Comp.

000033
331A00
1A3300

Tetradic

000033
33001A
333300
00331A

Contrast Matrix WCAG 2.1 Contrast

000033
667799
999999
C9B582
BA9E66
—
4.5
AA Large
7.0
AAA
9.9
AAA
7.8
AAA
4.5
AA Large
—
1.6
Fail
2.2
Fail
1.8
Fail
7.0
AAA
1.6
Fail
—
1.4
Fail
1.1
Fail
9.9
AAA
2.2
Fail
1.4
Fail
—
1.3
Fail
7.8
AAA
1.8
Fail
1.1
Fail
1.3
Fail
—
White BG
20.0AAA
4.5AA
2.8Fail
2.0Fail
2.6Fail
Black BG
1.0Fail
4.7AA
7.4AAA
10.4AAA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

000027
6D6E91
999999
C0C08E
AEAE74

Deuteranopia

000024
6C6B8F
999999
C2C391
B0B277

Tritanopia

001D1B
678A89
999999
C8989A
B97E81

Achromatopsia

060606
767676
999999
B5B5B5
A0A0A0

Shades & Tints Shades & Tints

#000033

Dark
Light

#667799

Dark
Light

#999999

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #000033;
  --color-2: #667799;
  --color-3: #999999;
  --color-4: #c9b582;
  --color-5: #ba9e66;
}

SCSS

$color-1: #000033;
$color-2: #667799;
$color-3: #999999;
$color-4: #c9b582;
$color-5: #ba9e66;

TAILWIND

colors: {
  'brand-1': '#000033',
  'brand-2': '#667799',
  'brand-3': '#999999',
  'brand-4': '#c9b582',
  'brand-5': '#ba9e66',
}

RGB Array

[0, 0, 51], [102, 119, 153], [153, 153, 153], [201, 181, 130], [186, 158, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #000033, #667799, #999999, #C9B582, #BA9E66 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #000033; --color-2: #667799; --color-3: #999999; --color-4: #c9b582; --color-5: #ba9e66. 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. 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