← Back to Editor

#3C4661 · #644963 · #D8B6AB · #F1D9BF · #FDE9D1

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

#3C4661

Indigo · DarkSlateGray · Prussian Blue

HEX
#3C4661
RGB
rgb(60, 70, 97)
HSL
hsl(224, 24%, 31%)
HSB
hsb(224, 38%, 38%)
CMYK
cmyk(38%, 28%, 0%, 62%)
Oklch
oklch(39.7% 0.048 268.5)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#644963

Rose Purple · DimGray · Eggplant

HEX
#644963
RGB
rgb(100, 73, 99)
HSL
hsl(302, 16%, 34%)
HSB
hsb(302, 27%, 39%)
CMYK
cmyk(0%, 27%, 1%, 61%)
Oklch
oklch(44.4% 0.054 327.7)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#D8B6AB

Apricot · Tan · Peach Orange

HEX
#D8B6AB
RGB
rgb(216, 182, 171)
HSL
hsl(15, 37%, 76%)
HSB
hsb(15, 21%, 85%)
CMYK
cmyk(0%, 16%, 21%, 15%)
Oklch
oklch(80.3% 0.042 38.7)

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

#F1D9BF

Goose Yellow · Wheat · Peach Orange

HEX
#F1D9BF
RGB
rgb(241, 217, 191)
HSL
hsl(31, 64%, 85%)
HSB
hsb(31, 21%, 95%)
CMYK
cmyk(0%, 10%, 21%, 5%)
Oklch
oklch(89.8% 0.044 69.5)

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

#FDE9D1

Goose Yellow · Bisque · Peach Orange

HEX
#FDE9D1
RGB
rgb(253, 233, 209)
HSL
hsl(33, 92%, 91%)
HSB
hsb(33, 17%, 99%)
CMYK
cmyk(0%, 8%, 17%, 1%)
Oklch
oklch(94.4% 0.038 72.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C4661
62583C

Analogous

3C5962
3C4661
453C62

Triadic

3C4661
623C46
46623C

Split-Comp.

3C4661
62453C
59623C

Tetradic

3C4661
623C59
62583C
3C6245

Contrast Matrix WCAG 2.1 Contrast

3C4661
644963
D8B6AB
F1D9BF
FDE9D1
—
1.2
Fail
5.0
AA
6.9
AA
7.9
AAA
1.2
Fail
—
4.2
AA Large
5.8
AA
6.6
AA
5.0
AA
4.2
AA Large
—
1.4
Fail
1.6
Fail
6.9
AA
5.8
AA
1.4
Fail
—
1.2
Fail
7.9
AAA
6.6
AA
1.6
Fail
1.2
Fail
—
White BG
9.4AAA
7.9AAA
1.9Fail
1.4Fail
1.2Fail
Black BG
2.2Fail
2.7Fail
11.2AAA
15.4AAA
17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

40405A
58585D
C9C9AE
E7E6C5
F4F4D7

Deuteranopia

403F59
5A5C5B
CBCEAE
E8EAC7
F6F7D8

Tritanopia

3D5554
635857
D6B0B0
F0CACB
FCDBDC

Achromatopsia

464646
545454
BFBFBF
DDDDDD
ECECEC

Shades & Tints Shades & Tints

#3C4661

Dark
Light

#644963

Dark
Light

#D8B6AB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c4661;
  --color-2: #644963;
  --color-3: #d8b6ab;
  --color-4: #f1d9bf;
  --color-5: #fde9d1;
}

SCSS

$color-1: #3c4661;
$color-2: #644963;
$color-3: #d8b6ab;
$color-4: #f1d9bf;
$color-5: #fde9d1;

TAILWIND

colors: {
  'brand-1': '#3c4661',
  'brand-2': '#644963',
  'brand-3': '#d8b6ab',
  'brand-4': '#f1d9bf',
  'brand-5': '#fde9d1',
}

RGB Array

[60, 70, 97], [100, 73, 99], [216, 182, 171], [241, 217, 191], [253, 233, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C4661, #644963, #D8B6AB, #F1D9BF, #FDE9D1 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: #3c4661; --color-2: #644963; --color-3: #d8b6ab; --color-4: #f1d9bf; --color-5: #fde9d1. 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. 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