← Back to Editor

#CF6F9F · #557C92 · #008985 · #1E1861 · #3C003D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#CF6F9F

Rouge · LightCoral · Rose Pink

HEX
#CF6F9F
RGB
rgb(207, 111, 159)
HSL
hsl(330, 50%, 62%)
HSB
hsb(330, 46%, 81%)
CMYK
cmyk(0%, 46%, 23%, 19%)
Oklch
oklch(66.5% 0.133 350.0)

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

#557C92

Slate Blue · SlateGray · Navy Blue

HEX
#557C92
RGB
rgb(85, 124, 146)
HSL
hsl(202, 26%, 45%)
HSB
hsb(202, 42%, 57%)
CMYK
cmyk(42%, 15%, 0%, 43%)
Oklch
oklch(56.6% 0.055 233.8)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#008985

Mineral Blue · Teal · Mint Ice

HEX
#008985
RGB
rgb(0, 137, 133)
HSL
hsl(178, 100%, 27%)
HSB
hsb(178, 100%, 54%)
CMYK
cmyk(100%, 0%, 3%, 46%)
Oklch
oklch(56.9% 0.098 191.2)

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

#1E1861

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#1E1861
RGB
rgb(30, 24, 97)
HSL
hsl(245, 60%, 24%)
HSB
hsb(245, 75%, 38%)
CMYK
cmyk(69%, 75%, 0%, 62%)
Oklch
oklch(27.3% 0.123 278.1)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#3C003D

Royal Purple · MidnightBlue · Dark Purple

HEX
#3C003D
RGB
rgb(60, 0, 61)
HSL
hsl(299, 100%, 12%)
HSB
hsb(299, 100%, 24%)
CMYK
cmyk(2%, 100%, 0%, 76%)
Oklch
oklch(25.1% 0.116 327.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CF6F9F
6ECF9E

Analogous

CF6ECF
CF6F9F
CF6E6E

Triadic

CF6F9F
9ECF6E
6E9ECF

Split-Comp.

CF6F9F
6ECF6E
6ECFCF

Tetradic

CF6F9F
CFCF6E
6ECF9E
6E6ECF

Contrast Matrix WCAG 2.1 Contrast

CF6F9F
557C92
008985
1E1861
3C003D
—
1.4
Fail
1.3
Fail
4.7
AA
5.1
AA
1.4
Fail
—
1.0
Fail
3.4
AA Large
3.7
AA Large
1.3
Fail
1.0
Fail
—
3.6
AA Large
3.9
AA Large
4.7
AA
3.4
AA Large
3.6
AA Large
—
1.1
Fail
5.1
AA
3.7
AA Large
3.9
AA Large
1.1
Fail
—
White BG
3.3AA Large
4.5AA Large
4.3AA Large
15.5AAA
16.7AAA
Black BG
6.4AA
4.7AA
4.9AA
1.4Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A593
66668D
3B3D86
1B1B4F
22212E

Deuteranopia

ABB291
64618B
332986
1C1C4B
262A2B

Tritanopia

CA8A88
578888
078787
1E413E
392320

Achromatopsia

919191
737373
606060
222222
191919

Shades & Tints Shades & Tints

#CF6F9F

Dark
Light

#557C92

Dark
Light

#008985

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cf6f9f;
  --color-2: #557c92;
  --color-3: #008985;
  --color-4: #1e1861;
  --color-5: #3c003d;
}

SCSS

$color-1: #cf6f9f;
$color-2: #557c92;
$color-3: #008985;
$color-4: #1e1861;
$color-5: #3c003d;

TAILWIND

colors: {
  'brand-1': '#cf6f9f',
  'brand-2': '#557c92',
  'brand-3': '#008985',
  'brand-4': '#1e1861',
  'brand-5': '#3c003d',
}

RGB Array

[207, 111, 159], [85, 124, 146], [0, 137, 133], [30, 24, 97], [60, 0, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CF6F9F, #557C92, #008985, #1E1861, #3C003D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cf6f9f; --color-2: #557c92; --color-3: #008985; --color-4: #1e1861; --color-5: #3c003d. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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