← Back to Editor

#335A81 · #0D2C58 · #F0947F · #FDD9C1 · #F3EAEB

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

#335A81

Indigo · DarkSlateBlue · Prussian Blue

HEX
#335A81
RGB
rgb(51, 90, 129)
HSL
hsl(210, 43%, 35%)
HSB
hsb(210, 60%, 51%)
CMYK
cmyk(60%, 30%, 0%, 49%)
Oklch
oklch(45.7% 0.078 249.9)

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

#0D2C58

Indigo · MidnightBlue · Deep Sea Blue

HEX
#0D2C58
RGB
rgb(13, 44, 88)
HSL
hsl(215, 74%, 20%)
HSB
hsb(215, 85%, 35%)
CMYK
cmyk(85%, 50%, 0%, 65%)
Oklch
oklch(29.8% 0.087 257.9)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#F0947F

Peach Pink · DarkSalmon · Coral Red

HEX
#F0947F
RGB
rgb(240, 148, 127)
HSL
hsl(11, 79%, 72%)
HSB
hsb(11, 47%, 94%)
CMYK
cmyk(0%, 38%, 47%, 6%)
Oklch
oklch(75.7% 0.116 33.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FDD9C1

Apricot · Bisque · Peach Orange

HEX
#FDD9C1
RGB
rgb(253, 217, 193)
HSL
hsl(24, 94%, 87%)
HSB
hsb(24, 24%, 99%)
CMYK
cmyk(0%, 14%, 24%, 1%)
Oklch
oklch(90.9% 0.051 55.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F3EAEB

Peach Pink · Linen · Cherry Blossom

HEX
#F3EAEB
RGB
rgb(243, 234, 235)
HSL
hsl(353, 27%, 94%)
HSB
hsb(353, 4%, 95%)
CMYK
cmyk(0%, 4%, 3%, 5%)
Oklch
oklch(94.4% 0.010 9.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

335A81
805933

Analogous

338080
335A81
333380

Triadic

335A81
803359
598033

Split-Comp.

335A81
803333
808033

Tetradic

335A81
803380
805933
338033

Contrast Matrix WCAG 2.1 Contrast

335A81
0D2C58
F0947F
FDD9C1
F3EAEB
—
1.9
Fail
3.2
AA Large
5.4
AA
6.1
AA
1.9
Fail
—
6.1
AA
10.5
AAA
11.7
AAA
3.2
AA Large
6.1
AA
—
1.7
Fail
1.9
Fail
5.4
AA
10.5
AAA
1.7
Fail
—
1.1
Fail
6.1
AA
11.7
AAA
1.9
Fail
1.1
Fail
—
White BG
7.2AAA
13.8AAA
2.3Fail
1.3Fail
1.2Fail
Black BG
2.9Fail
1.5Fail
9.2AAA
15.9AAA
17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

444478
1A1B4D
C8C784
EDEDC7
EFEFEB

Deuteranopia

423F75
19164B
CED485
F0F2C8
F0F0EB

Tritanopia

35706E
0F4543
EB8889
FBCBCC
F3EBEB

Achromatopsia

535353
282828
ADADAD
E1E1E1
EDEDED

Shades & Tints Shades & Tints

#335A81

Dark
Light

#0D2C58

Dark
Light

#F0947F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #335a81;
  --color-2: #0d2c58;
  --color-3: #f0947f;
  --color-4: #fdd9c1;
  --color-5: #f3eaeb;
}

SCSS

$color-1: #335a81;
$color-2: #0d2c58;
$color-3: #f0947f;
$color-4: #fdd9c1;
$color-5: #f3eaeb;

TAILWIND

colors: {
  'brand-1': '#335a81',
  'brand-2': '#0d2c58',
  'brand-3': '#f0947f',
  'brand-4': '#fdd9c1',
  'brand-5': '#f3eaeb',
}

RGB Array

[51, 90, 129], [13, 44, 88], [240, 148, 127], [253, 217, 193], [243, 234, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #335A81, #0D2C58, #F0947F, #FDD9C1, #F3EAEB 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: #335a81; --color-2: #0d2c58; --color-3: #f0947f; --color-4: #fdd9c1; --color-5: #f3eaeb. 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