#D2741D + #A85A29 + #8B5A49 + #676C68 + #4E8389 · 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

#D2741D

Tangerine · Chocolate · Amber Brown

HEX

#D2741D

RGB

rgb(210, 116, 29)

HSL

hsl(29, 76%, 47%)

HSB

hsb(29, 86%, 82%)

CMYK

cmyk(0%, 45%, 86%, 18%)

Oklch

oklch(65.2% 0.149 56.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#A85A29

Tangerine · Sienna · Amber Brown

HEX

#A85A29

RGB

rgb(168, 90, 41)

HSL

hsl(23, 61%, 41%)

HSB

hsb(23, 76%, 66%)

CMYK

cmyk(0%, 46%, 76%, 34%)

Oklch

oklch(55.1% 0.119 49.9)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#8B5A49

Tangerine · Sienna · Amber Brown

HEX

#8B5A49

RGB

rgb(139, 90, 73)

HSL

hsl(15, 31%, 42%)

HSB

hsb(15, 47%, 55%)

CMYK

cmyk(0%, 35%, 47%, 45%)

Oklch

oklch(51.7% 0.070 39.9)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#676C68

Ink Gray · DimGray · Warm Gray

HEX

#676C68

RGB

rgb(103, 108, 104)

HSL

hsl(132, 2%, 41%)

HSB

hsb(132, 5%, 42%)

CMYK

cmyk(5%, 0%, 4%, 58%)

Oklch

oklch(52.6% 0.009 151.8)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#4E8389

Slate Blue · SlateGray · Mint Ice

HEX

#4E8389

RGB

rgb(78, 131, 137)

HSL

hsl(186, 27%, 42%)

HSB

hsb(186, 43%, 54%)

CMYK

cmyk(43%, 4%, 0%, 46%)

Oklch

oklch(57.5% 0.057 205.0)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2741D

1D7BD3

Analogous

D31D20

D2741D

D3D01D

Triadic

D2741D

1DD375

751DD3

Split-Comp.

D2741D

1DD3D0

1D20D3

Tetradic

D2741D

20D31D

1D7BD3

D01DD3

Contrast Matrix WCAG 2.1 Contrast

D2741D	A85A29	8B5A49	676C68	4E8389
—	1.5 Fail	1.7 Fail	1.6 Fail	1.3 Fail
1.5 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.7 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.6 Fail	1.1 Fail	1.1 Fail	—	1.3 Fail
1.3 Fail	1.2 Fail	1.3 Fail	1.3 Fail	—

White BG

3.4AA Large

5.0AA

5.7AA

5.4AA

4.3AA Large

Black BG

6.3AA

4.2AA Large

3.7AA Large

3.9AA Large

4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A832

868635

76754D

696969

656588

Deuteranopia

AFB637

8B9138

797C4E

696969

625E87

Tritanopia

CD4346

A43E40

895051

676A6A

518686

Achromatopsia

868686

6C6C6C

676767

6A6A6A

747474

Shades & Tints Shades & Tints

#D2741D

Dark

Light

#A85A29

Dark

Light

#8B5A49

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2741d;
  --color-2: #a85a29;
  --color-3: #8b5a49;
  --color-4: #676c68;
  --color-5: #4e8389;
}

SCSS

$color-1: #d2741d;
$color-2: #a85a29;
$color-3: #8b5a49;
$color-4: #676c68;
$color-5: #4e8389;

TAILWIND

colors: {
  'brand-1': '#d2741d',
  'brand-2': '#a85a29',
  'brand-3': '#8b5a49',
  'brand-4': '#676c68',
  'brand-5': '#4e8389',
}

RGB Array

[210, 116, 29], [168, 90, 41], [139, 90, 73], [103, 108, 104], [78, 131, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #D2741D, #A85A29, #8B5A49, #676C68, #4E8389 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: #d2741d; --color-2: #a85a29; --color-3: #8b5a49; --color-4: #676c68; --color-5: #4e8389. 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