← Back to Editor

#B12900 · #C06043 · #C7A286 · #82806D · #38484D

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B12900

Vermilion · FireBrick · Wine Red

HEX
#B12900
RGB
rgb(177, 41, 0)
HSL
hsl(14, 100%, 35%)
HSB
hsb(14, 100%, 69%)
CMYK
cmyk(0%, 77%, 100%, 31%)
Oklch
oklch(49.8% 0.177 34.4)

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

#C06043

Crimson · Sienna · Passion Red

HEX
#C06043
RGB
rgb(192, 96, 67)
HSL
hsl(14, 50%, 51%)
HSB
hsb(14, 65%, 75%)
CMYK
cmyk(0%, 50%, 65%, 25%)
Oklch
oklch(59.8% 0.131 37.6)

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

#C7A286

Apricot · Tan · Warm Sun

HEX
#C7A286
RGB
rgb(199, 162, 134)
HSL
hsl(26, 37%, 65%)
HSB
hsb(26, 33%, 78%)
CMYK
cmyk(0%, 19%, 33%, 22%)
Oklch
oklch(73.9% 0.059 58.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#82806D

Autumn Sage · Gray · Warm Gray

HEX
#82806D
RGB
rgb(130, 128, 109)
HSL
hsl(54, 9%, 47%)
HSB
hsb(54, 16%, 51%)
CMYK
cmyk(0%, 2%, 16%, 49%)
Oklch
oklch(59.6% 0.028 102.3)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

#38484D

Slate Blue · DarkSlateGray · Mint Ice

HEX
#38484D
RGB
rgb(56, 72, 77)
HSL
hsl(194, 16%, 26%)
HSB
hsb(194, 27%, 30%)
CMYK
cmyk(27%, 6%, 0%, 70%)
Oklch
oklch(39.0% 0.022 218.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B12900
0089B3

Analogous

B30030
B12900
B38300

Triadic

B12900
00B32A
2A00B3

Split-Comp.

B12900
00B383
0030B3

Tetradic

B12900
30B300
0089B3
8300B3

Contrast Matrix WCAG 2.1 Contrast

B12900
C06043
C7A286
82806D
38484D
—
1.6
Fail
2.8
Fail
1.6
Fail
1.4
Fail
1.6
Fail
—
1.8
Fail
1.1
Fail
2.3
Fail
2.8
Fail
1.8
Fail
—
1.7
Fail
4.1
AA Large
1.6
Fail
1.1
Fail
1.7
Fail
—
2.4
Fail
1.4
Fail
2.3
Fail
4.1
AA Large
2.4
Fail
—
White BG
6.6AA
4.2AA Large
2.3Fail
4.0AA Large
9.5AAA
Black BG
3.2AA Large
5.0AA
8.9AAA
5.3AA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

76750A
96964A
B7B78D
818172
3F3F4C

Deuteranopia

7E880C
9CA34C
B9BC8E
818173
3E3D4C

Tritanopia

AA1213
BB5051
C59293
827576
394B4B

Achromatopsia

4D4D4D
797979
AAAAAA
7E7E7E
444444

Shades & Tints Shades & Tints

#B12900

Dark
Light

#C06043

Dark
Light

#C7A286

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b12900;
  --color-2: #c06043;
  --color-3: #c7a286;
  --color-4: #82806d;
  --color-5: #38484d;
}

SCSS

$color-1: #b12900;
$color-2: #c06043;
$color-3: #c7a286;
$color-4: #82806d;
$color-5: #38484d;

TAILWIND

colors: {
  'brand-1': '#b12900',
  'brand-2': '#c06043',
  'brand-3': '#c7a286',
  'brand-4': '#82806d',
  'brand-5': '#38484d',
}

RGB Array

[177, 41, 0], [192, 96, 67], [199, 162, 134], [130, 128, 109], [56, 72, 77]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #B12900, #C06043, #C7A286, #82806D, #38484D 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: #b12900; --color-2: #c06043; --color-3: #c7a286; --color-4: #82806d; --color-5: #38484d. 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