← Back to Editor

#4B3833 · #615D68 · #8498CD · #C1BAC8 · #E0CBC6

summer

A 5-color summer 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

#4B3833

Crimson · DarkSlateGray · Wine Red

HEX
#4B3833
RGB
rgb(75, 56, 51)
HSL
hsl(12, 19%, 25%)
HSB
hsb(12, 32%, 29%)
CMYK
cmyk(0%, 25%, 32%, 71%)
Oklch
oklch(36.0% 0.029 35.2)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#615D68

Ink Gray · DimGray · Charcoal

HEX
#615D68
RGB
rgb(97, 93, 104)
HSL
hsl(262, 6%, 39%)
HSB
hsb(262, 11%, 41%)
CMYK
cmyk(7%, 11%, 0%, 59%)
Oklch
oklch(48.6% 0.018 302.2)

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

#8498CD

Azure · CornflowerBlue · Cobalt Blue

HEX
#8498CD
RGB
rgb(132, 152, 205)
HSL
hsl(224, 42%, 66%)
HSB
hsb(224, 36%, 80%)
CMYK
cmyk(36%, 26%, 0%, 20%)
Oklch
oklch(68.4% 0.082 268.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#C1BAC8

Lilac · Silver · Lilac Purple

HEX
#C1BAC8
RGB
rgb(193, 186, 200)
HSL
hsl(270, 11%, 76%)
HSB
hsb(270, 7%, 78%)
CMYK
cmyk(4%, 7%, 0%, 22%)
Oklch
oklch(79.9% 0.021 308.2)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#E0CBC6

Peach Pink · LightGray · Cherry Blossom

HEX
#E0CBC6
RGB
rgb(224, 203, 198)
HSL
hsl(12, 30%, 83%)
HSB
hsb(12, 12%, 88%)
CMYK
cmyk(0%, 9%, 12%, 12%)
Oklch
oklch(85.8% 0.025 33.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B3833
34474C

Analogous

4C343B
4B3833
4C4534

Triadic

4B3833
344C38
38344C

Split-Comp.

4B3833
344C45
343B4C

Tetradic

4B3833
3B4C34
34474C
45344C

Contrast Matrix WCAG 2.1 Contrast

4B3833
615D68
8498CD
C1BAC8
E0CBC6
—
1.7
Fail
3.8
AA Large
5.8
AA
7.1
AAA
1.7
Fail
—
2.2
Fail
3.4
AA Large
4.1
AA Large
3.8
AA Large
2.2
Fail
—
1.5
Fail
1.8
Fail
5.8
AA
3.4
AA Large
1.5
Fail
—
1.2
Fail
7.1
AAA
4.1
AA Large
1.8
Fail
1.2
Fail
—
White BG
11.0AAA
6.4AA
2.9Fail
1.9Fail
1.6Fail
Black BG
1.9Fail
3.3AA Large
7.4AAA
11.1AAA
13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

434334
5F5F65
8D8DC0
BEBEC5
D7D7C7

Deuteranopia

444535
606065
8C8ABD
BEBFC4
D8DAC8

Tritanopia

4A3535
616363
85B6B4
C1C2C1
DFC8C8

Achromatopsia

3D3D3D
5F5F5F
989898
BEBEBE
D1D1D1

Shades & Tints Shades & Tints

#4B3833

Dark
Light

#615D68

Dark
Light

#8498CD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b3833;
  --color-2: #615d68;
  --color-3: #8498cd;
  --color-4: #c1bac8;
  --color-5: #e0cbc6;
}

SCSS

$color-1: #4b3833;
$color-2: #615d68;
$color-3: #8498cd;
$color-4: #c1bac8;
$color-5: #e0cbc6;

TAILWIND

colors: {
  'brand-1': '#4b3833',
  'brand-2': '#615d68',
  'brand-3': '#8498cd',
  'brand-4': '#c1bac8',
  'brand-5': '#e0cbc6',
}

RGB Array

[75, 56, 51], [97, 93, 104], [132, 152, 205], [193, 186, 200], [224, 203, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This summer-style palette of #4B3833, #615D68, #8498CD, #C1BAC8, #E0CBC6 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: #4b3833; --color-2: #615d68; --color-3: #8498cd; --color-4: #c1bac8; --color-5: #e0cbc6. 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 summer-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