← Back to Editor

#D4D7DC · #F7FBFA · #7C3A3E · #F4754A · #FF9F64

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#D4D7DC

Azure · LightGray · Sky Blue

HEX
#D4D7DC
RGB
rgb(212, 215, 220)
HSL
hsl(218, 10%, 85%)
HSB
hsb(218, 4%, 86%)
CMYK
cmyk(4%, 2%, 0%, 14%)
Oklch
oklch(87.8% 0.008 260.7)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#F7FBFA

Jade · Snow · Glacier Blue

HEX
#F7FBFA
RGB
rgb(247, 251, 250)
HSL
hsl(165, 33%, 98%)
HSB
hsb(165, 2%, 98%)
CMYK
cmyk(2%, 0%, 0%, 2%)
Oklch
oklch(98.5% 0.004 179.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#7C3A3E

Crimson · Sienna · Wine Red

HEX
#7C3A3E
RGB
rgb(124, 58, 62)
HSL
hsl(356, 36%, 36%)
HSB
hsb(356, 53%, 49%)
CMYK
cmyk(0%, 53%, 50%, 51%)
Oklch
oklch(43.6% 0.092 17.9)

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

#F4754A

Apricot · Coral · Warm Sun

HEX
#F4754A
RGB
rgb(244, 117, 74)
HSL
hsl(15, 89%, 62%)
HSB
hsb(15, 70%, 96%)
CMYK
cmyk(0%, 52%, 70%, 4%)
Oklch
oklch(70.4% 0.167 39.0)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#FF9F64

Apricot · SandyBrown · Warm Sun

HEX
#FF9F64
RGB
rgb(255, 159, 100)
HSL
hsl(23, 100%, 70%)
HSB
hsb(23, 61%, 100%)
CMYK
cmyk(0%, 38%, 61%, 0%)
Oklch
oklch(78.9% 0.137 51.2)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4D7DC
DDDAD5

Analogous

D5DCDD
D4D7DC
D6D5DD

Triadic

D4D7DC
DDD5D8
D8DDD5

Split-Comp.

D4D7DC
DDD6D5
DCDDD5

Tetradic

D4D7DC
DDD5DC
DDDAD5
D5DDD6

Contrast Matrix WCAG 2.1 Contrast

D4D7DC
F7FBFA
7C3A3E
F4754A
FF9F64
—
1.4
Fail
5.7
AA
1.9
Fail
1.4
Fail
1.4
Fail
—
8.0
AAA
2.7
Fail
1.9
Fail
5.7
AA
8.0
AAA
—
3.0
Fail
4.1
AA Large
1.9
Fail
2.7
Fail
3.0
Fail
—
1.4
Fail
1.4
Fail
1.9
Fail
4.1
AA Large
1.4
Fail
—
White BG
1.4Fail
1.0Fail
8.3AAA
2.8Fail
2.0Fail
Black BG
14.6AAA
20.1AAA
2.5Fail
7.5AAA
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5DB
F9F9FA
5F5F3D
BDBC54
D5D572

Deuteranopia

D5D5DB
F9F8FA
63683D
C4CE57
DBE276

Tritanopia

D4DADA
F7FAFA
793C3C
EE5D5E
FA7E80

Achromatopsia

D7D7D7
FAFAFA
4E4E4E
969696
B5B5B5

Shades & Tints Shades & Tints

#D4D7DC

Dark
Light

#F7FBFA

Dark
Light

#7C3A3E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4d7dc;
  --color-2: #f7fbfa;
  --color-3: #7c3a3e;
  --color-4: #f4754a;
  --color-5: #ff9f64;
}

SCSS

$color-1: #d4d7dc;
$color-2: #f7fbfa;
$color-3: #7c3a3e;
$color-4: #f4754a;
$color-5: #ff9f64;

TAILWIND

colors: {
  'brand-1': '#d4d7dc',
  'brand-2': '#f7fbfa',
  'brand-3': '#7c3a3e',
  'brand-4': '#f4754a',
  'brand-5': '#ff9f64',
}

RGB Array

[212, 215, 220], [247, 251, 250], [124, 58, 62], [244, 117, 74], [255, 159, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4D7DC, #F7FBFA, #7C3A3E, #F4754A, #FF9F64 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: #d4d7dc; --color-2: #f7fbfa; --color-3: #7c3a3e; --color-4: #f4754a; --color-5: #ff9f64. 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 general-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