← Back to Editor

#F4DCAC · #FFBBA6 · #EA6E86 · #334C82 · #6B818F

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

#F4DCAC

Goose Yellow · Wheat · Lemon Cream

HEX
#F4DCAC
RGB
rgb(244, 220, 172)
HSL
hsl(40, 77%, 82%)
HSB
hsb(40, 30%, 96%)
CMYK
cmyk(0%, 10%, 30%, 4%)
Oklch
oklch(90.3% 0.068 84.4)

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

#FFBBA6

Peach Pink · LightPink · Cherry Blossom

HEX
#FFBBA6
RGB
rgb(255, 187, 166)
HSL
hsl(14, 100%, 83%)
HSB
hsb(14, 35%, 100%)
CMYK
cmyk(0%, 27%, 35%, 0%)
Oklch
oklch(85.0% 0.084 37.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#EA6E86

Peach Pink · LightCoral · Coral Red

HEX
#EA6E86
RGB
rgb(234, 110, 134)
HSL
hsl(348, 75%, 67%)
HSB
hsb(348, 53%, 92%)
CMYK
cmyk(0%, 53%, 43%, 8%)
Oklch
oklch(69.2% 0.154 9.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#334C82

Indigo · DarkSlateBlue · Prussian Blue

HEX
#334C82
RGB
rgb(51, 76, 130)
HSL
hsl(221, 44%, 35%)
HSB
hsb(221, 61%, 51%)
CMYK
cmyk(61%, 42%, 0%, 49%)
Oklch
oklch(42.4% 0.095 264.0)

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

#6B818F

Slate Blue · SlateGray · Navy Blue

HEX
#6B818F
RGB
rgb(107, 129, 143)
HSL
hsl(203, 14%, 49%)
HSB
hsb(203, 25%, 56%)
CMYK
cmyk(25%, 10%, 0%, 44%)
Oklch
oklch(59.1% 0.033 236.1)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4DCAC
AEC5F4

Analogous

F4BAAE
F4DCAC
E9F4AE

Triadic

F4DCAC
AEF4DD
DDAEF4

Split-Comp.

F4DCAC
AEE9F4
BAAEF4

Tetradic

F4DCAC
AEF4BA
AEC5F4
F4AEE9

Contrast Matrix WCAG 2.1 Contrast

F4DCAC
FFBBA6
EA6E86
334C82
6B818F
—
1.2
Fail
2.2
Fail
6.3
AA
3.0
AA Large
1.2
Fail
—
1.8
Fail
5.2
AA
2.5
Fail
2.2
Fail
1.8
Fail
—
2.8
Fail
1.4
Fail
6.3
AA
5.2
AA
2.8
Fail
—
2.1
Fail
3.0
AA Large
2.5
Fail
1.4
Fail
2.1
Fail
—
White BG
1.3Fail
1.6Fail
3.0Fail
8.4AAA
4.1AA Large
Black BG
15.7AAA
12.9AAA
7.1AAA
2.5Fail
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAE9B8
E2E1AB
B4B380
3E3E75
75758C

Deuteranopia

EBEDBA
E6EBAC
BCC57F
3C3B72
73728B

Tritanopia

F3C1C3
FCAFB0
E47C7B
346B68
6C8988

Achromatopsia

DEDEDE
CDCDCD
969696
4B4B4B
7C7C7C

Shades & Tints Shades & Tints

#F4DCAC

Dark
Light

#FFBBA6

Dark
Light

#EA6E86

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4dcac;
  --color-2: #ffbba6;
  --color-3: #ea6e86;
  --color-4: #334c82;
  --color-5: #6b818f;
}

SCSS

$color-1: #f4dcac;
$color-2: #ffbba6;
$color-3: #ea6e86;
$color-4: #334c82;
$color-5: #6b818f;

TAILWIND

colors: {
  'brand-1': '#f4dcac',
  'brand-2': '#ffbba6',
  'brand-3': '#ea6e86',
  'brand-4': '#334c82',
  'brand-5': '#6b818f',
}

RGB Array

[244, 220, 172], [255, 187, 166], [234, 110, 134], [51, 76, 130], [107, 129, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4DCAC, #FFBBA6, #EA6E86, #334C82, #6B818F 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: #f4dcac; --color-2: #ffbba6; --color-3: #ea6e86; --color-4: #334c82; --color-5: #6b818f. 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