← Back to Editor

#F3E8B6 · #E1A374 · #8A4C5F · #222021 · #C9B1C8

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

#F3E8B6

Goose Yellow · Wheat · Lemon Cream

HEX
#F3E8B6
RGB
rgb(243, 232, 182)
HSL
hsl(49, 72%, 83%)
HSB
hsb(49, 25%, 95%)
CMYK
cmyk(0%, 5%, 25%, 5%)
Oklch
oklch(92.8% 0.066 97.1)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#E1A374

Apricot · DarkSalmon · Warm Sun

HEX
#E1A374
RGB
rgb(225, 163, 116)
HSL
hsl(26, 64%, 67%)
HSB
hsb(26, 48%, 88%)
CMYK
cmyk(0%, 28%, 48%, 12%)
Oklch
oklch(76.4% 0.096 57.9)

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

#8A4C5F

Dark Violet · DimGray · Camellia

HEX
#8A4C5F
RGB
rgb(138, 76, 95)
HSL
hsl(342, 29%, 42%)
HSB
hsb(342, 45%, 54%)
CMYK
cmyk(0%, 45%, 31%, 46%)
Oklch
oklch(49.6% 0.086 1.1)

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

#222021

Ink Black · Black · Dark Stone

HEX
#222021
RGB
rgb(34, 32, 33)
HSL
hsl(330, 3%, 13%)
HSB
hsb(330, 6%, 13%)
CMYK
cmyk(0%, 6%, 3%, 87%)
Oklch
oklch(24.6% 0.004 345.5)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#C9B1C8

Mauve · Silver · Lilac Purple

HEX
#C9B1C8
RGB
rgb(201, 177, 200)
HSL
hsl(302, 18%, 74%)
HSB
hsb(302, 12%, 79%)
CMYK
cmyk(0%, 12%, 0%, 21%)
Oklch
oklch(78.8% 0.042 327.3)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3E8B6
B4C0F3

Analogous

F3C8B4
F3E8B6
DFF3B4

Triadic

F3E8B6
B4F3E7
E7B4F3

Split-Comp.

F3E8B6
B4DFF3
C8B4F3

Tetradic

F3E8B6
B4F3C8
B4C0F3
F3B4DF

Contrast Matrix WCAG 2.1 Contrast

F3E8B6
E1A374
8A4C5F
222021
C9B1C8
—
1.8
Fail
5.2
AA
13.1
AAA
1.6
Fail
1.8
Fail
—
3.0
Fail
7.5
AAA
1.1
Fail
5.2
AA
3.0
Fail
—
2.5
Fail
3.2
AA Large
13.1
AAA
7.5
AAA
2.5
Fail
—
8.2
AAA
1.6
Fail
1.1
Fail
3.2
AA Large
8.2
AAA
—
White BG
1.2Fail
2.2Fail
6.4AA
16.2AAA
2.0Fail
Black BG
17.0AAA
9.7AAA
3.3AA Large
1.3Fail
10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEEC2
C6C67F
6F6F5A
212121
BFBEC2

Deuteranopia

EFF0C5
CACE82
737759
212121
C0C2C1

Tritanopia

F2CCCE
DE888A
875756
222121
C8BEBD

Achromatopsia

E6E6E6
B0B0B0
616161
212121
BBBBBB

Shades & Tints Shades & Tints

#F3E8B6

Dark
Light

#E1A374

Dark
Light

#8A4C5F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3e8b6;
  --color-2: #e1a374;
  --color-3: #8a4c5f;
  --color-4: #222021;
  --color-5: #c9b1c8;
}

SCSS

$color-1: #f3e8b6;
$color-2: #e1a374;
$color-3: #8a4c5f;
$color-4: #222021;
$color-5: #c9b1c8;

TAILWIND

colors: {
  'brand-1': '#f3e8b6',
  'brand-2': '#e1a374',
  'brand-3': '#8a4c5f',
  'brand-4': '#222021',
  'brand-5': '#c9b1c8',
}

RGB Array

[243, 232, 182], [225, 163, 116], [138, 76, 95], [34, 32, 33], [201, 177, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3E8B6, #E1A374, #8A4C5F, #222021, #C9B1C8 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: #f3e8b6; --color-2: #e1a374; --color-3: #8a4c5f; --color-4: #222021; --color-5: #c9b1c8. 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