#B72B14 + #D13922 + #6C846C + #97AC85 + #DAC296 · 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

#B72B14

Vermilion · FireBrick · Wine Red

HEX

#B72B14

RGB

rgb(183, 43, 20)

HSL

hsl(8, 80%, 40%)

HSB

hsb(8, 89%, 72%)

CMYK

cmyk(0%, 77%, 89%, 28%)

Oklch

oklch(51.2% 0.180 31.9)

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

#D13922

Vermilion · FireBrick · Passion Red

HEX

#D13922

RGB

rgb(209, 57, 34)

HSL

hsl(8, 72%, 48%)

HSB

hsb(8, 84%, 82%)

CMYK

cmyk(0%, 73%, 84%, 18%)

Oklch

oklch(57.2% 0.192 31.6)

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

#6C846C

Celadon · DimGray · Olive Green

HEX

#6C846C

RGB

rgb(108, 132, 108)

HSL

hsl(120, 10%, 47%)

HSB

hsb(120, 18%, 52%)

CMYK

cmyk(18%, 0%, 18%, 48%)

Oklch

oklch(58.7% 0.046 145.0)

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

#97AC85

Celadon · DarkSeaGreen · Olive Green

HEX

#97AC85

RGB

rgb(151, 172, 133)

HSL

hsl(92, 19%, 60%)

HSB

hsb(92, 23%, 67%)

CMYK

cmyk(12%, 0%, 23%, 33%)

Oklch

oklch(71.8% 0.060 130.8)

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

#DAC296

Goose Yellow · BurlyWood · Warm Sun

HEX

#DAC296

RGB

rgb(218, 194, 150)

HSL

hsl(39, 48%, 72%)

HSB

hsb(39, 31%, 85%)

CMYK

cmyk(0%, 11%, 31%, 15%)

Oklch

oklch(82.4% 0.064 82.5)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B72B14

14A2B8

Analogous

B81450

B72B14

B87C14

Triadic

B72B14

14B82A

2A14B8

Split-Comp.

B72B14

14B87C

1450B8

Tetradic

B72B14

50B814

14A2B8

7C14B8

Contrast Matrix WCAG 2.1 Contrast

B72B14	D13922	6C846C	97AC85	DAC296
—	1.3 Fail	1.5 Fail	2.5 Fail	3.6 AA Large
1.3 Fail	—	1.2 Fail	2.0 Fail	2.8 Fail
1.5 Fail	1.2 Fail	—	1.7 Fail	2.4 Fail
2.5 Fail	2.0 Fail	1.7 Fail	—	1.4 Fail
3.6 AA Large	2.8 Fail	2.4 Fail	1.4 Fail	—

White BG

6.2AA

4.9AA

4.1AA Large

2.5Fail

1.7Fail

Black BG

3.4AA Large

4.3AA Large

5.2AA

8.6AAA

12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A791A

8F8E28

767772

A0A08E

D0CFA1

Deuteranopia

838D1B

98A329

757373

9F9D91

D1D3A3

Tritanopia

B01E1F

C92C2D

6D7677

989698

D9A9AB

Achromatopsia

525252

646464

7A7A7A

A1A1A1

C4C4C4

Shades & Tints Shades & Tints

#B72B14

Dark

Light

#D13922

Dark

Light

#6C846C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b72b14;
  --color-2: #d13922;
  --color-3: #6c846c;
  --color-4: #97ac85;
  --color-5: #dac296;
}

SCSS

$color-1: #b72b14;
$color-2: #d13922;
$color-3: #6c846c;
$color-4: #97ac85;
$color-5: #dac296;

TAILWIND

colors: {
  'brand-1': '#b72b14',
  'brand-2': '#d13922',
  'brand-3': '#6c846c',
  'brand-4': '#97ac85',
  'brand-5': '#dac296',
}

RGB Array

[183, 43, 20], [209, 57, 34], [108, 132, 108], [151, 172, 133], [218, 194, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #B72B14, #D13922, #6C846C, #97AC85, #DAC296 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: #b72b14; --color-2: #d13922; --color-3: #6c846c; --color-4: #97ac85; --color-5: #dac296. 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 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