← Back to Editor

#F0C60E · #D4BF63 · #96D9C0 · #29302E · #F4D75A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F0C60E

Ochre · Gold · Honey Gold

HEX
#F0C60E
RGB
rgb(240, 198, 14)
HSL
hsl(49, 89%, 50%)
HSB
hsb(49, 94%, 94%)
CMYK
cmyk(0%, 17%, 94%, 6%)
Oklch
oklch(83.9% 0.170 93.2)

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

#D4BF63

Ginger · BurlyWood · Sunflower

HEX
#D4BF63
RGB
rgb(212, 191, 99)
HSL
hsl(49, 57%, 61%)
HSB
hsb(49, 53%, 83%)
CMYK
cmyk(0%, 10%, 53%, 17%)
Oklch
oklch(80.4% 0.115 96.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#96D9C0

Jade · LightBlue · Apple Green

HEX
#96D9C0
RGB
rgb(150, 217, 192)
HSL
hsl(158, 47%, 72%)
HSB
hsb(158, 31%, 85%)
CMYK
cmyk(31%, 0%, 12%, 15%)
Oklch
oklch(83.3% 0.077 169.2)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#29302E

Mineral Blue · DarkSlateGray · Dark Stone

HEX
#29302E
RGB
rgb(41, 48, 46)
HSL
hsl(163, 8%, 17%)
HSB
hsb(163, 15%, 19%)
CMYK
cmyk(15%, 0%, 4%, 81%)
Oklch
oklch(30.2% 0.010 176.5)

Traditional「Mineral Blue」· Paint「Dark Stone」· Creative Midnight Shadow

#F4D75A

Ginger · SandyBrown · Sunflower

HEX
#F4D75A
RGB
rgb(244, 215, 90)
HSL
hsl(49, 88%, 65%)
HSB
hsb(49, 63%, 96%)
CMYK
cmyk(0%, 12%, 63%, 4%)
Oklch
oklch(88.1% 0.146 96.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0C60E
0E38F1

Analogous

F1560E
F0C60E
A9F10E

Triadic

F0C60E
0EF1C7
C70EF1

Split-Comp.

F0C60E
0EA9F1
560EF1

Tetradic

F0C60E
0EF156
0E38F1
F10EA9

Contrast Matrix WCAG 2.1 Contrast

F0C60E
D4BF63
96D9C0
29302E
F4D75A
—
1.1
Fail
1.0
Fail
8.2
AAA
1.2
Fail
1.1
Fail
—
1.1
Fail
7.3
AAA
1.3
Fail
1.0
Fail
1.1
Fail
—
8.3
AAA
1.1
Fail
8.2
AAA
7.3
AAA
8.3
AAA
—
9.5
AAA
1.2
Fail
1.3
Fail
1.1
Fail
9.5
AAA
—
White BG
1.6Fail
1.8Fail
1.6Fail
13.5AAA
1.4Fail
Black BG
12.8AAA
11.4AAA
13.0AAA
1.6Fail
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDD3B
CBCB79
B3B4C6
2C2C2E
E7E778

Deuteranopia

E0E345
CCCE7F
AFAAC7
2C2B2F
E9EB80

Tritanopia

EE5E65
D38B8F
99CBCC
292F2F
F39095

Achromatopsia

BEBEBE
BBBBBB
C2C2C2
2E2E2E
D1D1D1

Shades & Tints Shades & Tints

#F0C60E

Dark
Light

#D4BF63

Dark
Light

#96D9C0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0c60e;
  --color-2: #d4bf63;
  --color-3: #96d9c0;
  --color-4: #29302e;
  --color-5: #f4d75a;
}

SCSS

$color-1: #f0c60e;
$color-2: #d4bf63;
$color-3: #96d9c0;
$color-4: #29302e;
$color-5: #f4d75a;

TAILWIND

colors: {
  'brand-1': '#f0c60e',
  'brand-2': '#d4bf63',
  'brand-3': '#96d9c0',
  'brand-4': '#29302e',
  'brand-5': '#f4d75a',
}

RGB Array

[240, 198, 14], [212, 191, 99], [150, 217, 192], [41, 48, 46], [244, 215, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0C60E, #D4BF63, #96D9C0, #29302E, #F4D75A is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f0c60e; --color-2: #d4bf63; --color-3: #96d9c0; --color-4: #29302e; --color-5: #f4d75a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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