← Back to Editor

#583C1B · #7494A4 · #D6BB63 · #D6CB8F

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

#583C1B

Ochre · DarkOliveGreen · Cinnamon

HEX
#583C1B
RGB
rgb(88, 60, 27)
HSL
hsl(32, 53%, 23%)
HSB
hsb(32, 69%, 35%)
CMYK
cmyk(0%, 32%, 69%, 65%)
Oklch
oklch(38.1% 0.062 68.5)

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

#7494A4

Slate Blue · LightSlateGray · Navy Blue

HEX
#7494A4
RGB
rgb(116, 148, 164)
HSL
hsl(200, 21%, 55%)
HSB
hsb(200, 29%, 64%)
CMYK
cmyk(29%, 10%, 0%, 36%)
Oklch
oklch(64.8% 0.043 229.9)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#D6BB63

Ginger · BurlyWood · Sunflower

HEX
#D6BB63
RGB
rgb(214, 187, 99)
HSL
hsl(46, 58%, 61%)
HSB
hsb(46, 54%, 84%)
CMYK
cmyk(0%, 13%, 54%, 16%)
Oklch
oklch(79.7% 0.112 92.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#D6CB8F

Fresh Green · BurlyWood · Sunflower

HEX
#D6CB8F
RGB
rgb(214, 203, 143)
HSL
hsl(51, 46%, 70%)
HSB
hsb(51, 33%, 84%)
CMYK
cmyk(0%, 5%, 33%, 16%)
Oklch
oklch(83.7% 0.079 99.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

583C1B
1C395A

Analogous

5A1E1C
583C1B
585A1C

Triadic

583C1B
1C5A3D
3D1C5A

Split-Comp.

583C1B
1C585A
1E1C5A

Tetradic

583C1B
1C5A1E
1C395A
5A1C58

Contrast Matrix WCAG 2.1 Contrast

583C1B
7494A4
D6BB63
D6CB8F
—
3.1
AA Large
5.4
AA
6.2
AA
3.1
AA Large
—
1.7
Fail
2.0
Fail
5.4
AA
1.7
Fail
—
1.1
Fail
6.2
AA
2.0
Fail
1.1
Fail
—
White BG
10.1AAA
3.2AA Large
1.9Fail
1.6Fail
Black BG
2.1Fail
6.5AA
11.1AAA
12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4C23
8282A0
CACA78
D1D19E

Deuteranopia

4E5025
807E9F
CCCE7D
D2D3A1

Tritanopia

57292B
769D9C
D5898D
D5A9AC

Achromatopsia

414141
8C8C8C
B9B9B9
C7C7C7

Shades & Tints Shades & Tints

#583C1B

Dark
Light

#7494A4

Dark
Light

#D6BB63

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #583c1b;
  --color-2: #7494a4;
  --color-3: #d6bb63;
  --color-4: #d6cb8f;
}

SCSS

$color-1: #583c1b;
$color-2: #7494a4;
$color-3: #d6bb63;
$color-4: #d6cb8f;

TAILWIND

colors: {
  'brand-1': '#583c1b',
  'brand-2': '#7494a4',
  'brand-3': '#d6bb63',
  'brand-4': '#d6cb8f',
}

RGB Array

[88, 60, 27], [116, 148, 164], [214, 187, 99], [214, 203, 143]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #583C1B, #7494A4, #D6BB63, #D6CB8F is ideal for: 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: #583c1b; --color-2: #7494a4; --color-3: #d6bb63; --color-4: #d6cb8f. 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 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