#413333 + #48393C + #744C40 + #98583F + #FF7B2C · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#413333

Crimson · DarkSlateGray · Wine Red

HEX

#413333

RGB

rgb(65, 51, 51)

HSL

hsl(0, 12%, 23%)

HSB

hsb(0, 22%, 25%)

CMYK

cmyk(0%, 22%, 22%, 75%)

Oklch

oklch(33.7% 0.020 18.2)

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

#48393C

Crimson · DarkSlateGray · Wine Red

HEX

#48393C

RGB

rgb(72, 57, 60)

HSL

hsl(348, 12%, 25%)

HSB

hsb(348, 21%, 28%)

CMYK

cmyk(0%, 21%, 17%, 72%)

Oklch

oklch(36.2% 0.022 4.8)

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

#744C40

Crimson · DarkOliveGreen · Wine Red

HEX

#744C40

RGB

rgb(116, 76, 64)

HSL

hsl(14, 29%, 35%)

HSB

hsb(14, 45%, 45%)

CMYK

cmyk(0%, 34%, 45%, 55%)

Oklch

oklch(45.8% 0.058 37.4)

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

#98583F

Tangerine · Sienna · Amber Brown

HEX

#98583F

RGB

rgb(152, 88, 63)

HSL

hsl(17, 41%, 42%)

HSB

hsb(17, 59%, 60%)

CMYK

cmyk(0%, 42%, 59%, 40%)

Oklch

oklch(52.8% 0.093 41.8)

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

#FF7B2C

Tangerine · Tomato · Warm Sun

HEX

#FF7B2C

RGB

rgb(255, 123, 44)

HSL

hsl(22, 100%, 59%)

HSB

hsb(22, 83%, 100%)

CMYK

cmyk(0%, 52%, 83%, 0%)

Oklch

oklch(72.6% 0.182 47.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

413333

344242

Analogous

42343B

413333

423B34

Triadic

413333

344234

343442

Split-Comp.

413333

34423B

343B42

Tetradic

413333

3B4234

344242

3B3442

Contrast Matrix WCAG 2.1 Contrast

413333	48393C	744C40	98583F	FF7B2C
—	1.1 Fail	1.6 Fail	2.2 Fail	4.7 AA
1.1 Fail	—	1.5 Fail	2.0 Fail	4.2 AA Large
1.6 Fail	1.5 Fail	—	1.3 Fail	2.8 Fail
2.2 Fail	2.0 Fail	1.3 Fail	—	2.1 Fail
4.7 AA	4.2 AA Large	2.8 Fail	2.1 Fail	—

White BG

12.0AAA

10.9AAA

7.4AAA

5.5AA

2.6Fail

Black BG

1.7Fail

1.9Fail

2.9Fail

3.8AA Large

8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3B3B33

42413B

636243

7C7C45

C6C53F

Deuteranopia

3C3D33

42443B

656844

808547

CED744

Tritanopia

403333

473B3B

724546

954A4B

F84E52

Achromatopsia

373737

3E3E3E

575757

686868

999999

Shades & Tints Shades & Tints

#413333

Dark

Light

#48393C

Dark

Light

#744C40

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #413333;
  --color-2: #48393c;
  --color-3: #744c40;
  --color-4: #98583f;
  --color-5: #ff7b2c;
}

SCSS

$color-1: #413333;
$color-2: #48393c;
$color-3: #744c40;
$color-4: #98583f;
$color-5: #ff7b2c;

TAILWIND

colors: {
  'brand-1': '#413333',
  'brand-2': '#48393c',
  'brand-3': '#744c40',
  'brand-4': '#98583f',
  'brand-5': '#ff7b2c',
}

RGB Array

[65, 51, 51], [72, 57, 60], [116, 76, 64], [152, 88, 63], [255, 123, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #413333, #48393C, #744C40, #98583F, #FF7B2C 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: #413333; --color-2: #48393c; --color-3: #744c40; --color-4: #98583f; --color-5: #ff7b2c. 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 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