#F32053 + #F3CB8E + #58C991 + #58978E + #3A4F7C · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F32053

Vermilion · Crimson · Passion Red

HEX

#F32053

RGB

rgb(243, 32, 83)

HSL

hsl(345, 90%, 54%)

HSB

hsb(345, 87%, 95%)

CMYK

cmyk(0%, 87%, 66%, 5%)

Oklch

oklch(62.2% 0.235 16.2)

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

#F3CB8E

Goose Yellow · Khaki · Warm Sun

HEX

#F3CB8E

RGB

rgb(243, 203, 142)

HSL

hsl(36, 81%, 75%)

HSB

hsb(36, 42%, 95%)

CMYK

cmyk(0%, 16%, 42%, 5%)

Oklch

oklch(86.3% 0.090 77.7)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#58C991

Mineral Blue · MediumAquaMarine · Olive Green

HEX

#58C991

RGB

rgb(88, 201, 145)

HSL

hsl(150, 51%, 57%)

HSB

hsb(150, 56%, 79%)

CMYK

cmyk(56%, 0%, 28%, 21%)

Oklch

oklch(75.6% 0.132 159.2)

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

#58978E

Mineral Blue · CadetBlue · Mint Ice

HEX

#58978E

RGB

rgb(88, 151, 142)

HSL

hsl(171, 26%, 47%)

HSB

hsb(171, 42%, 59%)

CMYK

cmyk(42%, 0%, 6%, 41%)

Oklch

oklch(63.1% 0.067 184.1)

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

#3A4F7C

Indigo · DarkSlateBlue · Prussian Blue

HEX

#3A4F7C

RGB

rgb(58, 79, 124)

HSL

hsl(221, 36%, 36%)

HSB

hsb(221, 53%, 49%)

CMYK

cmyk(53%, 36%, 0%, 51%)

Oklch

oklch(43.2% 0.079 264.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F32053

20F3BE

Analogous

F320BE

F32053

F35520

Triadic

F32053

55F320

2055F3

Split-Comp.

F32053

20F355

20BEF3

Tetradic

F32053

BEF320

20F3BE

5520F3

Contrast Matrix WCAG 2.1 Contrast

F32053	F3CB8E	58C991	58978E	3A4F7C
—	2.7 Fail	2.0 Fail	1.2 Fail	2.0 Fail
2.7 Fail	—	1.4 Fail	2.2 Fail	5.3 AA
2.0 Fail	1.4 Fail	—	1.6 Fail	3.9 AA Large
1.2 Fail	2.2 Fail	1.6 Fail	—	2.4 Fail
2.0 Fail	5.3 AA	3.9 AA Large	2.4 Fail	—

White BG

4.1AA Large

1.5Fail

2.1Fail

3.4AA Large

8.1AAA

Black BG

5.1AA

13.7AAA

10.2AAA

6.2AA

2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

989647

E2E19D

898A9F

737490

434371

Deuteranopia

A4B444

E4E7A0

827AA2

706B91

42406F

Tritanopia

E83D3B

F1A8AB

5EA9AC

5B9292

3B6967

Achromatopsia

656565

D0D0D0

A1A1A1

838383

4E4E4E

Shades & Tints Shades & Tints

#F32053

Dark

Light

#F3CB8E

Dark

Light

#58C991

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f32053;
  --color-2: #f3cb8e;
  --color-3: #58c991;
  --color-4: #58978e;
  --color-5: #3a4f7c;
}

SCSS

$color-1: #f32053;
$color-2: #f3cb8e;
$color-3: #58c991;
$color-4: #58978e;
$color-5: #3a4f7c;

TAILWIND

colors: {
  'brand-1': '#f32053',
  'brand-2': '#f3cb8e',
  'brand-3': '#58c991',
  'brand-4': '#58978e',
  'brand-5': '#3a4f7c',
}

RGB Array

[243, 32, 83], [243, 203, 142], [88, 201, 145], [88, 151, 142], [58, 79, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #F32053, #F3CB8E, #58C991, #58978E, #3A4F7C 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: #f32053; --color-2: #f3cb8e; --color-3: #58c991; --color-4: #58978e; --color-5: #3a4f7c. 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 dark-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