#DB9F56 + #B27050 + #AA4A45 + #5B494B + #3B505D · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#DB9F56

Ginger · SandyBrown · Warm Sun

HEX

#DB9F56

RGB

rgb(219, 159, 86)

HSL

hsl(33, 65%, 60%)

HSB

hsb(33, 61%, 86%)

CMYK

cmyk(0%, 27%, 61%, 14%)

Oklch

oklch(74.5% 0.115 69.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#B27050

Tangerine · Sienna · Warm Sun

HEX

#B27050

RGB

rgb(178, 112, 80)

HSL

hsl(20, 39%, 51%)

HSB

hsb(20, 55%, 70%)

CMYK

cmyk(0%, 37%, 55%, 30%)

Oklch

oklch(60.9% 0.096 46.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#AA4A45

Crimson · Sienna · Passion Red

HEX

#AA4A45

RGB

rgb(170, 74, 69)

HSL

hsl(3, 42%, 47%)

HSB

hsb(3, 59%, 67%)

CMYK

cmyk(0%, 56%, 59%, 33%)

Oklch

oklch(53.3% 0.128 25.3)

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

#5B494B

Crimson · DarkOliveGreen · Wine Red

HEX

#5B494B

RGB

rgb(91, 73, 75)

HSL

hsl(353, 11%, 32%)

HSB

hsb(353, 20%, 36%)

CMYK

cmyk(0%, 20%, 18%, 64%)

Oklch

oklch(42.5% 0.025 10.7)

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

#3B505D

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#3B505D

RGB

rgb(59, 80, 93)

HSL

hsl(203, 22%, 30%)

HSB

hsb(203, 37%, 36%)

CMYK

cmyk(37%, 14%, 0%, 64%)

Oklch

oklch(41.9% 0.034 235.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DB9F56

5792DB

Analogous

DB5D57

DB9F56

D5DB57

Triadic

DB9F56

57DBA0

A057DB

Split-Comp.

DB9F56

57D5DB

5D57DB

Tetradic

DB9F56

57DB5D

5792DB

DB57D5

Contrast Matrix WCAG 2.1 Contrast

DB9F56	B27050	AA4A45	5B494B	3B505D
—	1.7 Fail	2.4 Fail	3.6 AA Large	3.7 AA Large
1.7 Fail	—	1.4 Fail	2.1 Fail	2.1 Fail
2.4 Fail	1.4 Fail	—	1.5 Fail	1.5 Fail
3.6 AA Large	2.1 Fail	1.5 Fail	—	1.0 Fail
3.7 AA Large	2.1 Fail	1.5 Fail	1.0 Fail	—

White BG

2.3Fail

3.9AA Large

5.6AA

8.4AAA

Black BG

9.1AAA

5.3AA

3.8AA Large

2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C068

959558

808046

53534B

44445A

Deuteranopia

C5C96C

999E5A

868D47

54564A

434159

Tritanopia

D87679

AF5E5F

A54747

5A4A4A

3C5757

Achromatopsia

A9A9A9

808080

666666

4F4F4F

4B4B4B

Shades & Tints Shades & Tints

#DB9F56

Dark

Light

#B27050

Dark

Light

#AA4A45

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #db9f56;
  --color-2: #b27050;
  --color-3: #aa4a45;
  --color-4: #5b494b;
  --color-5: #3b505d;
}

SCSS

$color-1: #db9f56;
$color-2: #b27050;
$color-3: #aa4a45;
$color-4: #5b494b;
$color-5: #3b505d;

TAILWIND

colors: {
  'brand-1': '#db9f56',
  'brand-2': '#b27050',
  'brand-3': '#aa4a45',
  'brand-4': '#5b494b',
  'brand-5': '#3b505d',
}

RGB Array

[219, 159, 86], [178, 112, 80], [170, 74, 69], [91, 73, 75], [59, 80, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #DB9F56, #B27050, #AA4A45, #5B494B, #3B505D is ideal for: corporate websites, product showcases, portfolios. 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: #db9f56; --color-2: #b27050; --color-3: #aa4a45; --color-4: #5b494b; --color-5: #3b505d. 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. 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 cool-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