← Back to Editor

#66012A · #55344B · #446671 · #339993 · #F9FCB1

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

#66012A

Dark Violet · Maroon · Raspberry

HEX
#66012A
RGB
rgb(102, 1, 42)
HSL
hsl(336, 98%, 20%)
HSB
hsb(336, 99%, 40%)
CMYK
cmyk(0%, 99%, 59%, 60%)
Oklch
oklch(32.8% 0.131 6.4)

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

#55344B

Rose Purple · DarkSlateGray · Eggplant

HEX
#55344B
RGB
rgb(85, 52, 75)
HSL
hsl(318, 24%, 27%)
HSB
hsb(318, 39%, 33%)
CMYK
cmyk(0%, 39%, 12%, 67%)
Oklch
oklch(37.3% 0.059 338.8)

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

#446671

Slate Blue · DimGray · Mint Ice

HEX
#446671
RGB
rgb(68, 102, 113)
HSL
hsl(195, 25%, 35%)
HSB
hsb(195, 40%, 44%)
CMYK
cmyk(40%, 10%, 0%, 56%)
Oklch
oklch(48.9% 0.043 220.1)

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

#339993

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#339993
RGB
rgb(51, 153, 147)
HSL
hsl(176, 50%, 40%)
HSB
hsb(176, 67%, 60%)
CMYK
cmyk(67%, 0%, 4%, 40%)
Oklch
oklch(62.4% 0.092 189.5)

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

#F9FCB1

Fresh Green · Wheat · Lemon Cream

HEX
#F9FCB1
RGB
rgb(249, 252, 177)
HSL
hsl(62, 93%, 84%)
HSB
hsb(62, 30%, 99%)
CMYK
cmyk(1%, 0%, 30%, 1%)
Oklch
oklch(97.2% 0.095 110.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

66012A
01653D

Analogous

65015B
66012A
650B01

Triadic

66012A
296501
012965

Split-Comp.

66012A
01650B
015B65

Tetradic

66012A
5B6501
01653D
0B0165

Contrast Matrix WCAG 2.1 Contrast

66012A
55344B
446671
339993
F9FCB1
—
1.2
Fail
2.1
Fail
3.8
AA Large
12.2
AAA
1.2
Fail
—
1.7
Fail
3.1
AA Large
9.9
AAA
2.1
Fail
1.7
Fail
—
1.8
Fail
5.8
AA
3.8
AA Large
3.1
AA Large
1.8
Fail
—
3.2
AA Large
12.2
AAA
9.9
AAA
5.8
AA
3.2
AA Large
—
White BG
13.1AAA
10.6AAA
6.2AA
3.4AA Large
1.1Fail
Black BG
1.6Fail
2.0Fail
3.4AA Large
6.1AA
19.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3920
474645
53536E
5F6094
FAFAC3

Deuteranopia

40481E
494B44
514E6E
595295
FAFAC8

Tritanopia

611817
534140
466C6C
389696
F9D1D5

Achromatopsia

242424
404040
5D5D5D
7A7A7A
F3F3F3

Shades & Tints Shades & Tints

#66012A

Dark
Light

#55344B

Dark
Light

#446671

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #66012a;
  --color-2: #55344b;
  --color-3: #446671;
  --color-4: #339993;
  --color-5: #f9fcb1;
}

SCSS

$color-1: #66012a;
$color-2: #55344b;
$color-3: #446671;
$color-4: #339993;
$color-5: #f9fcb1;

TAILWIND

colors: {
  'brand-1': '#66012a',
  'brand-2': '#55344b',
  'brand-3': '#446671',
  'brand-4': '#339993',
  'brand-5': '#f9fcb1',
}

RGB Array

[102, 1, 42], [85, 52, 75], [68, 102, 113], [51, 153, 147], [249, 252, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #66012A, #55344B, #446671, #339993, #F9FCB1 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: #66012a; --color-2: #55344b; --color-3: #446671; --color-4: #339993; --color-5: #f9fcb1. 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