← Back to Editor

#3F3734 · #DFBE93 · #F2DDC0 · #C08468 · #615F75

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

#3F3734

Tangerine · DarkSlateGray · Cinnamon

HEX
#3F3734
RGB
rgb(63, 55, 52)
HSL
hsl(16, 10%, 23%)
HSB
hsb(16, 17%, 25%)
CMYK
cmyk(0%, 13%, 17%, 75%)
Oklch
oklch(34.4% 0.013 41.7)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#DFBE93

Goose Yellow · BurlyWood · Warm Sun

HEX
#DFBE93
RGB
rgb(223, 190, 147)
HSL
hsl(34, 54%, 73%)
HSB
hsb(34, 34%, 87%)
CMYK
cmyk(0%, 15%, 34%, 13%)
Oklch
oklch(82.0% 0.068 74.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F2DDC0

Goose Yellow · Wheat · Peach Orange

HEX
#F2DDC0
RGB
rgb(242, 221, 192)
HSL
hsl(35, 66%, 85%)
HSB
hsb(35, 21%, 95%)
CMYK
cmyk(0%, 9%, 21%, 5%)
Oklch
oklch(90.7% 0.045 76.0)

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

#C08468

Tangerine · DarkSalmon · Warm Sun

HEX
#C08468
RGB
rgb(192, 132, 104)
HSL
hsl(19, 41%, 58%)
HSB
hsb(19, 46%, 75%)
CMYK
cmyk(0%, 31%, 46%, 25%)
Oklch
oklch(66.7% 0.084 45.8)

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

#615F75

Deep Indigo · DimGray · Navy Blue

HEX
#615F75
RGB
rgb(97, 95, 117)
HSL
hsl(245, 10%, 42%)
HSB
hsb(245, 19%, 46%)
CMYK
cmyk(17%, 19%, 0%, 54%)
Oklch
oklch(49.6% 0.035 289.2)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3F3734
353D41

Analogous

413538
3F3734
413E35

Triadic

3F3734
354138
383541

Split-Comp.

3F3734
35413E
353841

Tetradic

3F3734
384135
353D41
3E3541

Contrast Matrix WCAG 2.1 Contrast

3F3734
DFBE93
F2DDC0
C08468
615F75
—
6.6
AA
8.8
AAA
3.7
AA Large
1.9
Fail
6.6
AA
—
1.3
Fail
1.8
Fail
3.5
AA Large
8.8
AAA
1.3
Fail
—
2.4
Fail
4.7
AA
3.7
AA Large
1.8
Fail
2.4
Fail
—
2.0
Fail
1.9
Fail
3.5
AA Large
4.7
AA
2.0
Fail
—
White BG
11.6AAA
1.8Fail
1.3Fail
3.1AA Large
6.2AA
Black BG
1.8Fail
11.9AAA
15.9AAA
6.7AA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3B35
D1D09D
E9E9C7
A6A56F
606070

Deuteranopia

3C3D35
D3D5A0
EAECC9
AAAE70
60606E

Tritanopia

3F3535
DDA6A7
F1CDCE
BD7475
616B6B

Achromatopsia

393939
C3C3C3
E0E0E0
939393
626262

Shades & Tints Shades & Tints

#3F3734

Dark
Light

#DFBE93

Dark
Light

#F2DDC0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3f3734;
  --color-2: #dfbe93;
  --color-3: #f2ddc0;
  --color-4: #c08468;
  --color-5: #615f75;
}

SCSS

$color-1: #3f3734;
$color-2: #dfbe93;
$color-3: #f2ddc0;
$color-4: #c08468;
$color-5: #615f75;

TAILWIND

colors: {
  'brand-1': '#3f3734',
  'brand-2': '#dfbe93',
  'brand-3': '#f2ddc0',
  'brand-4': '#c08468',
  'brand-5': '#615f75',
}

RGB Array

[63, 55, 52], [223, 190, 147], [242, 221, 192], [192, 132, 104], [97, 95, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3F3734, #DFBE93, #F2DDC0, #C08468, #615F75 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: #3f3734; --color-2: #dfbe93; --color-3: #f2ddc0; --color-4: #c08468; --color-5: #615f75. 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