← Back to Editor

#CC0000 · #385257 · #48696E · #5F8285 · #FF054C

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 Library

Color Details Color Details

#CC0000

Vermilion · Red · Wine Red

HEX
#CC0000
RGB
rgb(204, 0, 0)
HSL
hsl(0, 100%, 40%)
HSB
hsb(0, 100%, 80%)
CMYK
cmyk(0%, 100%, 100%, 20%)
Oklch
oklch(53.1% 0.218 29.2)

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

#385257

Slate Blue · DarkSlateGray · Mint Ice

HEX
#385257
RGB
rgb(56, 82, 87)
HSL
hsl(190, 22%, 28%)
HSB
hsb(190, 36%, 34%)
CMYK
cmyk(36%, 6%, 0%, 66%)
Oklch
oklch(42.0% 0.032 210.8)

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

#48696E

Slate Blue · DimGray · Mint Ice

HEX
#48696E
RGB
rgb(72, 105, 110)
HSL
hsl(188, 21%, 36%)
HSB
hsb(188, 35%, 43%)
CMYK
cmyk(35%, 5%, 0%, 57%)
Oklch
oklch(49.7% 0.039 207.8)

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

#5F8285

Slate Blue · SlateGray · Mint Ice

HEX
#5F8285
RGB
rgb(95, 130, 133)
HSL
hsl(185, 17%, 45%)
HSB
hsb(185, 29%, 52%)
CMYK
cmyk(29%, 2%, 0%, 48%)
Oklch
oklch(58.1% 0.040 202.7)

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

#FF054C

Dark Violet · Crimson · Rose Pink

HEX
#FF054C
RGB
rgb(255, 5, 76)
HSL
hsl(343, 100%, 51%)
HSB
hsb(343, 98%, 100%)
CMYK
cmyk(0%, 98%, 70%, 0%)
Oklch
oklch(63.5% 0.253 18.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC0000
00CCCC

Analogous

CC0066
CC0000
CC6600

Triadic

CC0000
00CC00
0000CC

Split-Comp.

CC0000
00CC66
0066CC

Tetradic

CC0000
66CC00
00CCCC
6600CC

Contrast Matrix WCAG 2.1 Contrast

CC0000
385257
48696E
5F8285
FF054C
—
1.4
Fail
1.0
Fail
1.4
Fail
1.5
Fail
1.4
Fail
—
1.4
Fail
2.0
Fail
2.1
Fail
1.0
Fail
1.4
Fail
—
1.4
Fail
1.5
Fail
1.4
Fail
2.0
Fail
1.4
Fail
—
1.1
Fail
1.5
Fail
2.1
Fail
1.5
Fail
1.1
Fail
—
White BG
5.9AA
8.4AAA
6.0AA
4.2AA Large
3.9AA Large
Black BG
3.6AA Large
2.5Fail
3.5AA Large
5.0AA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

747200
434356
56576D
6E6E84
93913B

Deuteranopia

808F00
424056
54526D
6C6A84
A1B437

Tritanopia

C20000
395555
4A6C6C
618484
F32D2A

Achromatopsia

3D3D3D
4B4B4B
606060
787878
585858

Shades & Tints Shades & Tints

#CC0000

Dark
Light

#385257

Dark
Light

#48696E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc0000;
  --color-2: #385257;
  --color-3: #48696e;
  --color-4: #5f8285;
  --color-5: #ff054c;
}

SCSS

$color-1: #cc0000;
$color-2: #385257;
$color-3: #48696e;
$color-4: #5f8285;
$color-5: #ff054c;

TAILWIND

colors: {
  'brand-1': '#cc0000',
  'brand-2': '#385257',
  'brand-3': '#48696e',
  'brand-4': '#5f8285',
  'brand-5': '#ff054c',
}

RGB Array

[204, 0, 0], [56, 82, 87], [72, 105, 110], [95, 130, 133], [255, 5, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CC0000, #385257, #48696E, #5F8285, #FF054C 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: #cc0000; --color-2: #385257; --color-3: #48696e; --color-4: #5f8285; --color-5: #ff054c. 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