← Back to Editor

#202F34 · #3F3436 · #706961 · #DDD8A5 · #F9D9A8

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

#202F34

Slate Blue · DarkSlateGray · Peacock Green

HEX
#202F34
RGB
rgb(32, 47, 52)
HSL
hsl(195, 24%, 16%)
HSB
hsb(195, 38%, 20%)
CMYK
cmyk(38%, 10%, 0%, 80%)
Oklch
oklch(29.4% 0.022 220.5)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#3F3436

Crimson · DarkSlateGray · Wine Red

HEX
#3F3436
RGB
rgb(63, 52, 54)
HSL
hsl(349, 10%, 23%)
HSB
hsb(349, 17%, 25%)
CMYK
cmyk(0%, 17%, 14%, 75%)
Oklch
oklch(33.8% 0.016 5.7)

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

#706961

Ink Gray · DimGray · Warm Gray

HEX
#706961
RGB
rgb(112, 105, 97)
HSL
hsl(32, 7%, 41%)
HSB
hsb(32, 13%, 44%)
CMYK
cmyk(0%, 6%, 13%, 56%)
Oklch
oklch(52.5% 0.015 71.2)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#DDD8A5

Fresh Green · Wheat · Lemon Cream

HEX
#DDD8A5
RGB
rgb(221, 216, 165)
HSL
hsl(55, 45%, 76%)
HSB
hsb(55, 25%, 87%)
CMYK
cmyk(0%, 2%, 25%, 13%)
Oklch
oklch(87.4% 0.067 103.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F9D9A8

Goose Yellow · Wheat · Peach Orange

HEX
#F9D9A8
RGB
rgb(249, 217, 168)
HSL
hsl(36, 87%, 82%)
HSB
hsb(36, 33%, 98%)
CMYK
cmyk(0%, 13%, 33%, 2%)
Oklch
oklch(90.0% 0.073 78.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

202F34
33241F

Analogous

1F332E
202F34
1F2433

Triadic

202F34
331F2E
2E331F

Split-Comp.

202F34
331F24
332E1F

Tetradic

202F34
2E1F33
33241F
24331F

Contrast Matrix WCAG 2.1 Contrast

202F34
3F3436
706961
DDD8A5
F9D9A8
—
1.2
Fail
2.6
Fail
9.5
AAA
10.2
AAA
1.2
Fail
—
2.2
Fail
8.2
AAA
8.8
AAA
2.6
Fail
2.2
Fail
—
3.7
AA Large
4.0
AA Large
9.5
AAA
8.2
AAA
3.7
AA Large
—
1.1
Fail
10.2
AAA
8.8
AAA
4.0
AA Large
1.1
Fail
—
White BG
13.8AAA
12.0AAA
5.4AA
1.5Fail
1.4Fail
Black BG
1.5Fail
1.8Fail
3.9AA Large
14.4AAA
15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

262733
3A3A36
6D6D63
DBDBB1
EBEBB4

Deuteranopia

262533
3B3C35
6D6E63
DBDCB4
EDEFB7

Tritanopia

213232
3E3535
706465
DDBBBD
F7BDBF

Achromatopsia

2B2B2B
383838
6A6A6A
D4D4D4
DDDDDD

Shades & Tints Shades & Tints

#202F34

Dark
Light

#3F3436

Dark
Light

#706961

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #202f34;
  --color-2: #3f3436;
  --color-3: #706961;
  --color-4: #ddd8a5;
  --color-5: #f9d9a8;
}

SCSS

$color-1: #202f34;
$color-2: #3f3436;
$color-3: #706961;
$color-4: #ddd8a5;
$color-5: #f9d9a8;

TAILWIND

colors: {
  'brand-1': '#202f34',
  'brand-2': '#3f3436',
  'brand-3': '#706961',
  'brand-4': '#ddd8a5',
  'brand-5': '#f9d9a8',
}

RGB Array

[32, 47, 52], [63, 52, 54], [112, 105, 97], [221, 216, 165], [249, 217, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #202F34, #3F3436, #706961, #DDD8A5, #F9D9A8 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: #202f34; --color-2: #3f3436; --color-3: #706961; --color-4: #ddd8a5; --color-5: #f9d9a8. 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