← Back to Editor

#4B5265 · #576371 · #829693 · #ADCBC3 · #F8F6DF

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

#4B5265

Indigo · DarkSlateGray · Prussian Blue

HEX
#4B5265
RGB
rgb(75, 82, 101)
HSL
hsl(224, 15%, 35%)
HSB
hsb(224, 26%, 40%)
CMYK
cmyk(26%, 19%, 0%, 60%)
Oklch
oklch(44.0% 0.033 269.2)

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

#576371

Indigo · DimGray · Prussian Blue

HEX
#576371
RGB
rgb(87, 99, 113)
HSL
hsl(212, 13%, 39%)
HSB
hsb(212, 23%, 44%)
CMYK
cmyk(23%, 12%, 0%, 56%)
Oklch
oklch(49.5% 0.027 252.4)

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

#829693

Mineral Blue · LightSlateGray · Warm Gray

HEX
#829693
RGB
rgb(130, 150, 147)
HSL
hsl(171, 9%, 55%)
HSB
hsb(171, 13%, 59%)
CMYK
cmyk(13%, 0%, 2%, 41%)
Oklch
oklch(65.6% 0.023 185.7)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

#ADCBC3

Jade · Silver · Lake Green

HEX
#ADCBC3
RGB
rgb(173, 203, 195)
HSL
hsl(164, 22%, 74%)
HSB
hsb(164, 15%, 80%)
CMYK
cmyk(15%, 0%, 4%, 20%)
Oklch
oklch(81.8% 0.034 177.5)

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

#F8F6DF

Fresh Green · Beige · Lemon Cream

HEX
#F8F6DF
RGB
rgb(248, 246, 223)
HSL
hsl(55, 64%, 92%)
HSB
hsb(55, 10%, 97%)
CMYK
cmyk(0%, 1%, 10%, 3%)
Oklch
oklch(96.9% 0.030 102.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B5265
675F4C

Analogous

4C6067
4B5265
524C67

Triadic

4B5265
674C53
53674C

Split-Comp.

4B5265
67524C
60674C

Tetradic

4B5265
674C60
675F4C
4C6752

Contrast Matrix WCAG 2.1 Contrast

4B5265
576371
829693
ADCBC3
F8F6DF
—
1.3
Fail
2.5
Fail
4.5
AA Large
7.1
AAA
1.3
Fail
—
2.0
Fail
3.5
AA Large
5.6
AA
2.5
Fail
2.0
Fail
—
1.8
Fail
2.9
Fail
4.5
AA Large
3.5
AA Large
1.8
Fail
—
1.6
Fail
7.1
AAA
5.6
AA
2.9
Fail
1.6
Fail
—
White BG
7.8AAA
6.1AA
3.1AA Large
1.7Fail
1.1Fail
Black BG
2.7Fail
3.4AA Large
6.7AA
12.1AAA
19.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E60
5C5C6E
8B8B94
BABAC5
F7F7E5

Deuteranopia

4E4D5F
5C5B6D
8A8894
B8B6C5
F7F7E6

Tritanopia

4B5D5C
586B6A
839494
AFC6C7
F8E9EA

Achromatopsia

525252
616161
909090
C1C1C1
F4F4F4

Shades & Tints Shades & Tints

#4B5265

Dark
Light

#576371

Dark
Light

#829693

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b5265;
  --color-2: #576371;
  --color-3: #829693;
  --color-4: #adcbc3;
  --color-5: #f8f6df;
}

SCSS

$color-1: #4b5265;
$color-2: #576371;
$color-3: #829693;
$color-4: #adcbc3;
$color-5: #f8f6df;

TAILWIND

colors: {
  'brand-1': '#4b5265',
  'brand-2': '#576371',
  'brand-3': '#829693',
  'brand-4': '#adcbc3',
  'brand-5': '#f8f6df',
}

RGB Array

[75, 82, 101], [87, 99, 113], [130, 150, 147], [173, 203, 195], [248, 246, 223]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4B5265, #576371, #829693, #ADCBC3, #F8F6DF 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: #4b5265; --color-2: #576371; --color-3: #829693; --color-4: #adcbc3; --color-5: #f8f6df. 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