← Back to Editor

#F8BC64 · #301E1E · #DAD094 · #AECC9E · #82C8AA

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

#F8BC64

Ginger · SandyBrown · Warm Sun

HEX
#F8BC64
RGB
rgb(248, 188, 100)
HSL
hsl(36, 91%, 68%)
HSB
hsb(36, 60%, 97%)
CMYK
cmyk(0%, 24%, 60%, 3%)
Oklch
oklch(83.3% 0.126 75.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#301E1E

Crimson · Black · Deep Berry

HEX
#301E1E
RGB
rgb(48, 30, 30)
HSL
hsl(0, 23%, 15%)
HSB
hsb(0, 38%, 19%)
CMYK
cmyk(0%, 37%, 37%, 81%)
Oklch
oklch(25.8% 0.028 19.2)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#DAD094

Fresh Green · BurlyWood · Sunflower

HEX
#DAD094
RGB
rgb(218, 208, 148)
HSL
hsl(51, 49%, 72%)
HSB
hsb(51, 32%, 85%)
CMYK
cmyk(0%, 5%, 32%, 15%)
Oklch
oklch(85.1% 0.079 99.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#AECC9E

Celadon · DarkGray · Apple Green

HEX
#AECC9E
RGB
rgb(174, 204, 158)
HSL
hsl(99, 31%, 71%)
HSB
hsb(99, 23%, 80%)
CMYK
cmyk(15%, 0%, 23%, 20%)
Oklch
oklch(81.1% 0.071 134.8)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#82C8AA

Jade · MediumAquaMarine · Apple Green

HEX
#82C8AA
RGB
rgb(130, 200, 170)
HSL
hsl(154, 39%, 65%)
HSB
hsb(154, 35%, 78%)
CMYK
cmyk(35%, 0%, 15%, 22%)
Oklch
oklch(77.8% 0.083 165.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8BC64
639FF8

Analogous

F87263
F8BC64
E9F863

Triadic

F8BC64
63F8BC
BC63F8

Split-Comp.

F8BC64
63E9F8
7263F8

Tetradic

F8BC64
63F872
639FF8
F863E9

Contrast Matrix WCAG 2.1 Contrast

F8BC64
301E1E
DAD094
AECC9E
82C8AA
—
9.3
AAA
1.1
Fail
1.0
Fail
1.1
Fail
9.3
AAA
—
10.1
AAA
9.0
AAA
8.1
AAA
1.1
Fail
10.1
AAA
—
1.1
Fail
1.2
Fail
1.0
Fail
9.0
AAA
1.1
Fail
—
1.1
Fail
1.1
Fail
8.1
AAA
1.2
Fail
1.1
Fail
—
White BG
1.7Fail
15.8AAA
1.6Fail
1.8Fail
1.9Fail
Black BG
12.4AAA
1.3Fail
13.4AAA
11.9AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDD79
28281E
D6D6A3
BBBBA9
A0A1B1

Deuteranopia

E2E67E
292B1E
D6D7A6
B9B7AC
9C97B3

Tritanopia

F58A8E
2F1E1E
DAAEB1
AFB2B4
86B7B8

Achromatopsia

C4C4C4
232323
CCCCCC
BEBEBE
B0B0B0

Shades & Tints Shades & Tints

#F8BC64

Dark
Light

#301E1E

Dark
Light

#DAD094

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8bc64;
  --color-2: #301e1e;
  --color-3: #dad094;
  --color-4: #aecc9e;
  --color-5: #82c8aa;
}

SCSS

$color-1: #f8bc64;
$color-2: #301e1e;
$color-3: #dad094;
$color-4: #aecc9e;
$color-5: #82c8aa;

TAILWIND

colors: {
  'brand-1': '#f8bc64',
  'brand-2': '#301e1e',
  'brand-3': '#dad094',
  'brand-4': '#aecc9e',
  'brand-5': '#82c8aa',
}

RGB Array

[248, 188, 100], [48, 30, 30], [218, 208, 148], [174, 204, 158], [130, 200, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8BC64, #301E1E, #DAD094, #AECC9E, #82C8AA 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: #f8bc64; --color-2: #301e1e; --color-3: #dad094; --color-4: #aecc9e; --color-5: #82c8aa. 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