← Back to Editor

#F3D4C0 · #DBD1C9 · #A8AFB7 · #677987 · #303437

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

#F3D4C0

Apricot · Wheat · Peach Orange

HEX
#F3D4C0
RGB
rgb(243, 212, 192)
HSL
hsl(24, 68%, 85%)
HSB
hsb(24, 21%, 95%)
CMYK
cmyk(0%, 13%, 21%, 5%)
Oklch
oklch(89.1% 0.044 54.9)

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

#DBD1C9

Apricot · LightGray · Peach Orange

HEX
#DBD1C9
RGB
rgb(219, 209, 201)
HSL
hsl(27, 20%, 82%)
HSB
hsb(27, 8%, 86%)
CMYK
cmyk(0%, 5%, 8%, 14%)
Oklch
oklch(86.7% 0.016 61.3)

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

#A8AFB7

Azure · DarkGray · Silver Sand

HEX
#A8AFB7
RGB
rgb(168, 175, 183)
HSL
hsl(212, 9%, 69%)
HSB
hsb(212, 8%, 72%)
CMYK
cmyk(8%, 4%, 0%, 28%)
Oklch
oklch(75.1% 0.014 251.6)

Traditional「Azure」· Paint「Silver Sand」· Creative Urban Concrete

#677987

Slate Blue · SlateGray · Navy Blue

HEX
#677987
RGB
rgb(103, 121, 135)
HSL
hsl(206, 13%, 47%)
HSB
hsb(206, 24%, 53%)
CMYK
cmyk(24%, 10%, 0%, 47%)
Oklch
oklch(56.6% 0.030 241.5)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#303437

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#303437
RGB
rgb(48, 52, 55)
HSL
hsl(206, 7%, 20%)
HSB
hsb(206, 13%, 22%)
CMYK
cmyk(13%, 5%, 0%, 78%)
Oklch
oklch(32.2% 0.008 240.1)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3D4C0
BFDEF3

Analogous

F3BFC4
F3D4C0
F3EEBF

Triadic

F3D4C0
BFF3D4
D4BFF3

Split-Comp.

F3D4C0
BFF3EE
BFC4F3

Tetradic

F3D4C0
C4F3BF
BFDEF3
EEBFF3

Contrast Matrix WCAG 2.1 Contrast

F3D4C0
DBD1C9
A8AFB7
677987
303437
—
1.1
Fail
1.6
Fail
3.2
AA Large
9.0
AAA
1.1
Fail
—
1.5
Fail
3.0
Fail
8.4
AAA
1.6
Fail
1.5
Fail
—
2.0
Fail
5.7
AA
3.2
AA Large
3.0
Fail
2.0
Fail
—
2.8
Fail
9.0
AAA
8.4
AAA
5.7
AA
2.8
Fail
—
White BG
1.4Fail
1.5Fail
2.2Fail
4.5AA
12.6AAA
Black BG
15.0AAA
14.0AAA
9.5AAA
4.7AA
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E5C5
D7D7CB
ABABB5
6F6F84
323236

Deuteranopia

E7EAC6
D7D8CB
ABAAB5
6E6C83
323136

Tritanopia

F1C9CA
DACCCD
A8B4B3
688180
303636

Achromatopsia

DBDBDB
D3D3D3
AEAEAE
757575
333333

Shades & Tints Shades & Tints

#F3D4C0

Dark
Light

#DBD1C9

Dark
Light

#A8AFB7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3d4c0;
  --color-2: #dbd1c9;
  --color-3: #a8afb7;
  --color-4: #677987;
  --color-5: #303437;
}

SCSS

$color-1: #f3d4c0;
$color-2: #dbd1c9;
$color-3: #a8afb7;
$color-4: #677987;
$color-5: #303437;

TAILWIND

colors: {
  'brand-1': '#f3d4c0',
  'brand-2': '#dbd1c9',
  'brand-3': '#a8afb7',
  'brand-4': '#677987',
  'brand-5': '#303437',
}

RGB Array

[243, 212, 192], [219, 209, 201], [168, 175, 183], [103, 121, 135], [48, 52, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3D4C0, #DBD1C9, #A8AFB7, #677987, #303437 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f3d4c0; --color-2: #dbd1c9; --color-3: #a8afb7; --color-4: #677987; --color-5: #303437. 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 general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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