← Back to Editor

#280F20 · #623764 · #935D8A · #E7B773 · #F4D8B0

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

#280F20

Rose Purple · Black · Dark Purple

HEX
#280F20
RGB
rgb(40, 15, 32)
HSL
hsl(319, 45%, 11%)
HSB
hsb(319, 63%, 16%)
CMYK
cmyk(0%, 62%, 20%, 84%)
Oklch
oklch(21.4% 0.050 340.9)

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

#623764

Dark Plum · DarkSlateBlue · Eggplant

HEX
#623764
RGB
rgb(98, 55, 100)
HSL
hsl(297, 29%, 30%)
HSB
hsb(297, 45%, 39%)
CMYK
cmyk(2%, 45%, 0%, 61%)
Oklch
oklch(40.8% 0.090 325.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#935D8A

Rose Purple · Gray · Violet

HEX
#935D8A
RGB
rgb(147, 93, 138)
HSL
hsl(310, 22%, 47%)
HSB
hsb(310, 37%, 58%)
CMYK
cmyk(0%, 37%, 6%, 42%)
Oklch
oklch(55.3% 0.094 333.0)

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

#E7B773

Ginger · BurlyWood · Warm Sun

HEX
#E7B773
RGB
rgb(231, 183, 115)
HSL
hsl(35, 71%, 68%)
HSB
hsb(35, 50%, 91%)
CMYK
cmyk(0%, 21%, 50%, 9%)
Oklch
oklch(80.8% 0.102 75.1)

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

#F4D8B0

Goose Yellow · Wheat · Peach Orange

HEX
#F4D8B0
RGB
rgb(244, 216, 176)
HSL
hsl(35, 76%, 82%)
HSB
hsb(35, 28%, 96%)
CMYK
cmyk(0%, 11%, 28%, 4%)
Oklch
oklch(89.6% 0.061 76.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

280F20
0F2917

Analogous

240F29
280F20
290F14

Triadic

280F20
21290F
0F2129

Split-Comp.

280F20
14290F
0F2924

Tetradic

280F20
29240F
0F2917
0F1429

Contrast Matrix WCAG 2.1 Contrast

280F20
623764
935D8A
E7B773
F4D8B0
—
1.9
Fail
3.5
AA Large
9.7
AAA
13.0
AAA
1.9
Fail
—
1.9
Fail
5.1
AA
6.8
AA
3.5
AA Large
1.9
Fail
—
2.7
Fail
3.7
AA Large
9.7
AAA
5.1
AA
2.7
Fail
—
1.3
Fail
13.0
AAA
6.8
AA
3.7
AA Large
1.3
Fail
—
White BG
17.8AAA
9.3AAA
5.0AA
1.8Fail
1.4Fail
Black BG
1.2Fail
2.2Fail
4.2AA Large
11.4AAA
15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1D1D1C
4F4F59
7C7B7F
D2D283
E8E8BA

Deuteranopia

1F211B
525557
7F837D
D5D987
EAECBC

Tritanopia

271918
60514F
907775
E59093
F3C1C3

Achromatopsia

181818
494949
727272
BEBEBE
DCDCDC

Shades & Tints Shades & Tints

#280F20

Dark
Light

#623764

Dark
Light

#935D8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #280f20;
  --color-2: #623764;
  --color-3: #935d8a;
  --color-4: #e7b773;
  --color-5: #f4d8b0;
}

SCSS

$color-1: #280f20;
$color-2: #623764;
$color-3: #935d8a;
$color-4: #e7b773;
$color-5: #f4d8b0;

TAILWIND

colors: {
  'brand-1': '#280f20',
  'brand-2': '#623764',
  'brand-3': '#935d8a',
  'brand-4': '#e7b773',
  'brand-5': '#f4d8b0',
}

RGB Array

[40, 15, 32], [98, 55, 100], [147, 93, 138], [231, 183, 115], [244, 216, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #280F20, #623764, #935D8A, #E7B773, #F4D8B0 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: #280f20; --color-2: #623764; --color-3: #935d8a; --color-4: #e7b773; --color-5: #f4d8b0. 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