← Back to Editor

#555C75 · #666C75 · #777C74 · #888C74 · #999C74

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#555C75

Indigo · DimGray · Prussian Blue

HEX
#555C75
RGB
rgb(85, 92, 117)
HSL
hsl(227, 16%, 40%)
HSB
hsb(227, 27%, 46%)
CMYK
cmyk(27%, 21%, 0%, 54%)
Oklch
oklch(47.8% 0.041 272.6)

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

#666C75

Ink Gray · DimGray · Warm Gray

HEX
#666C75
RGB
rgb(102, 108, 117)
HSL
hsl(216, 7%, 43%)
HSB
hsb(216, 13%, 46%)
CMYK
cmyk(13%, 8%, 0%, 54%)
Oklch
oklch(52.9% 0.016 258.4)

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

#777C74

Ink Gray · Gray · Warm Gray

HEX
#777C74
RGB
rgb(119, 124, 116)
HSL
hsl(97, 3%, 47%)
HSB
hsb(97, 6%, 49%)
CMYK
cmyk(4%, 0%, 6%, 51%)
Oklch
oklch(58.0% 0.013 133.4)

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

#888C74

Grass Green · Gray · Warm Gray

HEX
#888C74
RGB
rgb(136, 140, 116)
HSL
hsl(70, 9%, 50%)
HSB
hsb(70, 17%, 55%)
CMYK
cmyk(3%, 0%, 17%, 45%)
Oklch
oklch(63.0% 0.035 115.1)

Traditional「Grass Green」· Paint「Warm Gray」· Creative Urban Concrete

#999C74

Autumn Sage · Gray · Sunflower

HEX
#999C74
RGB
rgb(153, 156, 116)
HSL
hsl(65, 17%, 53%)
HSB
hsb(65, 26%, 61%)
CMYK
cmyk(2%, 0%, 26%, 39%)
Oklch
oklch(68.0% 0.056 111.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

555C75
766F56

Analogous

566D76
555C75
5F5676

Triadic

555C75
76565D
5D7656

Split-Comp.

555C75
765F56
6D7656

Tetradic

555C75
76566D
766F56
56765F

Contrast Matrix WCAG 2.1 Contrast

555C75
666C75
777C74
888C74
999C74
—
1.2
Fail
1.5
Fail
1.9
Fail
2.3
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
2.3
Fail
1.9
Fail
1.5
Fail
1.2
Fail
—
White BG
6.6AA
5.3AA
4.3AA Large
3.5AA Large
2.9Fail
Black BG
3.2AA Large
4.0AA Large
4.9AA
6.1AA
7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

58586F
696973
797976
8A8A7A
9A9A7E

Deuteranopia

58576D
686872
797976
8A897B
9A9A80

Tritanopia

556A69
667171
777778
887E7F
998587

Achromatopsia

5D5D5D
6B6B6B
7A7A7A
888888
979797

Shades & Tints Shades & Tints

#555C75

Dark
Light

#666C75

Dark
Light

#777C74

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #555c75;
  --color-2: #666c75;
  --color-3: #777c74;
  --color-4: #888c74;
  --color-5: #999c74;
}

SCSS

$color-1: #555c75;
$color-2: #666c75;
$color-3: #777c74;
$color-4: #888c74;
$color-5: #999c74;

TAILWIND

colors: {
  'brand-1': '#555c75',
  'brand-2': '#666c75',
  'brand-3': '#777c74',
  'brand-4': '#888c74',
  'brand-5': '#999c74',
}

RGB Array

[85, 92, 117], [102, 108, 117], [119, 124, 116], [136, 140, 116], [153, 156, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #555C75, #666C75, #777C74, #888C74, #999C74 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: #555c75; --color-2: #666c75; --color-3: #777c74; --color-4: #888c74; --color-5: #999c74. 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