← Back to Editor

#644F5B · #D1BD96 · #E77D5B · #C0293E · #AF1546

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#644F5B

Rose Purple · DimGray · Camellia

HEX
#644F5B
RGB
rgb(100, 79, 91)
HSL
hsl(326, 12%, 35%)
HSB
hsb(326, 21%, 39%)
CMYK
cmyk(0%, 21%, 9%, 61%)
Oklch
oklch(45.3% 0.033 343.2)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#D1BD96

Ginger · Tan · Sunflower

HEX
#D1BD96
RGB
rgb(209, 189, 150)
HSL
hsl(40, 39%, 70%)
HSB
hsb(40, 28%, 82%)
CMYK
cmyk(0%, 10%, 28%, 18%)
Oklch
oklch(80.5% 0.057 83.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#E77D5B

Apricot · Coral · Warm Sun

HEX
#E77D5B
RGB
rgb(231, 125, 91)
HSL
hsl(15, 74%, 63%)
HSB
hsb(15, 61%, 91%)
CMYK
cmyk(0%, 46%, 61%, 9%)
Oklch
oklch(70.1% 0.140 38.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#C0293E

Vermilion · FireBrick · Passion Red

HEX
#C0293E
RGB
rgb(192, 41, 62)
HSL
hsl(352, 65%, 46%)
HSB
hsb(352, 79%, 75%)
CMYK
cmyk(0%, 79%, 68%, 25%)
Oklch
oklch(53.2% 0.186 19.4)

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

#AF1546

Dark Violet · Brown · Camellia

HEX
#AF1546
RGB
rgb(175, 21, 70)
HSL
hsl(341, 79%, 38%)
HSB
hsb(341, 88%, 69%)
CMYK
cmyk(0%, 88%, 60%, 31%)
Oklch
oklch(48.9% 0.184 10.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

644F5B
4F6458

Analogous

634F64
644F5B
644F50

Triadic

644F5B
5B644F
4F5B64

Split-Comp.

644F5B
50644F
4F6463

Tetradic

644F5B
64634F
4F6458
4F5064

Contrast Matrix WCAG 2.1 Contrast

644F5B
D1BD96
E77D5B
C0293E
AF1546
—
4.1
AA Large
2.7
Fail
1.3
Fail
1.1
Fail
4.1
AA Large
—
1.5
Fail
3.2
AA Large
3.8
AA Large
2.7
Fail
1.5
Fail
—
2.1
Fail
2.5
Fail
1.3
Fail
3.2
AA Large
2.1
Fail
—
1.2
Fail
1.1
Fail
3.8
AA Large
2.5
Fail
1.2
Fail
—
White BG
7.5AAA
1.8Fail
2.8Fail
5.8AA
7.0AA
Black BG
2.8Fail
11.4AAA
7.5AAA
3.6AA Large
3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5B58
C8C89F
B9B863
7F7D39
6C6B3A

Deuteranopia

5C5E57
CACBA2
BFC765
879338
758137

Tritanopia

635655
D0A7A9
E26A6B
B83534
A7312F

Achromatopsia

575757
BFBFBF
999999
595959
494949

Shades & Tints Shades & Tints

#644F5B

Dark
Light

#D1BD96

Dark
Light

#E77D5B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #644f5b;
  --color-2: #d1bd96;
  --color-3: #e77d5b;
  --color-4: #c0293e;
  --color-5: #af1546;
}

SCSS

$color-1: #644f5b;
$color-2: #d1bd96;
$color-3: #e77d5b;
$color-4: #c0293e;
$color-5: #af1546;

TAILWIND

colors: {
  'brand-1': '#644f5b',
  'brand-2': '#d1bd96',
  'brand-3': '#e77d5b',
  'brand-4': '#c0293e',
  'brand-5': '#af1546',
}

RGB Array

[100, 79, 91], [209, 189, 150], [231, 125, 91], [192, 41, 62], [175, 21, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #644F5B, #D1BD96, #E77D5B, #C0293E, #AF1546 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: #644f5b; --color-2: #d1bd96; --color-3: #e77d5b; --color-4: #c0293e; --color-5: #af1546. 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