← Back to Editor

#F1F3E6 · #FF7D61 · #FC5E8E · #409DA2 · #066C7A

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

#F1F3E6

Fresh Green · Linen · Lemon Cream

HEX
#F1F3E6
RGB
rgb(241, 243, 230)
HSL
hsl(69, 35%, 93%)
HSB
hsb(69, 5%, 95%)
CMYK
cmyk(1%, 0%, 5%, 5%)
Oklch
oklch(95.9% 0.017 113.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#FF7D61

Peach Pink · Coral · Coral Red

HEX
#FF7D61
RGB
rgb(255, 125, 97)
HSL
hsl(11, 100%, 69%)
HSB
hsb(11, 62%, 100%)
CMYK
cmyk(0%, 51%, 62%, 0%)
Oklch
oklch(73.4% 0.164 33.5)

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

#FC5E8E

Rouge · LightCoral · Rose Pink

HEX
#FC5E8E
RGB
rgb(252, 94, 142)
HSL
hsl(342, 96%, 68%)
HSB
hsb(342, 63%, 99%)
CMYK
cmyk(0%, 63%, 44%, 1%)
Oklch
oklch(70.0% 0.195 5.0)

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

#409DA2

Slate Blue · CadetBlue · Mint Ice

HEX
#409DA2
RGB
rgb(64, 157, 162)
HSL
hsl(183, 43%, 44%)
HSB
hsb(183, 60%, 64%)
CMYK
cmyk(60%, 3%, 0%, 36%)
Oklch
oklch(64.3% 0.087 200.1)

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

#066C7A

Lake Blue · Teal · Peacock Green

HEX
#066C7A
RGB
rgb(6, 108, 122)
HSL
hsl(187, 91%, 25%)
HSB
hsb(187, 95%, 48%)
CMYK
cmyk(95%, 11%, 0%, 52%)
Oklch
oklch(48.8% 0.083 210.6)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1F3E6
E9E7F3

Analogous

F3EFE7
F1F3E6
EBF3E7

Triadic

F1F3E6
E7F2F3
F3E7F2

Split-Comp.

F1F3E6
E7EBF3
EFE7F3

Tetradic

F1F3E6
E7F3EF
E9E7F3
F3E7EB

Contrast Matrix WCAG 2.1 Contrast

F1F3E6
FF7D61
FC5E8E
409DA2
066C7A
—
2.2
Fail
2.6
Fail
2.8
Fail
5.4
AA
2.2
Fail
—
1.2
Fail
1.3
Fail
2.4
Fail
2.6
Fail
1.2
Fail
—
1.1
Fail
2.1
Fail
2.8
Fail
1.3
Fail
1.1
Fail
—
1.9
Fail
5.4
AA
2.4
Fail
2.1
Fail
1.9
Fail
—
White BG
1.1Fail
2.5Fail
2.9Fail
3.2AA Large
6.1AA
Black BG
18.7AAA
8.4AAA
7.1AAA
6.6AA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2E9
C7C668
B8B682
6869A1
323377

Deuteranopia

F2F2EA
CED869
C1CD80
635CA1
2C2576

Tritanopia

F1ECEC
F96D6E
F47977
45A0A0
0B7473

Achromatopsia

F1F1F1
A1A1A1
939393
828282
4F4F4F

Shades & Tints Shades & Tints

#F1F3E6

Dark
Light

#FF7D61

Dark
Light

#FC5E8E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1f3e6;
  --color-2: #ff7d61;
  --color-3: #fc5e8e;
  --color-4: #409da2;
  --color-5: #066c7a;
}

SCSS

$color-1: #f1f3e6;
$color-2: #ff7d61;
$color-3: #fc5e8e;
$color-4: #409da2;
$color-5: #066c7a;

TAILWIND

colors: {
  'brand-1': '#f1f3e6',
  'brand-2': '#ff7d61',
  'brand-3': '#fc5e8e',
  'brand-4': '#409da2',
  'brand-5': '#066c7a',
}

RGB Array

[241, 243, 230], [255, 125, 97], [252, 94, 142], [64, 157, 162], [6, 108, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F1F3E6, #FF7D61, #FC5E8E, #409DA2, #066C7A 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: #f1f3e6; --color-2: #ff7d61; --color-3: #fc5e8e; --color-4: #409da2; --color-5: #066c7a. 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