← Back to Editor

#FCFAF7 · #D1D1D1 · #FF8A0D · #FF0D45 · #80664B

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#FCFAF7

Goose Yellow · Snow · Peach Orange

HEX
#FCFAF7
RGB
rgb(252, 250, 247)
HSL
hsl(36, 45%, 98%)
HSB
hsb(36, 2%, 99%)
CMYK
cmyk(0%, 1%, 2%, 1%)
Oklch
oklch(98.6% 0.005 78.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#D1D1D1

Silver Gray · LightGray · Pearl Gray

HEX
#D1D1D1
RGB
rgb(209, 209, 209)
HSL
hsl(0, 0%, 82%)
HSB
hsb(0, 0%, 82%)
CMYK
cmyk(0%, 0%, 0%, 18%)
Oklch
oklch(86.1% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#FF8A0D

Ginger · Orange · Warm Sun

HEX
#FF8A0D
RGB
rgb(255, 138, 13)
HSL
hsl(31, 100%, 53%)
HSB
hsb(31, 95%, 100%)
CMYK
cmyk(0%, 46%, 95%, 0%)
Oklch
oklch(74.8% 0.179 56.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#FF0D45

Vermilion · Crimson · Passion Red

HEX
#FF0D45
RGB
rgb(255, 13, 69)
HSL
hsl(346, 100%, 53%)
HSB
hsb(346, 95%, 100%)
CMYK
cmyk(0%, 95%, 73%, 0%)
Oklch
oklch(63.5% 0.252 20.0)

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

#80664B

Ochre · DimGray · Amber Brown

HEX
#80664B
RGB
rgb(128, 102, 75)
HSL
hsl(31, 26%, 40%)
HSB
hsb(31, 41%, 50%)
CMYK
cmyk(0%, 20%, 41%, 50%)
Oklch
oklch(52.9% 0.052 67.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCFAF7
F8F9FC

Analogous

FCF8F8
FCFAF7
FCFCF8

Triadic

FCFAF7
F8FCFA
FAF8FC

Split-Comp.

FCFAF7
F8FCFC
F8F8FC

Tetradic

FCFAF7
F8FCF8
F8F9FC
FCF8FC

Contrast Matrix WCAG 2.1 Contrast

FCFAF7
D1D1D1
FF8A0D
FF0D45
80664B
—
1.5
Fail
2.3
Fail
3.7
AA Large
5.1
AA
1.5
Fail
—
1.5
Fail
2.5
Fail
3.5
AA Large
2.3
Fail
1.5
Fail
—
1.6
Fail
2.3
Fail
3.7
AA Large
2.5
Fail
1.6
Fail
—
1.4
Fail
5.1
AA
3.5
AA Large
2.3
Fail
1.4
Fail
—
White BG
1.0Fail
1.5Fail
2.4Fail
3.9AA Large
5.4AA
Black BG
20.2AAA
13.8AAA
8.9AAA
5.4AA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBF8
D1D1D1
CCCB2B
969437
757552

Deuteranopia

FBFBF8
D1D1D1
D3DC33
A4B634
767853

Tritanopia

FCF8F8
D1D1D1
F94348
F32D2A
7F5758

Achromatopsia

FAFAFA
D1D1D1
9F9F9F
5C5C5C
6B6B6B

Shades & Tints Shades & Tints

#FCFAF7

Dark
Light

#D1D1D1

Dark
Light

#FF8A0D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcfaf7;
  --color-2: #d1d1d1;
  --color-3: #ff8a0d;
  --color-4: #ff0d45;
  --color-5: #80664b;
}

SCSS

$color-1: #fcfaf7;
$color-2: #d1d1d1;
$color-3: #ff8a0d;
$color-4: #ff0d45;
$color-5: #80664b;

TAILWIND

colors: {
  'brand-1': '#fcfaf7',
  'brand-2': '#d1d1d1',
  'brand-3': '#ff8a0d',
  'brand-4': '#ff0d45',
  'brand-5': '#80664b',
}

RGB Array

[252, 250, 247], [209, 209, 209], [255, 138, 13], [255, 13, 69], [128, 102, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FCFAF7, #D1D1D1, #FF8A0D, #FF0D45, #80664B is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fcfaf7; --color-2: #d1d1d1; --color-3: #ff8a0d; --color-4: #ff0d45; --color-5: #80664b. 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 tech, SaaS, healthcare, eco industries. 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