← Back to Editor

#4F4B31 · #D4F0FC · #630C19 · #000000

A 4-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

#4F4B31

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#4F4B31
RGB
rgb(79, 75, 49)
HSL
hsl(52, 23%, 25%)
HSB
hsb(52, 38%, 31%)
CMYK
cmyk(0%, 5%, 38%, 69%)
Oklch
oklch(40.9% 0.041 100.5)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#D4F0FC

Sky Blue · Lavender · Glacier Blue

HEX
#D4F0FC
RGB
rgb(212, 240, 252)
HSL
hsl(198, 87%, 91%)
HSB
hsb(198, 16%, 99%)
CMYK
cmyk(16%, 5%, 0%, 1%)
Oklch
oklch(93.8% 0.034 225.4)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#630C19

Vermilion · Maroon · Wine Red

HEX
#630C19
RGB
rgb(99, 12, 25)
HSL
hsl(351, 78%, 22%)
HSB
hsb(351, 88%, 39%)
CMYK
cmyk(0%, 88%, 75%, 61%)
Oklch
oklch(32.5% 0.118 19.9)

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

#000000

Ink Black · Black · Jet Black

HEX
#000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
HSB
hsb(0, 0%, 0%)
CMYK
cmyk(0%, 0%, 0%, 100%)
Oklch
oklch(0.0% 0.000 0.0)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4F4B31
31354E

Analogous

4E3C31
4F4B31
444E31

Triadic

4F4B31
314E4B
4B314E

Split-Comp.

4F4B31
31444E
3C314E

Tetradic

4F4B31
314E3C
31354E
4E3144

Contrast Matrix WCAG 2.1 Contrast

4F4B31
D4F0FC
630C19
000000
—
7.4
AAA
1.5
Fail
2.4
Fail
7.4
AAA
—
11.1
AAA
17.7
AAA
1.5
Fail
11.1
AAA
—
1.6
Fail
2.4
Fail
17.7
AAA
1.6
Fail
—
White BG
8.8AAA
1.2Fail
13.1AAA
21.0AAA
Black BG
2.4Fail
17.7AAA
1.6Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

4D4D37
E0E0F9
3D3D16
000000

Deuteranopia

4E4E39
DFDCF8
424915
000000

Tritanopia

4F3C3D
D5F7F6
5F1313
000000

Achromatopsia

494949
E9E9E9
272727
000000

Shades & Tints Shades & Tints

#4F4B31

Dark
Light

#D4F0FC

Dark
Light

#630C19

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4f4b31;
  --color-2: #d4f0fc;
  --color-3: #630c19;
  --color-4: #000000;
}

SCSS

$color-1: #4f4b31;
$color-2: #d4f0fc;
$color-3: #630c19;
$color-4: #000000;

TAILWIND

colors: {
  'brand-1': '#4f4b31',
  'brand-2': '#d4f0fc',
  'brand-3': '#630c19',
  'brand-4': '#000000',
}

RGB Array

[79, 75, 49], [212, 240, 252], [99, 12, 25], [0, 0, 0]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #4F4B31, #D4F0FC, #630C19, #000000 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #4f4b31; --color-2: #d4f0fc; --color-3: #630c19; --color-4: #000000. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 4-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