#CA4F04 + #F9BA0D + #798666 + #43443A + #3E3527 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CA4F04

Tangerine · Chocolate · Amber Brown

HEX

#CA4F04

RGB

rgb(202, 79, 4)

HSL

hsl(23, 96%, 40%)

HSB

hsb(23, 98%, 79%)

CMYK

cmyk(0%, 61%, 98%, 21%)

Oklch

oklch(58.4% 0.171 43.1)

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

#F9BA0D

Ginger · Orange · Sunflower

HEX

#F9BA0D

RGB

rgb(249, 186, 13)

HSL

hsl(44, 95%, 51%)

HSB

hsb(44, 95%, 98%)

CMYK

cmyk(0%, 25%, 95%, 2%)

Oklch

oklch(82.5% 0.168 83.6)

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

#798666

Grass Green · Gray · Olive Green

HEX

#798666

RGB

rgb(121, 134, 102)

HSL

hsl(84, 14%, 46%)

HSB

hsb(84, 24%, 53%)

CMYK

cmyk(10%, 0%, 24%, 47%)

Oklch

oklch(60.0% 0.049 125.8)

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

#43443A

Autumn Sage · DarkSlateGray · Dark Stone

HEX

#43443A

RGB

rgb(67, 68, 58)

HSL

hsl(66, 8%, 25%)

HSB

hsb(66, 15%, 27%)

CMYK

cmyk(1%, 0%, 15%, 73%)

Oklch

oklch(38.2% 0.017 111.8)

Traditional「Autumn Sage」· Paint「Dark Stone」· Creative Midnight Shadow

#3E3527

Ochre · DarkSlateGray · Cinnamon

HEX

#3E3527

RGB

rgb(62, 53, 39)

HSL

hsl(37, 23%, 20%)

HSB

hsb(37, 37%, 24%)

CMYK

cmyk(0%, 15%, 37%, 76%)

Oklch

oklch(33.4% 0.027 78.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CA4F04

047DC8

Analogous

C8041B

CA4F04

C8B104

Triadic

CA4F04

04C84F

4F04C8

Split-Comp.

CA4F04

04C8B1

041BC8

Tetradic

CA4F04

1BC804

047DC8

B104C8

Contrast Matrix WCAG 2.1 Contrast

CA4F04	F9BA0D	798666	43443A	3E3527
—	2.6 Fail	1.2 Fail	2.2 Fail	2.7 Fail
2.6 Fail	—	2.2 Fail	5.7 AA	6.9 AA
1.2 Fail	2.2 Fail	—	2.5 Fail	3.1 AA Large
2.2 Fail	5.7 AA	2.5 Fail	—	1.2 Fail
2.7 Fail	6.9 AA	3.1 AA Large	1.2 Fail	—

White BG

4.5AA

1.7Fail

3.9AA Large

9.9AAA

12.0AAA

Black BG

4.6AA

12.1AAA

5.4AA

2.1Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

959416

DEDD37

7F7F6E

43433C

3A3A2A

Deuteranopia

9CA51B

E1E641

7E7D70

43433D

3B3B2B

Tritanopia

C42428

F6585F

7A7475

433E3F

3E2D2E

Achromatopsia

6B6B6B

B9B9B9

7E7E7E

434343

363636

Shades & Tints Shades & Tints

#CA4F04

Dark

Light

#F9BA0D

Dark

Light

#798666

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ca4f04;
  --color-2: #f9ba0d;
  --color-3: #798666;
  --color-4: #43443a;
  --color-5: #3e3527;
}

SCSS

$color-1: #ca4f04;
$color-2: #f9ba0d;
$color-3: #798666;
$color-4: #43443a;
$color-5: #3e3527;

TAILWIND

colors: {
  'brand-1': '#ca4f04',
  'brand-2': '#f9ba0d',
  'brand-3': '#798666',
  'brand-4': '#43443a',
  'brand-5': '#3e3527',
}

RGB Array

[202, 79, 4], [249, 186, 13], [121, 134, 102], [67, 68, 58], [62, 53, 39]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CA4F04, #F9BA0D, #798666, #43443A, #3E3527 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: #ca4f04; --color-2: #f9ba0d; --color-3: #798666; --color-4: #43443a; --color-5: #3e3527. 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