← Back to Editor

#669999 · #5C7A85 · #525C70 · #484257 · #312B33

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#669999

Slate Blue · CadetBlue · Mint Ice

HEX
#669999
RGB
rgb(102, 153, 153)
HSL
hsl(180, 20%, 50%)
HSB
hsb(180, 33%, 60%)
CMYK
cmyk(33%, 0%, 0%, 40%)
Oklch
oklch(64.7% 0.054 195.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#5C7A85

Slate Blue · SlateGray · Mint Ice

HEX
#5C7A85
RGB
rgb(92, 122, 133)
HSL
hsl(196, 18%, 44%)
HSB
hsb(196, 31%, 52%)
CMYK
cmyk(31%, 8%, 0%, 48%)
Oklch
oklch(56.0% 0.038 222.4)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#525C70

Indigo · DimGray · Prussian Blue

HEX
#525C70
RGB
rgb(82, 92, 112)
HSL
hsl(220, 15%, 38%)
HSB
hsb(220, 27%, 44%)
CMYK
cmyk(27%, 18%, 0%, 56%)
Oklch
oklch(47.4% 0.035 264.2)

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

#484257

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#484257
RGB
rgb(72, 66, 87)
HSL
hsl(257, 14%, 30%)
HSB
hsb(257, 24%, 34%)
CMYK
cmyk(17%, 24%, 0%, 66%)
Oklch
oklch(39.4% 0.036 297.8)

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

#312B33

Dark Plum · DarkSlateGray · Dark Stone

HEX
#312B33
RGB
rgb(49, 43, 51)
HSL
hsl(285, 9%, 18%)
HSB
hsb(285, 16%, 20%)
CMYK
cmyk(4%, 16%, 0%, 80%)
Oklch
oklch(29.9% 0.017 317.7)

Traditional「Dark Plum」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

669999
996666

Analogous

669980
669999
668099

Triadic

669999
996699
999966

Split-Comp.

669999
996680
998066

Tetradic

669999
806699
996666
809966

Contrast Matrix WCAG 2.1 Contrast

669999
5C7A85
525C70
484257
312B33
—
1.4
Fail
2.1
Fail
3.0
AA Large
4.3
AA Large
1.4
Fail
—
1.5
Fail
2.1
Fail
3.0
AA Large
2.1
Fail
1.5
Fail
—
1.4
Fail
2.0
Fail
3.0
AA Large
2.1
Fail
1.4
Fail
—
1.4
Fail
4.3
AA Large
3.0
AA Large
2.0
Fail
1.4
Fail
—
White BG
3.2AA Large
4.6AA
6.7AA
9.6AAA
13.8AAA
Black BG
6.6AA
4.6AA
3.1AA Large
2.2Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7D99
696982
56566B
454552
2E2E31

Deuteranopia

797599
676582
56556A
464651
2F2F31

Tritanopia

699999
5D8080
526767
484E4D
31302F

Achromatopsia

8A8A8A
727272
5B5B5B
464646
2E2E2E

Shades & Tints Shades & Tints

#669999

Dark
Light

#5C7A85

Dark
Light

#525C70

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #669999;
  --color-2: #5c7a85;
  --color-3: #525c70;
  --color-4: #484257;
  --color-5: #312b33;
}

SCSS

$color-1: #669999;
$color-2: #5c7a85;
$color-3: #525c70;
$color-4: #484257;
$color-5: #312b33;

TAILWIND

colors: {
  'brand-1': '#669999',
  'brand-2': '#5c7a85',
  'brand-3': '#525c70',
  'brand-4': '#484257',
  'brand-5': '#312b33',
}

RGB Array

[102, 153, 153], [92, 122, 133], [82, 92, 112], [72, 66, 87], [49, 43, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #669999, #5C7A85, #525C70, #484257, #312B33 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. 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: #669999; --color-2: #5c7a85; --color-3: #525c70; --color-4: #484257; --color-5: #312b33. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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