← Back to Editor

#D4CAC1 · #F8B696 · #FD9683 · #63616C · #317685

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D4CAC1

Apricot · LightGray · Peach Orange

HEX
#D4CAC1
RGB
rgb(212, 202, 193)
HSL
hsl(28, 18%, 79%)
HSB
hsb(28, 9%, 83%)
CMYK
cmyk(0%, 5%, 9%, 17%)
Oklch
oklch(84.5% 0.017 64.6)

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

#F8B696

Apricot · BurlyWood · Peach Orange

HEX
#F8B696
RGB
rgb(248, 182, 150)
HSL
hsl(20, 88%, 78%)
HSB
hsb(20, 40%, 97%)
CMYK
cmyk(0%, 27%, 40%, 3%)
Oklch
oklch(83.0% 0.089 46.9)

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

#FD9683

Peach Pink · LightSalmon · Coral Red

HEX
#FD9683
RGB
rgb(253, 150, 131)
HSL
hsl(9, 97%, 75%)
HSB
hsb(9, 48%, 99%)
CMYK
cmyk(0%, 41%, 48%, 1%)
Oklch
oklch(77.6% 0.128 31.3)

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

#63616C

Ink Gray · DimGray · Charcoal

HEX
#63616C
RGB
rgb(99, 97, 108)
HSL
hsl(251, 5%, 40%)
HSB
hsb(251, 10%, 42%)
CMYK
cmyk(8%, 10%, 0%, 58%)
Oklch
oklch(49.8% 0.017 294.1)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#317685

Slate Blue · Teal · Mint Ice

HEX
#317685
RGB
rgb(49, 118, 133)
HSL
hsl(191, 46%, 36%)
HSB
hsb(191, 63%, 52%)
CMYK
cmyk(63%, 11%, 0%, 48%)
Oklch
oklch(52.8% 0.072 214.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4CAC1
C0CAD3

Analogous

D3C0C0
D4CAC1
D3D2C0

Triadic

D4CAC1
C0D3C9
C9C0D3

Split-Comp.

D4CAC1
C0D3D2
C0C0D3

Tetradic

D4CAC1
C0D3C0
C0CAD3
D2C0D3

Contrast Matrix WCAG 2.1 Contrast

D4CAC1
F8B696
FD9683
63616C
317685
—
1.1
Fail
1.3
Fail
3.8
AA Large
3.2
AA Large
1.1
Fail
—
1.2
Fail
3.5
AA Large
3.0
Fail
1.3
Fail
1.2
Fail
—
2.9
Fail
2.4
Fail
3.8
AA Large
3.5
AA Large
2.9
Fail
—
1.2
Fail
3.2
AA Large
3.0
Fail
2.4
Fail
1.2
Fail
—
White BG
1.6Fail
1.7Fail
2.1Fail
6.1AA
5.2AA
Black BG
13.0AAA
12.1AAA
9.9AAA
3.5AA Large
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0C3
DBDB9E
D0CF88
626269
4F4F81

Deuteranopia

D0D1C4
DFE4A0
D6DE89
626269
4B4681

Tritanopia

D3C5C5
F5A4A5
F88B8C
636767
347F7E

Achromatopsia

CCCCCC
C6C6C6
B3B3B3
636363
636363

Shades & Tints Shades & Tints

#D4CAC1

Dark
Light

#F8B696

Dark
Light

#FD9683

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4cac1;
  --color-2: #f8b696;
  --color-3: #fd9683;
  --color-4: #63616c;
  --color-5: #317685;
}

SCSS

$color-1: #d4cac1;
$color-2: #f8b696;
$color-3: #fd9683;
$color-4: #63616c;
$color-5: #317685;

TAILWIND

colors: {
  'brand-1': '#d4cac1',
  'brand-2': '#f8b696',
  'brand-3': '#fd9683',
  'brand-4': '#63616c',
  'brand-5': '#317685',
}

RGB Array

[212, 202, 193], [248, 182, 150], [253, 150, 131], [99, 97, 108], [49, 118, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #D4CAC1, #F8B696, #FD9683, #63616C, #317685 is ideal for: 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: #d4cac1; --color-2: #f8b696; --color-3: #fd9683; --color-4: #63616c; --color-5: #317685. 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 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