← Back to Editor

#46434A · #FF3D74 · #9DA600 · #2D9594 · #8B848B

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

#46434A

Dark Cyan · DarkSlateGray · Charcoal

HEX
#46434A
RGB
rgb(70, 67, 74)
HSL
hsl(266, 5%, 28%)
HSB
hsb(266, 9%, 29%)
CMYK
cmyk(5%, 9%, 0%, 71%)
Oklch
oklch(38.8% 0.012 305.1)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#FF3D74

Rouge · DeepPink · Rose Pink

HEX
#FF3D74
RGB
rgb(255, 61, 116)
HSL
hsl(343, 100%, 62%)
HSB
hsb(343, 76%, 100%)
CMYK
cmyk(0%, 76%, 55%, 0%)
Oklch
oklch(66.6% 0.228 9.9)

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

#9DA600

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#9DA600
RGB
rgb(157, 166, 0)
HSL
hsl(63, 100%, 33%)
HSB
hsb(63, 100%, 65%)
CMYK
cmyk(5%, 0%, 100%, 35%)
Oklch
oklch(69.4% 0.156 113.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#2D9594

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#2D9594
RGB
rgb(45, 149, 148)
HSL
hsl(179, 54%, 38%)
HSB
hsb(179, 70%, 58%)
CMYK
cmyk(70%, 0%, 1%, 42%)
Oklch
oklch(61.2% 0.092 194.1)

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

#8B848B

Ash · Gray · Warm Gray

HEX
#8B848B
RGB
rgb(139, 132, 139)
HSL
hsl(300, 3%, 53%)
HSB
hsb(300, 5%, 55%)
CMYK
cmyk(0%, 5%, 0%, 45%)
Oklch
oklch(62.2% 0.013 325.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

46434A
484B44

Analogous

44444B
46434A
4A444B

Triadic

46434A
4B4744
444B47

Split-Comp.

46434A
4B4A44
444B44

Tetradic

46434A
4B4444
484B44
444B4A

Contrast Matrix WCAG 2.1 Contrast

46434A
FF3D74
9DA600
2D9594
8B848B
—
2.9
Fail
3.6
AA Large
2.7
Fail
2.7
Fail
2.9
Fail
—
1.3
Fail
1.1
Fail
1.1
Fail
3.6
AA Large
1.3
Fail
—
1.4
Fail
1.4
Fail
2.7
Fail
1.1
Fail
1.4
Fail
—
1.0
Fail
2.7
Fail
1.1
Fail
1.4
Fail
1.0
Fail
—
White BG
9.7AAA
3.4AA Large
2.7Fail
3.6AA Large
3.6AA Large
Black BG
2.2Fail
6.2AA
7.9AAA
5.8AA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

454548
ABA967
A1A128
5A5B94
888889

Deuteranopia

454548
B6C563
A0A032
544C94
888989

Tritanopia

464747
F55C5A
9D484F
329494
8B8888

Achromatopsia

454545
7D7D7D
909090
767676
878787

Shades & Tints Shades & Tints

#46434A

Dark
Light

#FF3D74

Dark
Light

#9DA600

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #46434a;
  --color-2: #ff3d74;
  --color-3: #9da600;
  --color-4: #2d9594;
  --color-5: #8b848b;
}

SCSS

$color-1: #46434a;
$color-2: #ff3d74;
$color-3: #9da600;
$color-4: #2d9594;
$color-5: #8b848b;

TAILWIND

colors: {
  'brand-1': '#46434a',
  'brand-2': '#ff3d74',
  'brand-3': '#9da600',
  'brand-4': '#2d9594',
  'brand-5': '#8b848b',
}

RGB Array

[70, 67, 74], [255, 61, 116], [157, 166, 0], [45, 149, 148], [139, 132, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #46434A, #FF3D74, #9DA600, #2D9594, #8B848B 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: #46434a; --color-2: #ff3d74; --color-3: #9da600; --color-4: #2d9594; --color-5: #8b848b. 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