← Back to Editor

#3C6160 · #FF0066 · #9C5672 · #8F6475 · #787878

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

#3C6160

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#3C6160
RGB
rgb(60, 97, 96)
HSL
hsl(178, 24%, 31%)
HSB
hsb(178, 38%, 38%)
CMYK
cmyk(38%, 0%, 1%, 62%)
Oklch
oklch(46.5% 0.042 193.6)

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

#FF0066

Dark Violet · DeepPink · Camellia

HEX
#FF0066
RGB
rgb(255, 0, 102)
HSL
hsl(336, 100%, 50%)
HSB
hsb(336, 100%, 100%)
CMYK
cmyk(0%, 100%, 60%, 0%)
Oklch
oklch(63.9% 0.255 10.5)

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

#9C5672

Dark Violet · Gray · Camellia

HEX
#9C5672
RGB
rgb(156, 86, 114)
HSL
hsl(336, 29%, 47%)
HSB
hsb(336, 45%, 61%)
CMYK
cmyk(0%, 45%, 27%, 39%)
Oklch
oklch(54.3% 0.098 355.5)

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

#8F6475

Dark Violet · Gray · Camellia

HEX
#8F6475
RGB
rgb(143, 100, 117)
HSL
hsl(336, 18%, 48%)
HSB
hsb(336, 30%, 56%)
CMYK
cmyk(0%, 30%, 18%, 44%)
Oklch
oklch(55.3% 0.060 353.8)

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

#787878

Ink Gray · Gray · Warm Gray

HEX
#787878
RGB
rgb(120, 120, 120)
HSL
hsl(0, 0%, 47%)
HSB
hsb(0, 0%, 47%)
CMYK
cmyk(0%, 0%, 0%, 53%)
Oklch
oklch(57.3% 0.000 89.9)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C6160
623C3D

Analogous

3C624E
3C6160
3C5062

Triadic

3C6160
613C62
62613C

Split-Comp.

3C6160
623C50
624E3C

Tetradic

3C6160
4E3C62
623C3D
50623C

Contrast Matrix WCAG 2.1 Contrast

3C6160
FF0066
9C5672
8F6475
787878
—
1.8
Fail
1.3
Fail
1.4
Fail
1.5
Fail
1.8
Fail
—
1.4
Fail
1.3
Fail
1.1
Fail
1.3
Fail
1.4
Fail
—
1.1
Fail
1.2
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
1.1
Fail
1.2
Fail
1.1
Fail
—
White BG
6.8AA
3.9AA Large
5.3AA
4.9AA
4.4AA Large
Black BG
3.1AA Large
5.4AA
4.0AA Large
4.2AA Large
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4C60
918E4D
7E7D6B
7C7C71
787878

Deuteranopia

4A4760
9FB347
82876A
7F8270
787878

Tritanopia

3E6060
F23A36
996665
8D6E6D
787878

Achromatopsia

565656
585858
6E6E6E
737373
787878

Shades & Tints Shades & Tints

#3C6160

Dark
Light

#FF0066

Dark
Light

#9C5672

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c6160;
  --color-2: #ff0066;
  --color-3: #9c5672;
  --color-4: #8f6475;
  --color-5: #787878;
}

SCSS

$color-1: #3c6160;
$color-2: #ff0066;
$color-3: #9c5672;
$color-4: #8f6475;
$color-5: #787878;

TAILWIND

colors: {
  'brand-1': '#3c6160',
  'brand-2': '#ff0066',
  'brand-3': '#9c5672',
  'brand-4': '#8f6475',
  'brand-5': '#787878',
}

RGB Array

[60, 97, 96], [255, 0, 102], [156, 86, 114], [143, 100, 117], [120, 120, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C6160, #FF0066, #9C5672, #8F6475, #787878 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: #3c6160; --color-2: #ff0066; --color-3: #9c5672; --color-4: #8f6475; --color-5: #787878. 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