← Back to Editor

#608180 · #1F0614 · #44203A · #AF4A50 · #F6598A

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

#608180

Mineral Blue · SlateGray · Mint Ice

HEX
#608180
RGB
rgb(96, 129, 128)
HSL
hsl(178, 15%, 44%)
HSB
hsb(178, 26%, 51%)
CMYK
cmyk(26%, 0%, 1%, 49%)
Oklch
oklch(57.8% 0.037 193.8)

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

#1F0614

Rose Purple · Black · Raspberry

HEX
#1F0614
RGB
rgb(31, 6, 20)
HSL
hsl(326, 68%, 7%)
HSB
hsb(326, 81%, 12%)
CMYK
cmyk(0%, 81%, 35%, 88%)
Oklch
oklch(17.4% 0.049 348.1)

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

#44203A

Rose Purple · DarkSlateGray · Dark Purple

HEX
#44203A
RGB
rgb(68, 32, 58)
HSL
hsl(317, 36%, 20%)
HSB
hsb(317, 53%, 27%)
CMYK
cmyk(0%, 53%, 15%, 73%)
Oklch
oklch(30.4% 0.067 338.6)

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

#AF4A50

Crimson · Sienna · Passion Red

HEX
#AF4A50
RGB
rgb(175, 74, 80)
HSL
hsl(356, 41%, 49%)
HSB
hsb(356, 58%, 69%)
CMYK
cmyk(0%, 58%, 54%, 31%)
Oklch
oklch(54.3% 0.132 19.0)

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

#F6598A

Rouge · LightCoral · Rose Pink

HEX
#F6598A
RGB
rgb(246, 89, 138)
HSL
hsl(341, 90%, 66%)
HSB
hsb(341, 64%, 96%)
CMYK
cmyk(0%, 64%, 44%, 4%)
Oklch
oklch(68.4% 0.195 4.7)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

608180
815F60

Analogous

5F816F
608180
5F7181

Triadic

608180
805F81
81805F

Split-Comp.

608180
815F71
816F5F

Tetradic

608180
6F5F81
815F60
71815F

Contrast Matrix WCAG 2.1 Contrast

608180
1F0614
44203A
AF4A50
F6598A
—
4.5
AA
3.3
AA Large
1.3
Fail
1.4
Fail
4.5
AA
—
1.4
Fail
3.6
AA Large
6.1
AA
3.3
AA Large
1.4
Fail
—
2.6
Fail
4.4
AA Large
1.3
Fail
3.6
AA Large
2.6
Fail
—
1.7
Fail
1.4
Fail
6.1
AA
4.4
AA Large
1.7
Fail
—
White BG
4.2AA Large
19.2AAA
13.9AAA
5.4AA
3.1AA Large
Black BG
4.9AA
1.1Fail
1.5Fail
3.9AA Large
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6F80
141411
343434
83824F
B2B17E

Deuteranopia

6C6A80
161810
373932
89914E
BBC77B

Tritanopia

628080
1E0E0D
422F2E
AA4D4D
EE7573

Achromatopsia

777777
0F0F0F
2E2E2E
696969
8E8E8E

Shades & Tints Shades & Tints

#608180

Dark
Light

#1F0614

Dark
Light

#44203A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #608180;
  --color-2: #1f0614;
  --color-3: #44203a;
  --color-4: #af4a50;
  --color-5: #f6598a;
}

SCSS

$color-1: #608180;
$color-2: #1f0614;
$color-3: #44203a;
$color-4: #af4a50;
$color-5: #f6598a;

TAILWIND

colors: {
  'brand-1': '#608180',
  'brand-2': '#1f0614',
  'brand-3': '#44203a',
  'brand-4': '#af4a50',
  'brand-5': '#f6598a',
}

RGB Array

[96, 129, 128], [31, 6, 20], [68, 32, 58], [175, 74, 80], [246, 89, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #608180, #1F0614, #44203A, #AF4A50, #F6598A is ideal for: tech websites, dark mode UIs, game UIs, 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: #608180; --color-2: #1f0614; --color-3: #44203a; --color-4: #af4a50; --color-5: #f6598a. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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