← Back to Editor

#44888B · #A4918B · #D18D8A · #ED6B77 · #ECD69D

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 Library

Color Details Color Details

#44888B

Slate Blue · CadetBlue · Mint Ice

HEX
#44888B
RGB
rgb(68, 136, 139)
HSL
hsl(183, 34%, 41%)
HSB
hsb(183, 51%, 55%)
CMYK
cmyk(51%, 2%, 0%, 45%)
Oklch
oklch(58.4% 0.069 199.2)

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

#A4918B

Crimson · DarkGray · Passion Red

HEX
#A4918B
RGB
rgb(164, 145, 139)
HSL
hsl(14, 12%, 59%)
HSB
hsb(14, 15%, 64%)
CMYK
cmyk(0%, 12%, 15%, 36%)
Oklch
oklch(67.2% 0.025 38.3)

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

#D18D8A

Peach Pink · DarkSalmon · Coral Red

HEX
#D18D8A
RGB
rgb(209, 141, 138)
HSL
hsl(3, 44%, 68%)
HSB
hsb(3, 34%, 82%)
CMYK
cmyk(0%, 33%, 34%, 18%)
Oklch
oklch(71.1% 0.084 22.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#ED6B77

Peach Pink · LightCoral · Coral Red

HEX
#ED6B77
RGB
rgb(237, 107, 119)
HSL
hsl(354, 78%, 67%)
HSB
hsb(354, 55%, 93%)
CMYK
cmyk(0%, 55%, 50%, 7%)
Oklch
oklch(68.8% 0.161 16.7)

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

#ECD69D

Goose Yellow · Khaki · Lemon Cream

HEX
#ECD69D
RGB
rgb(236, 214, 157)
HSL
hsl(43, 68%, 77%)
HSB
hsb(43, 33%, 93%)
CMYK
cmyk(0%, 9%, 33%, 7%)
Oklch
oklch(88.1% 0.077 89.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

44888B
8C4945

Analogous

458C6C
44888B
45658C

Triadic

44888B
8C4589
898C45

Split-Comp.

44888B
8C4565
8C6C45

Tetradic

44888B
6C458C
8C4945
658C45

Contrast Matrix WCAG 2.1 Contrast

44888B
A4918B
D18D8A
ED6B77
ECD69D
—
1.4
Fail
1.5
Fail
1.4
Fail
2.9
Fail
1.4
Fail
—
1.1
Fail
1.0
Fail
2.1
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
1.9
Fail
1.4
Fail
1.0
Fail
1.1
Fail
—
2.1
Fail
2.9
Fail
2.1
Fail
1.9
Fail
2.1
Fail
—
White BG
4.1AA Large
3.0Fail
2.7Fail
3.0AA Large
1.4Fail
Black BG
5.1AA
7.0AAA
7.9AAA
7.0AA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

61628A
9C9C8C
B4B38B
B5B474
E2E2AB

Deuteranopia

5E588A
9D9E8D
B8BD8B
BCC673
E4E5AE

Tritanopia

478A8A
A38E8E
CE8B8B
E67271
EBB6B8

Achromatopsia

747474
969696
A1A1A1
939393
D6D6D6

Shades & Tints Shades & Tints

#44888B

Dark
Light

#A4918B

Dark
Light

#D18D8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #44888b;
  --color-2: #a4918b;
  --color-3: #d18d8a;
  --color-4: #ed6b77;
  --color-5: #ecd69d;
}

SCSS

$color-1: #44888b;
$color-2: #a4918b;
$color-3: #d18d8a;
$color-4: #ed6b77;
$color-5: #ecd69d;

TAILWIND

colors: {
  'brand-1': '#44888b',
  'brand-2': '#a4918b',
  'brand-3': '#d18d8a',
  'brand-4': '#ed6b77',
  'brand-5': '#ecd69d',
}

RGB Array

[68, 136, 139], [164, 145, 139], [209, 141, 138], [237, 107, 119], [236, 214, 157]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #44888B, #A4918B, #D18D8A, #ED6B77, #ECD69D is ideal for: corporate websites, product showcases, portfolios. 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: #44888b; --color-2: #a4918b; --color-3: #d18d8a; --color-4: #ed6b77; --color-5: #ecd69d. 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. 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