#DAB157 + #536E4D + #514748 + #4D3241 + #561A3E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DAB157

Ginger · SandyBrown · Sunflower

HEX

#DAB157

RGB

rgb(218, 177, 87)

HSL

hsl(41, 64%, 60%)

HSB

hsb(41, 60%, 85%)

CMYK

cmyk(0%, 19%, 60%, 15%)

Oklch

oklch(78.0% 0.118 84.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#536E4D

Celadon · DarkOliveGreen · Forest Green

HEX

#536E4D

RGB

rgb(83, 110, 77)

HSL

hsl(109, 18%, 37%)

HSB

hsb(109, 30%, 43%)

CMYK

cmyk(25%, 0%, 30%, 57%)

Oklch

oklch(50.7% 0.060 140.0)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#514748

Dark Cyan · DarkSlateGray · Charcoal

HEX

#514748

RGB

rgb(81, 71, 72)

HSL

hsl(354, 7%, 30%)

HSB

hsb(354, 12%, 32%)

CMYK

cmyk(0%, 12%, 11%, 68%)

Oklch

oklch(40.8% 0.014 10.8)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#4D3241

Rose Purple · DarkSlateGray · Raspberry

HEX

#4D3241

RGB

rgb(77, 50, 65)

HSL

hsl(327, 21%, 25%)

HSB

hsb(327, 35%, 30%)

CMYK

cmyk(0%, 35%, 16%, 70%)

Oklch

oklch(35.5% 0.045 345.2)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#561A3E

Rose Purple · DarkSlateGray · Raspberry

HEX

#561A3E

RGB

rgb(86, 26, 62)

HSL

hsl(324, 54%, 22%)

HSB

hsb(324, 70%, 34%)

CMYK

cmyk(0%, 70%, 28%, 66%)

Oklch

oklch(32.6% 0.099 347.0)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DAB157

5881DA

Analogous

DA7058

DAB157

C2DA58

Triadic

DAB157

58DAB1

B158DA

Split-Comp.

DAB157

58C2DA

7058DA

Tetradic

DAB157

58DA70

5881DA

DA58C2

Contrast Matrix WCAG 2.1 Contrast

DAB157	536E4D	514748	4D3241	561A3E
—	2.8 Fail	4.4 AA Large	5.6 AA	6.5 AA
2.8 Fail	—	1.6 Fail	2.0 Fail	2.3 Fail
4.4 AA Large	1.6 Fail	—	1.3 Fail	1.5 Fail
5.6 AA	2.0 Fail	1.3 Fail	—	1.1 Fail
6.5 AA	2.3 Fail	1.5 Fail	1.1 Fail	—

White BG

2.0Fail

5.7AA

9.0AAA

11.4AAA

13.0AAA

Black BG

10.4AAA

3.7AA Large

2.3Fail

1.8Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C86D

5F5F55

4D4D48

41413D

3C3B35

Deuteranopia

CBCE72

5D5B57

4D4E48

43453D

404433

Tritanopia

D87E82

545B5D

514848

4C3B3A

532E2D

Achromatopsia

B3B3B3

626262

4A4A4A

3C3C3C

303030

Shades & Tints Shades & Tints

#DAB157

Dark

Light

#536E4D

Dark

Light

#514748

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dab157;
  --color-2: #536e4d;
  --color-3: #514748;
  --color-4: #4d3241;
  --color-5: #561a3e;
}

SCSS

$color-1: #dab157;
$color-2: #536e4d;
$color-3: #514748;
$color-4: #4d3241;
$color-5: #561a3e;

TAILWIND

colors: {
  'brand-1': '#dab157',
  'brand-2': '#536e4d',
  'brand-3': '#514748',
  'brand-4': '#4d3241',
  'brand-5': '#561a3e',
}

RGB Array

[218, 177, 87], [83, 110, 77], [81, 71, 72], [77, 50, 65], [86, 26, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DAB157, #536E4D, #514748, #4D3241, #561A3E is ideal for: tech websites, dark mode UIs, game UIs. 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: #dab157; --color-2: #536e4d; --color-3: #514748; --color-4: #4d3241; --color-5: #561a3e. 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. 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