← Back to Editor

#F2A60B · #B89245 · #736445 · #4A4439 · #2B2821

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

#F2A60B

Ochre · Orange · Honey Gold

HEX
#F2A60B
RGB
rgb(242, 166, 11)
HSL
hsl(40, 91%, 50%)
HSB
hsb(40, 95%, 95%)
CMYK
cmyk(0%, 31%, 95%, 5%)
Oklch
oklch(78.0% 0.162 75.6)

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

#B89245

Ochre · GoldenRod · Honey Gold

HEX
#B89245
RGB
rgb(184, 146, 69)
HSL
hsl(40, 45%, 50%)
HSB
hsb(40, 63%, 72%)
CMYK
cmyk(0%, 21%, 63%, 28%)
Oklch
oklch(68.0% 0.106 82.9)

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

#736445

Ochre · DimGray · Honey Gold

HEX
#736445
RGB
rgb(115, 100, 69)
HSL
hsl(40, 25%, 36%)
HSB
hsb(40, 40%, 45%)
CMYK
cmyk(0%, 13%, 40%, 55%)
Oklch
oklch(50.9% 0.049 84.9)

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

#4A4439

Ochre · DarkSlateGray · Amber Brown

HEX
#4A4439
RGB
rgb(74, 68, 57)
HSL
hsl(39, 13%, 26%)
HSB
hsb(39, 23%, 29%)
CMYK
cmyk(0%, 8%, 23%, 71%)
Oklch
oklch(38.9% 0.020 82.7)

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

#2B2821

Ochre · DarkSlateGray · Amber Gold

HEX
#2B2821
RGB
rgb(43, 40, 33)
HSL
hsl(42, 13%, 15%)
HSB
hsb(42, 23%, 17%)
CMYK
cmyk(0%, 7%, 23%, 83%)
Oklch
oklch(27.8% 0.013 87.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2A60B
0B59F4

Analogous

F4320B
F2A60B
CDF40B

Triadic

F2A60B
0BF4A6
A60BF4

Split-Comp.

F2A60B
0BCDF4
320BF4

Tetradic

F2A60B
0BF432
0B59F4
F40BCD

Contrast Matrix WCAG 2.1 Contrast

F2A60B
B89245
736445
4A4439
2B2821
—
1.4
Fail
2.8
Fail
4.7
AA
7.2
AAA
1.4
Fail
—
2.0
Fail
3.3
AA Large
5.1
AA
2.8
Fail
2.0
Fail
—
1.7
Fail
2.5
Fail
4.7
AA
3.3
AA Large
1.7
Fail
—
1.5
Fail
7.2
AAA
5.1
AA
2.5
Fail
1.5
Fail
—
White BG
2.1Fail
2.9Fail
5.8AA
9.6AAA
14.7AAA
Black BG
10.2AAA
7.2AAA
3.6AA Large
2.2Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D031
A8A758
6D6C4D
47473C
2A2A23

Deuteranopia

D6DB3A
AAAD5C
6D6F4E
48483C
2A2A23

Tritanopia

EE4E55
B6666A
725254
4A3E3E
2B2424

Achromatopsia

ABABAB
959595
656565
454545
282828

Shades & Tints Shades & Tints

#F2A60B

Dark
Light

#B89245

Dark
Light

#736445

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2a60b;
  --color-2: #b89245;
  --color-3: #736445;
  --color-4: #4a4439;
  --color-5: #2b2821;
}

SCSS

$color-1: #f2a60b;
$color-2: #b89245;
$color-3: #736445;
$color-4: #4a4439;
$color-5: #2b2821;

TAILWIND

colors: {
  'brand-1': '#f2a60b',
  'brand-2': '#b89245',
  'brand-3': '#736445',
  'brand-4': '#4a4439',
  'brand-5': '#2b2821',
}

RGB Array

[242, 166, 11], [184, 146, 69], [115, 100, 69], [74, 68, 57], [43, 40, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2A60B, #B89245, #736445, #4A4439, #2B2821 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: #f2a60b; --color-2: #b89245; --color-3: #736445; --color-4: #4a4439; --color-5: #2b2821. 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