#664E4A + #B86F4C + #AE5B33 + #861912 + #311919 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#664E4A

Crimson · DimGray · Wine Red

HEX

#664E4A

RGB

rgb(102, 78, 74)

HSL

hsl(9, 16%, 35%)

HSB

hsb(9, 27%, 40%)

CMYK

cmyk(0%, 24%, 27%, 60%)

Oklch

oklch(44.8% 0.033 29.3)

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

#B86F4C

Tangerine · Sienna · Warm Sun

HEX

#B86F4C

RGB

rgb(184, 111, 76)

HSL

hsl(19, 43%, 51%)

HSB

hsb(19, 59%, 72%)

CMYK

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

Oklch

oklch(61.4% 0.105 45.8)

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

#AE5B33

Tangerine · Sienna · Amber Brown

HEX

#AE5B33

RGB

rgb(174, 91, 51)

HSL

hsl(20, 55%, 44%)

HSB

hsb(20, 71%, 68%)

CMYK

cmyk(0%, 48%, 71%, 32%)

Oklch

oklch(56.2% 0.121 45.0)

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

#861912

Vermilion · DarkRed · Wine Red

HEX

#861912

RGB

rgb(134, 25, 18)

HSL

hsl(4, 76%, 30%)

HSB

hsb(4, 87%, 53%)

CMYK

cmyk(0%, 81%, 87%, 47%)

Oklch

oklch(40.4% 0.145 29.0)

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

#311919

Crimson · Black · Deep Berry

HEX

#311919

RGB

rgb(49, 25, 25)

HSL

hsl(0, 32%, 15%)

HSB

hsb(0, 49%, 19%)

CMYK

cmyk(0%, 49%, 49%, 81%)

Oklch

oklch(24.7% 0.039 20.2)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

664E4A

4B6368

Analogous

684B55

664E4A

685E4B

Triadic

664E4A

4B684F

4F4B68

Split-Comp.

664E4A

4B685E

4B5568

Tetradic

664E4A

55684B

4B6368

5E4B68

Contrast Matrix WCAG 2.1 Contrast

664E4A	B86F4C	AE5B33	861912	311919
—	2.0 Fail	1.6 Fail	1.3 Fail	2.1 Fail
2.0 Fail	—	1.2 Fail	2.5 Fail	4.2 AA Large
1.6 Fail	1.2 Fail	—	2.0 Fail	3.4 AA Large
1.3 Fail	2.5 Fail	2.0 Fail	—	1.7 Fail
2.1 Fail	4.2 AA Large	3.4 AA Large	1.7 Fail	—

White BG

7.6AAA

3.9AA Large

4.8AA

9.7AAA

16.4AAA

Black BG

2.8Fail

5.4AA

4.3AA Large

2.2Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5B4B

989854

8A893D

575614

272619

Deuteranopia

5D5F4B

9DA257

8F953F

5D6514

282A19

Tritanopia

654C4C

B45B5D

AA4446

811515

301919

Achromatopsia

555555

818181

6F6F6F

393939

202020

Shades & Tints Shades & Tints

#664E4A

Dark

Light

#B86F4C

Dark

Light

#AE5B33

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #664e4a;
  --color-2: #b86f4c;
  --color-3: #ae5b33;
  --color-4: #861912;
  --color-5: #311919;
}

SCSS

$color-1: #664e4a;
$color-2: #b86f4c;
$color-3: #ae5b33;
$color-4: #861912;
$color-5: #311919;

TAILWIND

colors: {
  'brand-1': '#664e4a',
  'brand-2': '#b86f4c',
  'brand-3': '#ae5b33',
  'brand-4': '#861912',
  'brand-5': '#311919',
}

RGB Array

[102, 78, 74], [184, 111, 76], [174, 91, 51], [134, 25, 18], [49, 25, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #664E4A, #B86F4C, #AE5B33, #861912, #311919 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: #664e4a; --color-2: #b86f4c; --color-3: #ae5b33; --color-4: #861912; --color-5: #311919. 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 warm-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