← Back to Editor

#F7420C · #CF4315 · #C86606 · #FFDDCC · #FFB9AF

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F7420C

Vermilion · OrangeRed · Passion Red

HEX
#F7420C
RGB
rgb(247, 66, 12)
HSL
hsl(14, 94%, 51%)
HSB
hsb(14, 95%, 97%)
CMYK
cmyk(0%, 73%, 95%, 3%)
Oklch
oklch(64.4% 0.224 34.6)

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

#CF4315

Tangerine · Chocolate · Amber Brown

HEX
#CF4315
RGB
rgb(207, 67, 21)
HSL
hsl(15, 82%, 45%)
HSB
hsb(15, 90%, 81%)
CMYK
cmyk(0%, 68%, 90%, 19%)
Oklch
oklch(57.8% 0.184 36.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#C86606

Ochre · Chocolate · Amber Brown

HEX
#C86606
RGB
rgb(200, 102, 6)
HSL
hsl(30, 94%, 40%)
HSB
hsb(30, 97%, 78%)
CMYK
cmyk(0%, 49%, 97%, 22%)
Oklch
oklch(61.5% 0.152 54.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#FFDDCC

Apricot · Bisque · Peach Orange

HEX
#FFDDCC
RGB
rgb(255, 221, 204)
HSL
hsl(20, 100%, 90%)
HSB
hsb(20, 20%, 100%)
CMYK
cmyk(0%, 13%, 20%, 0%)
Oklch
oklch(92.1% 0.044 48.2)

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

#FFB9AF

Peach Pink · LightPink · Cherry Blossom

HEX
#FFB9AF
RGB
rgb(255, 185, 175)
HSL
hsl(7, 100%, 84%)
HSB
hsb(7, 31%, 100%)
CMYK
cmyk(0%, 27%, 31%, 0%)
Oklch
oklch(84.8% 0.083 28.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7420C
0DC1F8

Analogous

F80D4B
F7420C
F8B90D

Triadic

F7420C
0DF843
430DF8

Split-Comp.

F7420C
0DF8B9
0D4BF8

Tetradic

F7420C
4BF80D
0DC1F8
B90DF8

Contrast Matrix WCAG 2.1 Contrast

F7420C
CF4315
C86606
FFDDCC
FFB9AF
—
1.3
Fail
1.1
Fail
2.9
Fail
2.2
Fail
1.3
Fail
—
1.2
Fail
3.7
AA Large
2.9
Fail
1.1
Fail
1.2
Fail
—
3.1
AA Large
2.4
Fail
2.9
Fail
3.7
AA Large
3.1
AA Large
—
1.3
Fail
2.2
Fail
2.9
Fail
2.4
Fail
1.3
Fail
—
White BG
3.7AA Large
4.7AA
3.9AA Large
1.3Fail
1.6Fail
Black BG
5.7AA
4.5AA Large
5.4AA
16.5AAA
12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A719
929120
9E9D1D
F0F0D0
E1E0B1

Deuteranopia

B3C11C
9BA523
A3AB23
F2F5D1
E5EAB2

Tritanopia

EE2326
C8292B
C33034
FDD3D4
FCB3B4

Achromatopsia

727272
686868
787878
E5E5E5
CDCDCD

Shades & Tints Shades & Tints

#F7420C

Dark
Light

#CF4315

Dark
Light

#C86606

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7420c;
  --color-2: #cf4315;
  --color-3: #c86606;
  --color-4: #ffddcc;
  --color-5: #ffb9af;
}

SCSS

$color-1: #f7420c;
$color-2: #cf4315;
$color-3: #c86606;
$color-4: #ffddcc;
$color-5: #ffb9af;

TAILWIND

colors: {
  'brand-1': '#f7420c',
  'brand-2': '#cf4315',
  'brand-3': '#c86606',
  'brand-4': '#ffddcc',
  'brand-5': '#ffb9af',
}

RGB Array

[247, 66, 12], [207, 67, 21], [200, 102, 6], [255, 221, 204], [255, 185, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F7420C, #CF4315, #C86606, #FFDDCC, #FFB9AF 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: #f7420c; --color-2: #cf4315; --color-3: #c86606; --color-4: #ffddcc; --color-5: #ffb9af. 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 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