#604E74 + #327C7F + #C43E85 + #46C389 + #F3DA76 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#604E74

Deep Indigo · DimGray · Eggplant

HEX

#604E74

RGB

rgb(96, 78, 116)

HSL

hsl(268, 20%, 38%)

HSB

hsb(268, 33%, 45%)

CMYK

cmyk(17%, 33%, 0%, 55%)

Oklch

oklch(45.8% 0.064 305.7)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#327C7F

Slate Blue · SeaGreen · Mint Ice

HEX

#327C7F

RGB

rgb(50, 124, 127)

HSL

hsl(182, 44%, 35%)

HSB

hsb(182, 61%, 50%)

CMYK

cmyk(61%, 2%, 0%, 50%)

Oklch

oklch(54.2% 0.073 198.9)

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

#C43E85

Rose Purple · MediumVioletRed · Rose Pink

HEX

#C43E85

RGB

rgb(196, 62, 133)

HSL

hsl(328, 53%, 51%)

HSB

hsb(328, 68%, 77%)

CMYK

cmyk(0%, 68%, 32%, 23%)

Oklch

oklch(57.7% 0.183 351.7)

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

#46C389

Mineral Blue · MediumSeaGreen · Olive Green

HEX

#46C389

RGB

rgb(70, 195, 137)

HSL

hsl(152, 51%, 52%)

HSB

hsb(152, 64%, 76%)

CMYK

cmyk(64%, 0%, 30%, 24%)

Oklch

oklch(73.3% 0.140 159.6)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#F3DA76

Goose Yellow · Khaki · Sunflower

HEX

#F3DA76

RGB

rgb(243, 218, 118)

HSL

hsl(48, 84%, 71%)

HSB

hsb(48, 51%, 95%)

CMYK

cmyk(0%, 10%, 51%, 5%)

Oklch

oklch(88.9% 0.124 95.6)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

604E74

62744E

Analogous

4E4F74

604E74

734E74

Triadic

604E74

74604E

4E7460

Split-Comp.

604E74

74734E

4F744E

Tetradic

604E74

744E4F

62744E

4E7473

Contrast Matrix WCAG 2.1 Contrast

604E74	327C7F	C43E85	46C389	F3DA76
—	1.5 Fail	1.5 Fail	3.3 AA Large	5.3 AA
1.5 Fail	—	1.0 Fail	2.2 Fail	3.5 AA Large
1.5 Fail	1.0 Fail	—	2.2 Fail	3.5 AA Large
3.3 AA Large	2.2 Fail	2.2 Fail	—	1.6 Fail
5.3 AA	3.5 AA Large	3.5 AA Large	1.6 Fail	—

White BG

7.4AAA

4.9AA

4.8AA

2.2Fail

1.4Fail

Black BG

2.8Fail

4.3AA Large

4.4AA Large

9.4AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

58586B

52537E

8A8974

7C7D97

E8E88E

Deuteranopia

595B69

4E487E

929C70

756C9A

EAEC94

Tritanopia

5F6462

367E7E

BD6663

4CA2A5

F2A1A6

Achromatopsia

585858

666666

6E6E6E

979797

D6D6D6

Shades & Tints Shades & Tints

#604E74

Dark

Light

#327C7F

Dark

Light

#C43E85

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #604e74;
  --color-2: #327c7f;
  --color-3: #c43e85;
  --color-4: #46c389;
  --color-5: #f3da76;
}

SCSS

$color-1: #604e74;
$color-2: #327c7f;
$color-3: #c43e85;
$color-4: #46c389;
$color-5: #f3da76;

TAILWIND

colors: {
  'brand-1': '#604e74',
  'brand-2': '#327c7f',
  'brand-3': '#c43e85',
  'brand-4': '#46c389',
  'brand-5': '#f3da76',
}

RGB Array

[96, 78, 116], [50, 124, 127], [196, 62, 133], [70, 195, 137], [243, 218, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #604E74, #327C7F, #C43E85, #46C389, #F3DA76 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: #604e74; --color-2: #327c7f; --color-3: #c43e85; --color-4: #46c389; --color-5: #f3da76. 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