← Back to Editor

#351D3D · #F44C7F · #F4D47F · #F4EBCE · #346A5D

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#351D3D

Dark Plum · DarkSlateGray · Dark Purple

HEX
#351D3D
RGB
rgb(53, 29, 61)
HSL
hsl(285, 36%, 18%)
HSB
hsb(285, 52%, 24%)
CMYK
cmyk(13%, 52%, 0%, 76%)
Oklch
oklch(27.8% 0.065 317.3)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

#F44C7F

Rouge · LightCoral · Rose Pink

HEX
#F44C7F
RGB
rgb(244, 76, 127)
HSL
hsl(342, 88%, 63%)
HSB
hsb(342, 69%, 96%)
CMYK
cmyk(0%, 69%, 48%, 4%)
Oklch
oklch(66.4% 0.206 6.4)

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

#F4D47F

Goose Yellow · Khaki · Sunflower

HEX
#F4D47F
RGB
rgb(244, 212, 127)
HSL
hsl(44, 84%, 73%)
HSB
hsb(44, 48%, 96%)
CMYK
cmyk(0%, 13%, 48%, 4%)
Oklch
oklch(87.9% 0.110 89.4)

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

#F4EBCE

Goose Yellow · Bisque · Lemon Cream

HEX
#F4EBCE
RGB
rgb(244, 235, 206)
HSL
hsl(46, 63%, 88%)
HSB
hsb(46, 16%, 96%)
CMYK
cmyk(0%, 4%, 16%, 4%)
Oklch
oklch(94.0% 0.039 92.7)

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

#346A5D

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#346A5D
RGB
rgb(52, 106, 93)
HSL
hsl(166, 34%, 31%)
HSB
hsb(166, 51%, 42%)
CMYK
cmyk(51%, 0%, 12%, 58%)
Oklch
oklch(48.3% 0.062 175.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

351D3D
263E1D

Analogous

261D3E
351D3D
3E1D36

Triadic

351D3D
3E361D
1D3E36

Split-Comp.

351D3D
363E1D
1D3E26

Tetradic

351D3D
3E261D
263E1D
1D363E

Contrast Matrix WCAG 2.1 Contrast

351D3D
F44C7F
F4D47F
F4EBCE
346A5D
—
4.4
AA Large
10.4
AAA
12.6
AAA
2.4
Fail
4.4
AA Large
—
2.4
Fail
2.8
Fail
1.8
Fail
10.4
AAA
2.4
Fail
—
1.2
Fail
4.3
AA Large
12.6
AAA
2.8
Fail
1.2
Fail
—
5.2
AA
2.4
Fail
1.8
Fail
4.3
AA Large
5.2
AA
—
White BG
15.1AAA
3.4AA Large
1.4Fail
1.2Fail
6.2AA
Black BG
1.4Fail
6.2AA
14.6AAA
17.6AAA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

2B2A35
ABAA73
E6E694
F0F0D5
4B4C60

Deuteranopia

2C2E33
B5C270
E8EA99
F1F1D7
484461

Tritanopia

342F2E
EC6967
F2A4A7
F4DBDC
376363

Achromatopsia

282828
848484
D4D4D4
EAEAEA
585858

Shades & Tints Shades & Tints

#351D3D

Dark
Light

#F44C7F

Dark
Light

#F4D47F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #351d3d;
  --color-2: #f44c7f;
  --color-3: #f4d47f;
  --color-4: #f4ebce;
  --color-5: #346a5d;
}

SCSS

$color-1: #351d3d;
$color-2: #f44c7f;
$color-3: #f4d47f;
$color-4: #f4ebce;
$color-5: #346a5d;

TAILWIND

colors: {
  'brand-1': '#351d3d',
  'brand-2': '#f44c7f',
  'brand-3': '#f4d47f',
  'brand-4': '#f4ebce',
  'brand-5': '#346a5d',
}

RGB Array

[53, 29, 61], [244, 76, 127], [244, 212, 127], [244, 235, 206], [52, 106, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #351D3D, #F44C7F, #F4D47F, #F4EBCE, #346A5D is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #351d3d; --color-2: #f44c7f; --color-3: #f4d47f; --color-4: #f4ebce; --color-5: #346a5d. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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