← Back to Editor

#523C50 · #645A64 · #968A7B · #D8CBA5 · #E9D395

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#523C50

Rose Purple · DarkSlateGray · Eggplant

HEX
#523C50
RGB
rgb(82, 60, 80)
HSL
hsl(305, 15%, 28%)
HSB
hsb(305, 27%, 32%)
CMYK
cmyk(0%, 27%, 2%, 68%)
Oklch
oklch(38.8% 0.044 329.5)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#645A64

Ink Gray · DimGray · Charcoal

HEX
#645A64
RGB
rgb(100, 90, 100)
HSL
hsl(300, 5%, 37%)
HSB
hsb(300, 10%, 39%)
CMYK
cmyk(0%, 10%, 0%, 61%)
Oklch
oklch(48.1% 0.020 325.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#968A7B

Ginger · Gray · Warm Sun

HEX
#968A7B
RGB
rgb(150, 138, 123)
HSL
hsl(33, 11%, 54%)
HSB
hsb(33, 18%, 59%)
CMYK
cmyk(0%, 8%, 18%, 41%)
Oklch
oklch(64.0% 0.026 73.5)

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

#D8CBA5

Goose Yellow · Tan · Sunflower

HEX
#D8CBA5
RGB
rgb(216, 203, 165)
HSL
hsl(45, 40%, 75%)
HSB
hsb(45, 24%, 85%)
CMYK
cmyk(0%, 6%, 24%, 15%)
Oklch
oklch(84.3% 0.053 91.4)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

#E9D395

Goose Yellow · Khaki · Sunflower

HEX
#E9D395
RGB
rgb(233, 211, 149)
HSL
hsl(44, 66%, 75%)
HSB
hsb(44, 36%, 91%)
CMYK
cmyk(0%, 9%, 36%, 9%)
Oklch
oklch(87.1% 0.083 90.8)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

523C50
3D523E

Analogous

493D52
523C50
523D46

Triadic

523C50
50523D
3D5052

Split-Comp.

523C50
46523D
3D5249

Tetradic

523C50
52493D
3D523E
3D4652

Contrast Matrix WCAG 2.1 Contrast

523C50
645A64
968A7B
D8CBA5
E9D395
—
1.5
Fail
2.9
Fail
6.1
AA
6.7
AA
1.5
Fail
—
2.0
Fail
4.1
AA Large
4.5
AA Large
2.9
Fail
2.0
Fail
—
2.1
Fail
2.3
Fail
6.1
AA
4.1
AA Large
2.1
Fail
—
1.1
Fail
6.7
AA
4.5
AA Large
2.3
Fail
1.1
Fail
—
White BG
9.9AAA
6.6AA
3.4AA Large
1.6Fail
1.5Fail
Black BG
2.1Fail
3.2AA Large
6.2AA
13.0AAA
14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

48484B
606062
91917F
D2D2AE
DFDFA4

Deuteranopia

4A4B4A
606161
929280
D3D4B0
E1E2A8

Tritanopia

514747
64605F
958182
D7B5B7
E8B0B2

Achromatopsia

454545
5E5E5E
8C8C8C
CBCBCB
D3D3D3

Shades & Tints Shades & Tints

#523C50

Dark
Light

#645A64

Dark
Light

#968A7B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #523c50;
  --color-2: #645a64;
  --color-3: #968a7b;
  --color-4: #d8cba5;
  --color-5: #e9d395;
}

SCSS

$color-1: #523c50;
$color-2: #645a64;
$color-3: #968a7b;
$color-4: #d8cba5;
$color-5: #e9d395;

TAILWIND

colors: {
  'brand-1': '#523c50',
  'brand-2': '#645a64',
  'brand-3': '#968a7b',
  'brand-4': '#d8cba5',
  'brand-5': '#e9d395',
}

RGB Array

[82, 60, 80], [100, 90, 100], [150, 138, 123], [216, 203, 165], [233, 211, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #523C50, #645A64, #968A7B, #D8CBA5, #E9D395 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #523c50; --color-2: #645a64; --color-3: #968a7b; --color-4: #d8cba5; --color-5: #e9d395. 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. 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