#F4C304 + #C58120 + #864F31 + #432855 + #894693 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F4C304

Ochre · Gold · Honey Gold

HEX

#F4C304

RGB

rgb(244, 195, 4)

HSL

hsl(48, 97%, 49%)

HSB

hsb(48, 98%, 96%)

CMYK

cmyk(0%, 20%, 98%, 4%)

Oklch

oklch(83.7% 0.170 90.3)

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

#C58120

Ochre · DarkGoldenRod · Amber Brown

HEX

#C58120

RGB

rgb(197, 129, 32)

HSL

hsl(35, 72%, 45%)

HSB

hsb(35, 84%, 77%)

CMYK

cmyk(0%, 35%, 84%, 23%)

Oklch

oklch(65.9% 0.133 69.6)

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

#864F31

Tangerine · Sienna · Amber Brown

HEX

#864F31

RGB

rgb(134, 79, 49)

HSL

hsl(21, 46%, 36%)

HSB

hsb(21, 63%, 53%)

CMYK

cmyk(0%, 41%, 63%, 47%)

Oklch

oklch(48.5% 0.086 48.4)

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

#432855

Dark Plum · DarkSlateGray · Eggplant

HEX

#432855

RGB

rgb(67, 40, 85)

HSL

hsl(276, 36%, 25%)

HSB

hsb(276, 53%, 33%)

CMYK

cmyk(21%, 53%, 0%, 67%)

Oklch

oklch(33.2% 0.082 310.3)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#894693

Dark Plum · Gray · Violet

HEX

#894693

RGB

rgb(137, 70, 147)

HSL

hsl(292, 35%, 43%)

HSB

hsb(292, 52%, 58%)

CMYK

cmyk(7%, 52%, 0%, 42%)

Oklch

oklch(50.7% 0.138 322.3)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4C304

0434F6

Analogous

F64C04

F4C304

ADF604

Triadic

F4C304

04F6C6

C604F6

Split-Comp.

F4C304

04ADF6

4C04F6

Tetradic

F4C304

04F64C

0434F6

F604AD

Contrast Matrix WCAG 2.1 Contrast

F4C304	C58120	864F31	432855	894693
—	1.9 Fail	4.0 AA Large	7.6 AAA	3.8 AA Large
1.9 Fail	—	2.1 Fail	3.9 AA Large	1.9 Fail
4.0 AA Large	2.1 Fail	—	1.9 Fail	1.1 Fail
7.6 AAA	3.9 AA Large	1.9 Fail	—	2.0 Fail
3.8 AA Large	1.9 Fail	1.1 Fail	2.0 Fail	—

White BG

1.7Fail

3.2AA Large

6.6AA

12.5AAA

6.2AA

Black BG

12.7AAA

6.5AA

3.2AA Large

1.7Fail

3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDE32

A8A737

6E6E38

37374A

6C6B80

Deuteranopia

E2E53D

ACB13D

71763A

393B48

70757C

Tritanopia

F2575F

C24A4E

833E3F

424240

86726E

Achromatopsia

BCBCBC

8A8A8A

5C5C5C

353535

636363

Shades & Tints Shades & Tints

#F4C304

Dark

Light

#C58120

Dark

Light

#864F31

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4c304;
  --color-2: #c58120;
  --color-3: #864f31;
  --color-4: #432855;
  --color-5: #894693;
}

SCSS

$color-1: #f4c304;
$color-2: #c58120;
$color-3: #864f31;
$color-4: #432855;
$color-5: #894693;

TAILWIND

colors: {
  'brand-1': '#f4c304',
  'brand-2': '#c58120',
  'brand-3': '#864f31',
  'brand-4': '#432855',
  'brand-5': '#894693',
}

RGB Array

[244, 195, 4], [197, 129, 32], [134, 79, 49], [67, 40, 85], [137, 70, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4C304, #C58120, #864F31, #432855, #894693 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: #f4c304; --color-2: #c58120; --color-3: #864f31; --color-4: #432855; --color-5: #894693. 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