← Back to Editor

#896784 · #FFF0D1 · #F66446 · #2B2116 · #B29572

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

#896784

Rose Purple · Gray · Violet

HEX
#896784
RGB
rgb(137, 103, 132)
HSL
hsl(309, 14%, 47%)
HSB
hsb(309, 25%, 54%)
CMYK
cmyk(0%, 25%, 4%, 46%)
Oklch
oklch(55.8% 0.060 331.5)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

#FFF0D1

Goose Yellow · Beige · Lemon Cream

HEX
#FFF0D1
RGB
rgb(255, 240, 209)
HSL
hsl(40, 100%, 91%)
HSB
hsb(40, 18%, 100%)
CMYK
cmyk(0%, 6%, 18%, 0%)
Oklch
oklch(95.9% 0.044 85.2)

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

#F66446

Peach Pink · Tomato · Coral Red

HEX
#F66446
RGB
rgb(246, 100, 70)
HSL
hsl(10, 91%, 62%)
HSB
hsb(10, 72%, 96%)
CMYK
cmyk(0%, 59%, 72%, 4%)
Oklch
oklch(68.4% 0.185 33.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#2B2116

Ochre · Black · Cinnamon

HEX
#2B2116
RGB
rgb(43, 33, 22)
HSL
hsl(31, 32%, 13%)
HSB
hsb(31, 49%, 17%)
CMYK
cmyk(0%, 23%, 49%, 83%)
Oklch
oklch(25.6% 0.025 69.0)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#B29572

Ginger · Tan · Warm Sun

HEX
#B29572
RGB
rgb(178, 149, 114)
HSL
hsl(33, 29%, 57%)
HSB
hsb(33, 36%, 70%)
CMYK
cmyk(0%, 16%, 36%, 30%)
Oklch
oklch(68.7% 0.060 71.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

896784
67896C

Analogous

7D6789
896784
896773

Triadic

896784
848967
678489

Split-Comp.

896784
738967
67897D

Tetradic

896784
897D67
67896C
677389

Contrast Matrix WCAG 2.1 Contrast

896784
FFF0D1
F66446
2B2116
B29572
—
4.3
AA Large
1.6
Fail
3.3
AA Large
1.7
Fail
4.3
AA Large
—
2.7
Fail
14.0
AAA
2.5
Fail
1.6
Fail
2.7
Fail
—
5.1
AA
1.1
Fail
3.3
AA Large
14.0
AAA
5.1
AA
—
5.6
AA
1.7
Fail
2.5
Fail
1.1
Fail
5.6
AA
—
White BG
4.8AA
1.1Fail
3.1AA Large
15.8AAA
2.8Fail
Black BG
4.3AA Large
18.6AAA
6.8AA
1.3Fail
7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7A7A7D
F9F8D9
B7B54D
272719
A5A57A

Deuteranopia

7C7F7B
F9FBDA
BFCA4F
272819
A7A97D

Tritanopia

877776
FEDEE0
EF5354
2B1B1B
B18183

Achromatopsia

747474
F1F1F1
8C8C8C
232323
9A9A9A

Shades & Tints Shades & Tints

#896784

Dark
Light

#FFF0D1

Dark
Light

#F66446

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #896784;
  --color-2: #fff0d1;
  --color-3: #f66446;
  --color-4: #2b2116;
  --color-5: #b29572;
}

SCSS

$color-1: #896784;
$color-2: #fff0d1;
$color-3: #f66446;
$color-4: #2b2116;
$color-5: #b29572;

TAILWIND

colors: {
  'brand-1': '#896784',
  'brand-2': '#fff0d1',
  'brand-3': '#f66446',
  'brand-4': '#2b2116',
  'brand-5': '#b29572',
}

RGB Array

[137, 103, 132], [255, 240, 209], [246, 100, 70], [43, 33, 22], [178, 149, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #896784, #FFF0D1, #F66446, #2B2116, #B29572 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: #896784; --color-2: #fff0d1; --color-3: #f66446; --color-4: #2b2116; --color-5: #b29572. 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