← Back to Editor

#4F2937 · #302428 · #4D695F · #CFD192 · #DDE3AF

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

#4F2937

Dark Violet · DarkSlateGray · Raspberry

HEX
#4F2937
RGB
rgb(79, 41, 55)
HSL
hsl(338, 32%, 24%)
HSB
hsb(338, 48%, 31%)
CMYK
cmyk(0%, 48%, 30%, 69%)
Oklch
oklch(33.6% 0.060 357.3)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#302428

Dark Violet · DarkSlateGray · Raspberry

HEX
#302428
RGB
rgb(48, 36, 40)
HSL
hsl(340, 14%, 16%)
HSB
hsb(340, 25%, 19%)
CMYK
cmyk(0%, 25%, 17%, 81%)
Oklch
oklch(27.6% 0.019 356.5)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#4D695F

Mineral Blue · DimGray · Forest Green

HEX
#4D695F
RGB
rgb(77, 105, 95)
HSL
hsl(159, 15%, 36%)
HSB
hsb(159, 27%, 41%)
CMYK
cmyk(27%, 0%, 10%, 59%)
Oklch
oklch(49.5% 0.037 170.8)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#CFD192

Fresh Green · Tan · Sunflower

HEX
#CFD192
RGB
rgb(207, 209, 146)
HSL
hsl(62, 41%, 70%)
HSB
hsb(62, 30%, 82%)
CMYK
cmyk(1%, 0%, 30%, 18%)
Oklch
oklch(84.4% 0.082 109.6)

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

#DDE3AF

Fresh Green · Wheat · Lemon Cream

HEX
#DDE3AF
RGB
rgb(221, 227, 175)
HSL
hsl(67, 48%, 79%)
HSB
hsb(67, 23%, 89%)
CMYK
cmyk(3%, 0%, 23%, 11%)
Oklch
oklch(89.8% 0.068 113.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F2937
2A5142

Analogous

512A4C
4F2937
512F2A

Triadic

4F2937
38512A
2A3851

Split-Comp.

4F2937
2A512F
2A4C51

Tetradic

4F2937
4C512A
2A5142
2F2A51

Contrast Matrix WCAG 2.1 Contrast

4F2937
302428
4D695F
CFD192
DDE3AF
—
1.2
Fail
2.1
Fail
7.7
AAA
9.2
AAA
1.2
Fail
—
2.5
Fail
9.4
AAA
11.1
AAA
2.1
Fail
2.5
Fail
—
3.8
AA Large
4.5
AA Large
7.7
AAA
9.4
AAA
3.8
AA Large
—
1.2
Fail
9.2
AAA
11.1
AAA
4.5
AA Large
1.2
Fail
—
White BG
12.3AAA
14.9AAA
6.0AA
1.6Fail
1.3Fail
Black BG
1.7Fail
1.4Fail
3.5AA Large
13.2AAA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3E34
2B2B27
595961
D0D0A1
E0E0BC

Deuteranopia

414433
2C2C27
585562
D0D0A5
DFDFBF

Tritanopia

4D3130
2F2626
4E6364
CFADB0
DDC6C8

Achromatopsia

363636
282828
5F5F5F
C9C9C9
DBDBDB

Shades & Tints Shades & Tints

#4F2937

Dark
Light

#302428

Dark
Light

#4D695F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f2937;
  --color-2: #302428;
  --color-3: #4d695f;
  --color-4: #cfd192;
  --color-5: #dde3af;
}

SCSS

$color-1: #4f2937;
$color-2: #302428;
$color-3: #4d695f;
$color-4: #cfd192;
$color-5: #dde3af;

TAILWIND

colors: {
  'brand-1': '#4f2937',
  'brand-2': '#302428',
  'brand-3': '#4d695f',
  'brand-4': '#cfd192',
  'brand-5': '#dde3af',
}

RGB Array

[79, 41, 55], [48, 36, 40], [77, 105, 95], [207, 209, 146], [221, 227, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4F2937, #302428, #4D695F, #CFD192, #DDE3AF 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: #4f2937; --color-2: #302428; --color-3: #4d695f; --color-4: #cfd192; --color-5: #dde3af. 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