← Back to Editor

#2D336D · #59609C · #A1B3AE · #AB9E87 · #755C50

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

#2D336D

Indigo · MidnightBlue · Prussian Blue

HEX
#2D336D
RGB
rgb(45, 51, 109)
HSL
hsl(234, 42%, 30%)
HSB
hsb(234, 59%, 43%)
CMYK
cmyk(59%, 53%, 0%, 57%)
Oklch
oklch(34.9% 0.100 275.5)

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

#59609C

Indigo · SlateGray · Navy Blue

HEX
#59609C
RGB
rgb(89, 96, 156)
HSL
hsl(234, 27%, 48%)
HSB
hsb(234, 43%, 61%)
CMYK
cmyk(43%, 38%, 0%, 39%)
Oklch
oklch(51.0% 0.095 277.4)

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

#A1B3AE

Jade · DarkGray · Lake Green

HEX
#A1B3AE
RGB
rgb(161, 179, 174)
HSL
hsl(163, 11%, 67%)
HSB
hsb(163, 10%, 70%)
CMYK
cmyk(10%, 0%, 3%, 30%)
Oklch
oklch(75.1% 0.021 177.2)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#AB9E87

Ginger · DarkGray · Warm Sun

HEX
#AB9E87
RGB
rgb(171, 158, 135)
HSL
hsl(38, 18%, 60%)
HSB
hsb(38, 21%, 67%)
CMYK
cmyk(0%, 8%, 21%, 33%)
Oklch
oklch(70.4% 0.036 81.9)

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

#755C50

Tangerine · DimGray · Amber Brown

HEX
#755C50
RGB
rgb(117, 92, 80)
HSL
hsl(19, 19%, 39%)
HSB
hsb(19, 32%, 46%)
CMYK
cmyk(0%, 21%, 32%, 54%)
Oklch
oklch(49.7% 0.038 47.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D336D
6D662C

Analogous

2C536D
2D336D
462C6D

Triadic

2D336D
6D2C33
336D2C

Split-Comp.

2D336D
6D462C
536D2C

Tetradic

2D336D
6D2C53
6D662C
2C6D46

Contrast Matrix WCAG 2.1 Contrast

2D336D
59609C
A1B3AE
AB9E87
755C50
—
2.0
Fail
5.3
AA
4.4
AA Large
1.9
Fail
2.0
Fail
—
2.7
Fail
2.2
Fail
1.1
Fail
5.3
AA
2.7
Fail
—
1.2
Fail
2.8
Fail
4.4
AA Large
2.2
Fail
1.2
Fail
—
2.3
Fail
1.9
Fail
1.1
Fail
2.8
Fail
2.3
Fail
—
White BG
11.6AAA
5.9AA
2.2Fail
2.6Fail
6.2AA
Black BG
1.8Fail
3.6AA Large
9.6AAA
8.0AAA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

30305F
5C5C8D
A9A9AF
A5A58D
6A6A53

Deuteranopia

2F2F5C
5C5B8A
A8A6B0
A6A78E
6C6D54

Tritanopia

2D5451
598280
A2B0B0
AA9192
745556

Achromatopsia

383838
656565
ADADAD
9F9F9F
626262

Shades & Tints Shades & Tints

#2D336D

Dark
Light

#59609C

Dark
Light

#A1B3AE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d336d;
  --color-2: #59609c;
  --color-3: #a1b3ae;
  --color-4: #ab9e87;
  --color-5: #755c50;
}

SCSS

$color-1: #2d336d;
$color-2: #59609c;
$color-3: #a1b3ae;
$color-4: #ab9e87;
$color-5: #755c50;

TAILWIND

colors: {
  'brand-1': '#2d336d',
  'brand-2': '#59609c',
  'brand-3': '#a1b3ae',
  'brand-4': '#ab9e87',
  'brand-5': '#755c50',
}

RGB Array

[45, 51, 109], [89, 96, 156], [161, 179, 174], [171, 158, 135], [117, 92, 80]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D336D, #59609C, #A1B3AE, #AB9E87, #755C50 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: #2d336d; --color-2: #59609c; --color-3: #a1b3ae; --color-4: #ab9e87; --color-5: #755c50. 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