← Back to Editor

#321F2E · #66B2BA · #BB9A1D · #C7B1A3 · #E03778

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

#321F2E

Rose Purple · DarkSlateGray · Dark Purple

HEX
#321F2E
RGB
rgb(50, 31, 46)
HSL
hsl(313, 23%, 16%)
HSB
hsb(313, 38%, 20%)
CMYK
cmyk(0%, 38%, 8%, 80%)
Oklch
oklch(27.0% 0.039 334.4)

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

#66B2BA

Slate Blue · MediumAquaMarine · Lake Green

HEX
#66B2BA
RGB
rgb(102, 178, 186)
HSL
hsl(186, 38%, 56%)
HSB
hsb(186, 45%, 73%)
CMYK
cmyk(45%, 4%, 0%, 27%)
Oklch
oklch(71.7% 0.076 204.4)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#BB9A1D

Ochre · DarkGoldenRod · Honey Gold

HEX
#BB9A1D
RGB
rgb(187, 154, 29)
HSL
hsl(47, 73%, 42%)
HSB
hsb(47, 84%, 73%)
CMYK
cmyk(0%, 18%, 84%, 27%)
Oklch
oklch(69.7% 0.135 92.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#C7B1A3

Apricot · Tan · Warm Sun

HEX
#C7B1A3
RGB
rgb(199, 177, 163)
HSL
hsl(23, 24%, 71%)
HSB
hsb(23, 18%, 78%)
CMYK
cmyk(0%, 11%, 18%, 22%)
Oklch
oklch(77.5% 0.032 54.6)

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

#E03778

Dark Violet · MediumVioletRed · Rose Pink

HEX
#E03778
RGB
rgb(224, 55, 120)
HSL
hsl(337, 73%, 55%)
HSB
hsb(337, 75%, 88%)
CMYK
cmyk(0%, 75%, 46%, 12%)
Oklch
oklch(61.1% 0.209 2.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

321F2E
1F3223

Analogous

2D1F32
321F2E
321F25

Triadic

321F2E
2E321F
1F2E32

Split-Comp.

321F2E
25321F
1F322D

Tetradic

321F2E
322D1F
1F3223
1F2532

Contrast Matrix WCAG 2.1 Contrast

321F2E
66B2BA
BB9A1D
C7B1A3
E03778
—
6.3
AA
5.7
AA
7.5
AAA
3.6
AA Large
6.3
AA
—
1.1
Fail
1.2
Fail
1.7
Fail
5.7
AA
1.1
Fail
—
1.3
Fail
1.6
Fail
7.5
AAA
1.2
Fail
1.3
Fail
—
2.1
Fail
3.6
AA Large
1.7
Fail
1.6
Fail
2.1
Fail
—
White BG
15.3AAA
2.4Fail
2.7Fail
2.0Fail
4.2AA Large
Black BG
1.4Fail
8.6AAA
7.8AAA
10.2AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A2A
8788B8
ADAC3B
BDBDA6
979568

Deuteranopia

2B2C29
837DB8
AFB143
BFC0A7
A1AD65

Tritanopia

312827
6AB7B6
B95358
C6A9AA
D85C59

Achromatopsia

262626
9C9C9C
969696
B6B6B6
717171

Shades & Tints Shades & Tints

#321F2E

Dark
Light

#66B2BA

Dark
Light

#BB9A1D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #321f2e;
  --color-2: #66b2ba;
  --color-3: #bb9a1d;
  --color-4: #c7b1a3;
  --color-5: #e03778;
}

SCSS

$color-1: #321f2e;
$color-2: #66b2ba;
$color-3: #bb9a1d;
$color-4: #c7b1a3;
$color-5: #e03778;

TAILWIND

colors: {
  'brand-1': '#321f2e',
  'brand-2': '#66b2ba',
  'brand-3': '#bb9a1d',
  'brand-4': '#c7b1a3',
  'brand-5': '#e03778',
}

RGB Array

[50, 31, 46], [102, 178, 186], [187, 154, 29], [199, 177, 163], [224, 55, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #321F2E, #66B2BA, #BB9A1D, #C7B1A3, #E03778 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: #321f2e; --color-2: #66b2ba; --color-3: #bb9a1d; --color-4: #c7b1a3; --color-5: #e03778. 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