← Back to Editor

#563F68 · #54526F · #3B7787 · #7DB088 · #EFF6C0

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#563F68

Dark Plum · DarkSlateBlue · Eggplant

HEX
#563F68
RGB
rgb(86, 63, 104)
HSL
hsl(274, 25%, 33%)
HSB
hsb(274, 39%, 41%)
CMYK
cmyk(17%, 39%, 0%, 59%)
Oklch
oklch(41.0% 0.072 309.2)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#54526F

Deep Indigo · DimGray · Prussian Blue

HEX
#54526F
RGB
rgb(84, 82, 111)
HSL
hsl(244, 15%, 38%)
HSB
hsb(244, 26%, 44%)
CMYK
cmyk(24%, 26%, 0%, 56%)
Oklch
oklch(45.2% 0.047 287.5)

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

#3B7787

Slate Blue · SteelBlue · Mint Ice

HEX
#3B7787
RGB
rgb(59, 119, 135)
HSL
hsl(193, 39%, 38%)
HSB
hsb(193, 56%, 53%)
CMYK
cmyk(56%, 12%, 0%, 47%)
Oklch
oklch(53.6% 0.067 217.5)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#7DB088

Celadon · DarkSeaGreen · Olive Green

HEX
#7DB088
RGB
rgb(125, 176, 136)
HSL
hsl(133, 24%, 59%)
HSB
hsb(133, 29%, 69%)
CMYK
cmyk(29%, 0%, 23%, 31%)
Oklch
oklch(71.0% 0.079 150.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#EFF6C0

Fresh Green · Bisque · Lemon Cream

HEX
#EFF6C0
RGB
rgb(239, 246, 192)
HSL
hsl(68, 75%, 86%)
HSB
hsb(68, 22%, 96%)
CMYK
cmyk(3%, 0%, 22%, 4%)
Oklch
oklch(95.5% 0.070 113.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

563F68
51693F

Analogous

423F69
563F68
693F66

Triadic

563F68
69573F
3F6957

Split-Comp.

563F68
66693F
3F6942

Tetradic

563F68
69423F
51693F
3F6669

Contrast Matrix WCAG 2.1 Contrast

563F68
54526F
3B7787
7DB088
EFF6C0
—
1.2
Fail
1.8
Fail
3.7
AA Large
8.1
AAA
1.2
Fail
—
1.5
Fail
3.0
Fail
6.6
AA
1.8
Fail
1.5
Fail
—
2.0
Fail
4.5
AA Large
3.7
AA Large
3.0
Fail
2.0
Fail
—
2.2
Fail
8.1
AAA
6.6
AA
4.5
AA Large
2.2
Fail
—
White BG
9.1AAA
7.5AAA
5.0AA
2.5Fail
1.1Fail
Black BG
2.3Fail
2.8Fail
4.2AA Large
8.4AAA
18.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4C5E
535368
555683
939492
F2F2CD

Deuteranopia

4D4F5C
535366
524D82
908C94
F2F1D0

Tritanopia

555655
546261
3E807F
80999B
EFD7DA

Achromatopsia

4B4B4B
565656
676767
9C9C9C
EEEEEE

Shades & Tints Shades & Tints

#563F68

Dark
Light

#54526F

Dark
Light

#3B7787

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #563f68;
  --color-2: #54526f;
  --color-3: #3b7787;
  --color-4: #7db088;
  --color-5: #eff6c0;
}

SCSS

$color-1: #563f68;
$color-2: #54526f;
$color-3: #3b7787;
$color-4: #7db088;
$color-5: #eff6c0;

TAILWIND

colors: {
  'brand-1': '#563f68',
  'brand-2': '#54526f',
  'brand-3': '#3b7787',
  'brand-4': '#7db088',
  'brand-5': '#eff6c0',
}

RGB Array

[86, 63, 104], [84, 82, 111], [59, 119, 135], [125, 176, 136], [239, 246, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #563F68, #54526F, #3B7787, #7DB088, #EFF6C0 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #563f68; --color-2: #54526f; --color-3: #3b7787; --color-4: #7db088; --color-5: #eff6c0. 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 warm-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. 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