#CA4009 + #AA5019 + #8A6029 + #6A5039 + #4A4049 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CA4009

Tangerine · FireBrick · Amber Brown

HEX

#CA4009

RGB

rgb(202, 64, 9)

HSL

hsl(17, 91%, 41%)

HSB

hsb(17, 96%, 79%)

CMYK

cmyk(0%, 68%, 96%, 21%)

Oklch

oklch(56.6% 0.183 37.5)

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

#AA5019

Tangerine · Sienna · Amber Brown

HEX

#AA5019

RGB

rgb(170, 80, 25)

HSL

hsl(23, 74%, 38%)

HSB

hsb(23, 85%, 67%)

CMYK

cmyk(0%, 53%, 85%, 33%)

Oklch

oklch(53.6% 0.134 47.3)

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

#8A6029

Ochre · Sienna · Amber Brown

HEX

#8A6029

RGB

rgb(138, 96, 41)

HSL

hsl(34, 54%, 35%)

HSB

hsb(34, 70%, 54%)

CMYK

cmyk(0%, 30%, 70%, 46%)

Oklch

oklch(52.3% 0.089 70.8)

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

#6A5039

Tangerine · DarkOliveGreen · Amber Brown

HEX

#6A5039

RGB

rgb(106, 80, 57)

HSL

hsl(28, 30%, 32%)

HSB

hsb(28, 46%, 42%)

CMYK

cmyk(0%, 25%, 46%, 58%)

Oklch

oklch(45.3% 0.049 62.6)

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

#4A4049

Dark Cyan · DarkSlateGray · Charcoal

HEX

#4A4049

RGB

rgb(74, 64, 73)

HSL

hsl(306, 7%, 27%)

HSB

hsb(306, 14%, 29%)

CMYK

cmyk(0%, 14%, 1%, 71%)

Oklch

oklch(38.5% 0.020 329.2)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CA4009

0992C8

Analogous

C80933

CA4009

C89E09

Triadic

CA4009

09C83F

3F09C8

Split-Comp.

CA4009

09C89E

0933C8

Tetradic

CA4009

33C809

0992C8

9E09C8

Contrast Matrix WCAG 2.1 Contrast

CA4009	AA5019	8A6029	6A5039	4A4049
—	1.1 Fail	1.1 Fail	1.5 Fail	2.0 Fail
1.1 Fail	—	1.0 Fail	1.4 Fail	1.8 Fail
1.1 Fail	1.0 Fail	—	1.3 Fail	1.8 Fail
1.5 Fail	1.4 Fail	1.3 Fail	—	1.3 Fail
2.0 Fail	1.8 Fail	1.8 Fail	1.3 Fail	—

White BG

4.9AA

5.4AA

5.5AA

7.4AAA

9.9AAA

Black BG

4.2AA Large

3.9AA Large

3.8AA Large

2.8Fail

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8D16

838226

787736

5F5F3F

464647

Deuteranopia

96A11A

888F2A

7A7D3A

606240

464746

Tritanopia

C32123

A63133

884143

694344

4A4545

Achromatopsia

636363

656565

666666

555555

444444

Shades & Tints Shades & Tints

#CA4009

Dark

Light

#AA5019

Dark

Light

#8A6029

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ca4009;
  --color-2: #aa5019;
  --color-3: #8a6029;
  --color-4: #6a5039;
  --color-5: #4a4049;
}

SCSS

$color-1: #ca4009;
$color-2: #aa5019;
$color-3: #8a6029;
$color-4: #6a5039;
$color-5: #4a4049;

TAILWIND

colors: {
  'brand-1': '#ca4009',
  'brand-2': '#aa5019',
  'brand-3': '#8a6029',
  'brand-4': '#6a5039',
  'brand-5': '#4a4049',
}

RGB Array

[202, 64, 9], [170, 80, 25], [138, 96, 41], [106, 80, 57], [74, 64, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CA4009, #AA5019, #8A6029, #6A5039, #4A4049 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: #ca4009; --color-2: #aa5019; --color-3: #8a6029; --color-4: #6a5039; --color-5: #4a4049. 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 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