← Back to Editor

#40585C · #F6828D · #DE4E5C · #CC3238 · #ABA49F

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

#40585C

Slate Blue · DarkSlateGray · Mint Ice

HEX
#40585C
RGB
rgb(64, 88, 92)
HSL
hsl(189, 18%, 31%)
HSB
hsb(189, 30%, 36%)
CMYK
cmyk(30%, 4%, 0%, 64%)
Oklch
oklch(44.2% 0.030 208.8)

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

#F6828D

Peach Pink · LightCoral · Coral Red

HEX
#F6828D
RGB
rgb(246, 130, 141)
HSL
hsl(354, 87%, 74%)
HSB
hsb(354, 47%, 96%)
CMYK
cmyk(0%, 47%, 43%, 4%)
Oklch
oklch(73.8% 0.142 15.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#DE4E5C

Vermilion · Tomato · Passion Red

HEX
#DE4E5C
RGB
rgb(222, 78, 92)
HSL
hsl(354, 69%, 59%)
HSB
hsb(354, 65%, 87%)
CMYK
cmyk(0%, 65%, 59%, 13%)
Oklch
oklch(62.4% 0.179 18.4)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#CC3238

Vermilion · Crimson · Passion Red

HEX
#CC3238
RGB
rgb(204, 50, 56)
HSL
hsl(358, 61%, 50%)
HSB
hsb(358, 75%, 80%)
CMYK
cmyk(0%, 75%, 73%, 20%)
Oklch
oklch(55.9% 0.190 24.1)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#ABA49F

Ash · DarkGray · Silver Sand

HEX
#ABA49F
RGB
rgb(171, 164, 159)
HSL
hsl(25, 7%, 65%)
HSB
hsb(25, 7%, 67%)
CMYK
cmyk(0%, 4%, 7%, 33%)
Oklch
oklch(72.3% 0.011 58.2)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

40585C
5D4541

Analogous

415D53
40585C
414B5D

Triadic

40585C
5D4159
595D41

Split-Comp.

40585C
5D414B
5D5341

Tetradic

40585C
53415D
5D4541
4B5D41

Contrast Matrix WCAG 2.1 Contrast

40585C
F6828D
DE4E5C
CC3238
ABA49F
—
3.1
AA Large
1.9
Fail
1.5
Fail
3.1
AA Large
3.1
AA Large
—
1.6
Fail
2.1
Fail
1.0
Fail
1.9
Fail
1.6
Fail
—
1.3
Fail
1.6
Fail
1.5
Fail
2.1
Fail
1.3
Fail
—
2.1
Fail
3.1
AA Large
1.0
Fail
1.6
Fail
2.1
Fail
—
White BG
7.6AAA
2.5Fail
3.9AA Large
5.1AA
2.5Fail
Black BG
2.8Fail
8.5AAA
5.4AA
4.1AA Large
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4B5B
C4C38A
A09E59
898837
A8A8A0

Deuteranopia

49475B
CBD38A
A8B358
929E36
A8A9A1

Tritanopia

415A5A
F08888
D75655
C43535
ABA1A1

Achromatopsia

515151
A6A6A6
7B7B7B
616161
A6A6A6

Shades & Tints Shades & Tints

#40585C

Dark
Light

#F6828D

Dark
Light

#DE4E5C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #40585c;
  --color-2: #f6828d;
  --color-3: #de4e5c;
  --color-4: #cc3238;
  --color-5: #aba49f;
}

SCSS

$color-1: #40585c;
$color-2: #f6828d;
$color-3: #de4e5c;
$color-4: #cc3238;
$color-5: #aba49f;

TAILWIND

colors: {
  'brand-1': '#40585c',
  'brand-2': '#f6828d',
  'brand-3': '#de4e5c',
  'brand-4': '#cc3238',
  'brand-5': '#aba49f',
}

RGB Array

[64, 88, 92], [246, 130, 141], [222, 78, 92], [204, 50, 56], [171, 164, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #40585C, #F6828D, #DE4E5C, #CC3238, #ABA49F 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: #40585c; --color-2: #f6828d; --color-3: #de4e5c; --color-4: #cc3238; --color-5: #aba49f. 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. 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