← Back to Editor

#220917 · #7D1F3F · #1A827A · #CEB84B · #F6D354

space

A 5-color space 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

#220917

Rose Purple · Black · Raspberry

HEX
#220917
RGB
rgb(34, 9, 23)
HSL
hsl(326, 58%, 8%)
HSB
hsb(326, 74%, 13%)
CMYK
cmyk(0%, 74%, 32%, 87%)
Oklch
oklch(18.8% 0.048 347.9)

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

#7D1F3F

Dark Violet · Brown · Camellia

HEX
#7D1F3F
RGB
rgb(125, 31, 63)
HSL
hsl(340, 60%, 31%)
HSB
hsb(340, 75%, 49%)
CMYK
cmyk(0%, 75%, 50%, 51%)
Oklch
oklch(40.2% 0.130 4.7)

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

#1A827A

Mineral Blue · Teal · Mint Ice

HEX
#1A827A
RGB
rgb(26, 130, 122)
HSL
hsl(175, 67%, 31%)
HSB
hsb(175, 80%, 51%)
CMYK
cmyk(80%, 0%, 6%, 49%)
Oklch
oklch(54.9% 0.090 186.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#CEB84B

Autumn Sage · SandyBrown · Sunflower

HEX
#CEB84B
RGB
rgb(206, 184, 75)
HSL
hsl(50, 57%, 55%)
HSB
hsb(50, 64%, 81%)
CMYK
cmyk(0%, 11%, 64%, 19%)
Oklch
oklch(78.1% 0.130 97.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#F6D354

Ginger · SandyBrown · Sunflower

HEX
#F6D354
RGB
rgb(246, 211, 84)
HSL
hsl(47, 90%, 65%)
HSB
hsb(47, 66%, 96%)
CMYK
cmyk(0%, 14%, 66%, 4%)
Oklch
oklch(87.4% 0.148 93.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

220917
092013

Analogous

1F0920
220917
20090A

Triadic

220917
162009
091620

Split-Comp.

220917
0A2009
09201F

Tetradic

220917
201F09
092013
090A20

Contrast Matrix WCAG 2.1 Contrast

220917
7D1F3F
1A827A
CEB84B
F6D354
—
1.9
Fail
4.0
AA Large
9.5
AAA
12.8
AAA
1.9
Fail
—
2.1
Fail
4.9
AA
6.7
AA
4.0
AA Large
2.1
Fail
—
2.3
Fail
3.2
AA Large
9.5
AAA
4.9
AA
2.3
Fail
—
1.4
Fail
12.8
AAA
6.7
AA
3.2
AA Large
1.4
Fail
—
White BG
18.8AAA
9.8AAA
4.6AA
2.0Fail
1.5Fail
Black BG
1.1Fail
2.1Fail
4.5AA
10.6AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

171714
545337
47487C
C4C465
E7E773

Deuteranopia

191A13
5A6135
41397C
C6C76C
E9EC7A

Tritanopia

211110
783130
1F7D7E
CD7A7F
F48B90

Achromatopsia

121212
3F3F3F
626262
B2B2B2
CFCFCF

Shades & Tints Shades & Tints

#220917

Dark
Light

#7D1F3F

Dark
Light

#1A827A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #220917;
  --color-2: #7d1f3f;
  --color-3: #1a827a;
  --color-4: #ceb84b;
  --color-5: #f6d354;
}

SCSS

$color-1: #220917;
$color-2: #7d1f3f;
$color-3: #1a827a;
$color-4: #ceb84b;
$color-5: #f6d354;

TAILWIND

colors: {
  'brand-1': '#220917',
  'brand-2': '#7d1f3f',
  'brand-3': '#1a827a',
  'brand-4': '#ceb84b',
  'brand-5': '#f6d354',
}

RGB Array

[34, 9, 23], [125, 31, 63], [26, 130, 122], [206, 184, 75], [246, 211, 84]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #220917, #7D1F3F, #1A827A, #CEB84B, #F6D354 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: #220917; --color-2: #7d1f3f; --color-3: #1a827a; --color-4: #ceb84b; --color-5: #f6d354. 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 space-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