← Back to Editor

#F8C693 · #919C7D · #664547 · #D18C3E · #BA4D3D

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 LibraryData Visualization

Color Details Color Details

#F8C693

Goose Yellow · BurlyWood · Peach Orange

HEX
#F8C693
RGB
rgb(248, 198, 147)
HSL
hsl(30, 88%, 77%)
HSB
hsb(30, 41%, 97%)
CMYK
cmyk(0%, 20%, 41%, 3%)
Oklch
oklch(85.9% 0.087 66.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#919C7D

Grass Green · Gray · Olive Green

HEX
#919C7D
RGB
rgb(145, 156, 125)
HSL
hsl(81, 14%, 55%)
HSB
hsb(81, 20%, 61%)
CMYK
cmyk(7%, 0%, 20%, 39%)
Oklch
oklch(67.5% 0.046 123.5)

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

#664547

Crimson · DarkOliveGreen · Wine Red

HEX
#664547
RGB
rgb(102, 69, 71)
HSL
hsl(356, 19%, 34%)
HSB
hsb(356, 32%, 40%)
CMYK
cmyk(0%, 32%, 30%, 60%)
Oklch
oklch(42.8% 0.046 15.2)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#D18C3E

Ginger · GoldenRod · Warm Sun

HEX
#D18C3E
RGB
rgb(209, 140, 62)
HSL
hsl(32, 62%, 53%)
HSB
hsb(32, 70%, 82%)
CMYK
cmyk(0%, 33%, 70%, 18%)
Oklch
oklch(69.6% 0.125 66.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#BA4D3D

Crimson · Sienna · Passion Red

HEX
#BA4D3D
RGB
rgb(186, 77, 61)
HSL
hsl(8, 51%, 48%)
HSB
hsb(8, 67%, 73%)
CMYK
cmyk(0%, 59%, 67%, 27%)
Oklch
oklch(56.0% 0.145 30.6)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8C693
91C4F8

Analogous

F89191
F8C693
F8F891

Triadic

F8C693
91F8C4
C491F8

Split-Comp.

F8C693
91F8F8
9191F8

Tetradic

F8C693
91F891
91C4F8
F891F8

Contrast Matrix WCAG 2.1 Contrast

F8C693
919C7D
664547
D18C3E
BA4D3D
—
1.9
Fail
5.4
AA
1.8
Fail
3.2
AA Large
1.9
Fail
—
2.9
Fail
1.0
Fail
1.7
Fail
5.4
AA
2.9
Fail
—
3.0
AA Large
1.7
Fail
1.8
Fail
1.0
Fail
3.0
AA Large
—
1.8
Fail
3.2
AA Large
1.7
Fail
1.7
Fail
1.8
Fail
—
White BG
1.6Fail
2.9Fail
8.4AAA
2.8Fail
5.0AA
Black BG
13.5AAA
7.3AAA
2.5Fail
7.5AAA
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E29F
969685
585747
B3B351
8B8A41

Deuteranopia

E5E9A2
959486
5A5C46
B7BC55
919942

Tritanopia

F6A9AB
928A8C
644646
CE6063
B54445

Achromatopsia

CFCFCF
959595
4F4F4F
989898
6C6C6C

Shades & Tints Shades & Tints

#F8C693

Dark
Light

#919C7D

Dark
Light

#664547

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8c693;
  --color-2: #919c7d;
  --color-3: #664547;
  --color-4: #d18c3e;
  --color-5: #ba4d3d;
}

SCSS

$color-1: #f8c693;
$color-2: #919c7d;
$color-3: #664547;
$color-4: #d18c3e;
$color-5: #ba4d3d;

TAILWIND

colors: {
  'brand-1': '#f8c693',
  'brand-2': '#919c7d',
  'brand-3': '#664547',
  'brand-4': '#d18c3e',
  'brand-5': '#ba4d3d',
}

RGB Array

[248, 198, 147], [145, 156, 125], [102, 69, 71], [209, 140, 62], [186, 77, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8C693, #919C7D, #664547, #D18C3E, #BA4D3D 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: #f8c693; --color-2: #919c7d; --color-3: #664547; --color-4: #d18c3e; --color-5: #ba4d3d. 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