← Back to Editor

#330305 · #820827 · #F2F7D9 · #64897C · #280B31

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#330305

Vermilion · Black · Deep Berry

HEX
#330305
RGB
rgb(51, 3, 5)
HSL
hsl(357, 89%, 11%)
HSB
hsb(357, 94%, 20%)
CMYK
cmyk(0%, 94%, 90%, 80%)
Oklch
oklch(20.8% 0.077 24.4)

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

#820827

Vermilion · Maroon · Wine Red

HEX
#820827
RGB
rgb(130, 8, 39)
HSL
hsl(345, 88%, 27%)
HSB
hsb(345, 94%, 51%)
CMYK
cmyk(0%, 94%, 70%, 49%)
Oklch
oklch(38.9% 0.150 16.4)

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

#F2F7D9

Willow Green · Beige · Mint Green

HEX
#F2F7D9
RGB
rgb(242, 247, 217)
HSL
hsl(70, 65%, 91%)
HSB
hsb(70, 12%, 97%)
CMYK
cmyk(2%, 0%, 12%, 3%)
Oklch
oklch(96.5% 0.040 114.8)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#64897C

Mineral Blue · SlateGray · Olive Green

HEX
#64897C
RGB
rgb(100, 137, 124)
HSL
hsl(159, 16%, 46%)
HSB
hsb(159, 27%, 54%)
CMYK
cmyk(27%, 0%, 9%, 46%)
Oklch
oklch(59.8% 0.046 171.0)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#280B31

Royal Purple · Black · Dark Purple

HEX
#280B31
RGB
rgb(40, 11, 49)
HSL
hsl(286, 63%, 12%)
HSB
hsb(286, 78%, 19%)
CMYK
cmyk(18%, 78%, 0%, 81%)
Oklch
oklch(21.9% 0.077 317.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

330305
033533

Analogous

35031F
330305
351A03

Triadic

330305
063503
030635

Split-Comp.

330305
03351A
031F35

Tetradic

330305
1F3503
033533
1A0335

Contrast Matrix WCAG 2.1 Contrast

330305
820827
F2F7D9
64897C
280B31
—
1.7
Fail
16.5
AAA
4.7
AA
1.0
Fail
1.7
Fail
—
9.5
AAA
2.7
Fail
1.7
Fail
16.5
AAA
9.5
AAA
—
3.5
AA Large
16.1
AAA
4.7
AA
2.7
Fail
3.5
AA Large
—
4.6
AA
1.0
Fail
1.7
Fail
16.1
AAA
4.6
AA
—
White BG
18.2AAA
10.4AAA
1.1Fail
3.9AA Large
17.8AAA
Black BG
1.2Fail
2.0Fail
19.1AAA
5.4AA
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

1E1E05
4D4C1F
F4F4E0
74747F
1B1B28

Deuteranopia

212504
545D1E
F4F3E2
726F80
1D1F26

Tritanopia

310404
7C1A18
F2E6E7
668282
27211F

Achromatopsia

121212
303030
F2F2F2
7C7C7C
181818

Shades & Tints Shades & Tints

#330305

Dark
Light

#820827

Dark
Light

#F2F7D9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #330305;
  --color-2: #820827;
  --color-3: #f2f7d9;
  --color-4: #64897c;
  --color-5: #280b31;
}

SCSS

$color-1: #330305;
$color-2: #820827;
$color-3: #f2f7d9;
$color-4: #64897c;
$color-5: #280b31;

TAILWIND

colors: {
  'brand-1': '#330305',
  'brand-2': '#820827',
  'brand-3': '#f2f7d9',
  'brand-4': '#64897c',
  'brand-5': '#280b31',
}

RGB Array

[51, 3, 5], [130, 8, 39], [242, 247, 217], [100, 137, 124], [40, 11, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #330305, #820827, #F2F7D9, #64897C, #280B31 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #330305; --color-2: #820827; --color-3: #f2f7d9; --color-4: #64897c; --color-5: #280b31. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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