← Back to Editor

#483932 · #BB2429 · #C94739 · #CF931B · #CDA836

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#483932

Tangerine · DarkSlateGray · Cinnamon

HEX
#483932
RGB
rgb(72, 57, 50)
HSL
hsl(19, 18%, 24%)
HSB
hsb(19, 31%, 28%)
CMYK
cmyk(0%, 21%, 31%, 72%)
Oklch
oklch(35.9% 0.024 46.4)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#BB2429

Vermilion · FireBrick · Passion Red

HEX
#BB2429
RGB
rgb(187, 36, 41)
HSL
hsl(358, 68%, 44%)
HSB
hsb(358, 81%, 73%)
CMYK
cmyk(0%, 81%, 78%, 27%)
Oklch
oklch(51.6% 0.186 25.4)

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

#C94739

Crimson · Sienna · Passion Red

HEX
#C94739
RGB
rgb(201, 71, 57)
HSL
hsl(6, 57%, 51%)
HSB
hsb(6, 72%, 79%)
CMYK
cmyk(0%, 65%, 72%, 21%)
Oklch
oklch(57.6% 0.168 29.3)

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

#CF931B

Ochre · GoldenRod · Honey Gold

HEX
#CF931B
RGB
rgb(207, 147, 27)
HSL
hsl(40, 77%, 46%)
HSB
hsb(40, 87%, 81%)
CMYK
cmyk(0%, 29%, 87%, 19%)
Oklch
oklch(70.4% 0.140 78.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#CDA836

Ginger · GoldenRod · Sunflower

HEX
#CDA836
RGB
rgb(205, 168, 54)
HSL
hsl(45, 60%, 51%)
HSB
hsb(45, 74%, 80%)
CMYK
cmyk(0%, 18%, 74%, 20%)
Oklch
oklch(74.5% 0.134 90.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

483932
324148

Analogous

483236
483932
484432

Triadic

483932
324839
393248

Split-Comp.

483932
324844
323648

Tetradic

483932
364832
324148
443248

Contrast Matrix WCAG 2.1 Contrast

483932
BB2429
C94739
CF931B
CDA836
—
1.8
Fail
2.3
Fail
4.1
AA Large
4.9
AA
1.8
Fail
—
1.3
Fail
2.3
Fail
2.7
Fail
2.3
Fail
1.3
Fail
—
1.8
Fail
2.1
Fail
4.1
AA Large
2.3
Fail
1.8
Fail
—
1.2
Fail
4.9
AA
2.7
Fail
2.1
Fail
1.2
Fail
—
White BG
11.0AAA
6.2AA
4.7AA
2.7Fail
2.3Fail
Black BG
1.9Fail
3.4AA Large
4.4AA Large
7.8AAA
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

424134
7A7828
91903C
B5B438
BDBD52

Deuteranopia

424434
828E28
98A23D
B9BD3F
BFC258

Tritanopia

473535
B32727
C33F40
CC4F54
CB676C

Achromatopsia

3D3D3D
525252
6C6C6C
979797
A6A6A6

Shades & Tints Shades & Tints

#483932

Dark
Light

#BB2429

Dark
Light

#C94739

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #483932;
  --color-2: #bb2429;
  --color-3: #c94739;
  --color-4: #cf931b;
  --color-5: #cda836;
}

SCSS

$color-1: #483932;
$color-2: #bb2429;
$color-3: #c94739;
$color-4: #cf931b;
$color-5: #cda836;

TAILWIND

colors: {
  'brand-1': '#483932',
  'brand-2': '#bb2429',
  'brand-3': '#c94739',
  'brand-4': '#cf931b',
  'brand-5': '#cda836',
}

RGB Array

[72, 57, 50], [187, 36, 41], [201, 71, 57], [207, 147, 27], [205, 168, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #483932, #BB2429, #C94739, #CF931B, #CDA836 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: #483932; --color-2: #bb2429; --color-3: #c94739; --color-4: #cf931b; --color-5: #cda836. 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 general-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