← Back to Editor

#F7A58F · #CB677F · #4A4F79 · #FFCC9F · #FFEBB0

warm

A 5-color warm 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

#F7A58F

Peach Pink · LightSalmon · Coral Red

HEX
#F7A58F
RGB
rgb(247, 165, 143)
HSL
hsl(13, 87%, 76%)
HSB
hsb(13, 42%, 97%)
CMYK
cmyk(0%, 33%, 42%, 3%)
Oklch
oklch(79.7% 0.103 35.7)

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

#CB677F

Crimson · LightCoral · Passion Red

HEX
#CB677F
RGB
rgb(203, 103, 127)
HSL
hsl(346, 49%, 60%)
HSB
hsb(346, 49%, 80%)
CMYK
cmyk(0%, 49%, 37%, 20%)
Oklch
oklch(63.7% 0.129 6.2)

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

#4A4F79

Indigo · DarkSlateBlue · Prussian Blue

HEX
#4A4F79
RGB
rgb(74, 79, 121)
HSL
hsl(234, 24%, 38%)
HSB
hsb(234, 39%, 47%)
CMYK
cmyk(39%, 35%, 0%, 53%)
Oklch
oklch(44.2% 0.069 278.0)

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

#FFCC9F

Apricot · Wheat · Peach Orange

HEX
#FFCC9F
RGB
rgb(255, 204, 159)
HSL
hsl(28, 100%, 81%)
HSB
hsb(28, 38%, 100%)
CMYK
cmyk(0%, 20%, 38%, 0%)
Oklch
oklch(87.9% 0.082 62.9)

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

#FFEBB0

Goose Yellow · Wheat · Lemon Cream

HEX
#FFEBB0
RGB
rgb(255, 235, 176)
HSL
hsl(45, 100%, 85%)
HSB
hsb(45, 31%, 100%)
CMYK
cmyk(0%, 8%, 31%, 0%)
Oklch
oklch(94.2% 0.078 91.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7A58F
8DE0F7

Analogous

F78DAB
F7A58F
F7D98D

Triadic

F7A58F
8DF7A4
A48DF7

Split-Comp.

F7A58F
8DF7D9
8DABF7

Tetradic

F7A58F
ABF78D
8DE0F7
D98DF7

Contrast Matrix WCAG 2.1 Contrast

F7A58F
CB677F
4A4F79
FFCC9F
FFEBB0
—
1.9
Fail
4.0
AA Large
1.3
Fail
1.7
Fail
1.9
Fail
—
2.2
Fail
2.5
Fail
3.1
AA Large
4.0
AA Large
2.2
Fail
—
5.4
AA
6.6
AA
1.3
Fail
2.5
Fail
5.4
AA
—
1.2
Fail
1.7
Fail
3.1
AA Large
6.6
AA
1.2
Fail
—
White BG
2.0Fail
3.6AA Large
7.8AAA
1.5Fail
1.2Fail
Black BG
10.7AAA
5.8AA
2.7Fail
14.4AAA
17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D394
A09F79
4C4C6F
E9E8AA
F6F6BE

Deuteranopia

D8DE96
A6AD78
4C4C6C
ECF0AD
F8F9C2

Tritanopia

F39999
C67574
4A6765
FCB2B4
FECACC

Achromatopsia

BBBBBB
888888
525252
D6D6D6
EAEAEA

Shades & Tints Shades & Tints

#F7A58F

Dark
Light

#CB677F

Dark
Light

#4A4F79

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7a58f;
  --color-2: #cb677f;
  --color-3: #4a4f79;
  --color-4: #ffcc9f;
  --color-5: #ffebb0;
}

SCSS

$color-1: #f7a58f;
$color-2: #cb677f;
$color-3: #4a4f79;
$color-4: #ffcc9f;
$color-5: #ffebb0;

TAILWIND

colors: {
  'brand-1': '#f7a58f',
  'brand-2': '#cb677f',
  'brand-3': '#4a4f79',
  'brand-4': '#ffcc9f',
  'brand-5': '#ffebb0',
}

RGB Array

[247, 165, 143], [203, 103, 127], [74, 79, 121], [255, 204, 159], [255, 235, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F7A58F, #CB677F, #4A4F79, #FFCC9F, #FFEBB0 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #f7a58f; --color-2: #cb677f; --color-3: #4a4f79; --color-4: #ffcc9f; --color-5: #ffebb0. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 warm-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