← Back to Editor

#43281F · #996349 · #AB9E36 · #D9B334 · #F2D12E

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

#43281F

Tangerine · DarkSlateGray · Cinnamon

HEX
#43281F
RGB
rgb(67, 40, 31)
HSL
hsl(15, 37%, 19%)
HSB
hsb(15, 54%, 26%)
CMYK
cmyk(0%, 40%, 54%, 74%)
Oklch
oklch(30.8% 0.044 39.2)

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

#996349

Tangerine · Sienna · Amber Brown

HEX
#996349
RGB
rgb(153, 99, 73)
HSL
hsl(20, 35%, 44%)
HSB
hsb(20, 52%, 60%)
CMYK
cmyk(0%, 35%, 52%, 40%)
Oklch
oklch(55.2% 0.080 46.3)

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

#AB9E36

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#AB9E36
RGB
rgb(171, 158, 54)
HSL
hsl(53, 52%, 44%)
HSB
hsb(53, 68%, 67%)
CMYK
cmyk(0%, 8%, 68%, 33%)
Oklch
oklch(69.1% 0.123 102.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#D9B334

Ginger · GoldenRod · Sunflower

HEX
#D9B334
RGB
rgb(217, 179, 52)
HSL
hsl(46, 68%, 53%)
HSB
hsb(46, 76%, 85%)
CMYK
cmyk(0%, 18%, 76%, 15%)
Oklch
oklch(77.9% 0.144 91.3)

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

#F2D12E

Autumn Sage · Gold · Sunflower

HEX
#F2D12E
RGB
rgb(242, 209, 46)
HSL
hsl(50, 88%, 56%)
HSB
hsb(50, 81%, 95%)
CMYK
cmyk(0%, 14%, 81%, 5%)
Oklch
oklch(86.4% 0.167 96.6)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

43281F
1F3942

Analogous

421F27
43281F
42391F

Triadic

43281F
1F4227
271F42

Split-Comp.

43281F
1F4239
1F2742

Tetradic

43281F
27421F
1F3942
391F42

Contrast Matrix WCAG 2.1 Contrast

43281F
996349
AB9E36
D9B334
F2D12E
—
2.7
Fail
4.9
AA
6.7
AA
8.9
AAA
2.7
Fail
—
1.8
Fail
2.5
Fail
3.3
AA Large
4.9
AA
1.8
Fail
—
1.4
Fail
1.8
Fail
6.7
AA
2.5
Fail
1.4
Fail
—
1.3
Fail
8.9
AAA
3.3
AA Large
1.8
Fail
1.3
Fail
—
White BG
13.4AAA
5.0AA
2.7Fail
2.0Fail
1.5Fail
Black BG
1.6Fail
4.2AA Large
7.7AAA
10.4AAA
13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

373721
82814F
A5A54F
C9C853
E4E355

Deuteranopia

393B22
858951
A6A755
CBCE5A
E6E85F

Tritanopia

422323
965455
AA6367
D76B70
F0757B

Achromatopsia

2F2F2F
707070
969696
B0B0B0
C8C8C8

Shades & Tints Shades & Tints

#43281F

Dark
Light

#996349

Dark
Light

#AB9E36

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #43281f;
  --color-2: #996349;
  --color-3: #ab9e36;
  --color-4: #d9b334;
  --color-5: #f2d12e;
}

SCSS

$color-1: #43281f;
$color-2: #996349;
$color-3: #ab9e36;
$color-4: #d9b334;
$color-5: #f2d12e;

TAILWIND

colors: {
  'brand-1': '#43281f',
  'brand-2': '#996349',
  'brand-3': '#ab9e36',
  'brand-4': '#d9b334',
  'brand-5': '#f2d12e',
}

RGB Array

[67, 40, 31], [153, 99, 73], [171, 158, 54], [217, 179, 52], [242, 209, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #43281F, #996349, #AB9E36, #D9B334, #F2D12E 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: #43281f; --color-2: #996349; --color-3: #ab9e36; --color-4: #d9b334; --color-5: #f2d12e. 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