#22192C + #40364E + #963046 + #CA9F37 + #94722B · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#22192C

Deep Indigo · Black · Dark Purple

HEX

#22192C

RGB

rgb(34, 25, 44)

HSL

hsl(268, 28%, 14%)

HSB

hsb(268, 43%, 17%)

CMYK

cmyk(23%, 43%, 0%, 83%)

Oklch

oklch(23.4% 0.038 305.4)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#40364E

Deep Indigo · DarkSlateGray · Eggplant

HEX

#40364E

RGB

rgb(64, 54, 78)

HSL

hsl(265, 18%, 26%)

HSB

hsb(265, 31%, 31%)

CMYK

cmyk(18%, 31%, 0%, 69%)

Oklch

oklch(35.4% 0.043 303.3)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#963046

Crimson · Brown · Wine Red

HEX

#963046

RGB

rgb(150, 48, 70)

HSL

hsl(347, 52%, 39%)

HSB

hsb(347, 68%, 59%)

CMYK

cmyk(0%, 68%, 53%, 41%)

Oklch

oklch(46.6% 0.137 11.3)

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

#CA9F37

Ochre · GoldenRod · Honey Gold

HEX

#CA9F37

RGB

rgb(202, 159, 55)

HSL

hsl(42, 58%, 50%)

HSB

hsb(42, 73%, 79%)

CMYK

cmyk(0%, 21%, 73%, 21%)

Oklch

oklch(72.4% 0.128 85.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#94722B

Ochre · Sienna · Honey Gold

HEX

#94722B

RGB

rgb(148, 114, 43)

HSL

hsl(41, 55%, 37%)

HSB

hsb(41, 71%, 58%)

CMYK

cmyk(0%, 23%, 71%, 42%)

Oklch

oklch(57.2% 0.097 82.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

22192C

242E1A

Analogous

1A1A2E

22192C

2D1A2E

Triadic

22192C

2E231A

1A2E23

Split-Comp.

22192C

2E2D1A

1A2E1A

Tetradic

22192C

2E1A1A

242E1A

1A2E2D

Contrast Matrix WCAG 2.1 Contrast

22192C	40364E	963046	CA9F37	94722B
—	1.5 Fail	2.3 Fail	6.9 AA	3.8 AA Large
1.5 Fail	—	1.5 Fail	4.6 AA	2.5 Fail
2.3 Fail	1.5 Fail	—	3.0 AA Large	1.7 Fail
6.9 AA	4.6 AA	3.0 AA Large	—	1.8 Fail
3.8 AA Large	2.5 Fail	1.7 Fail	1.8 Fail	—

White BG

16.9AAA

11.3AAA

7.5AAA

2.5Fail

4.5AA Large

Black BG

1.2Fail

1.9Fail

2.8Fail

8.5AAA

4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1E1E27

3C3C48

6A6941

B7B750

85853C

Deuteranopia

1F1F26

3C3D47

70773F

BABD56

878A40

Tritanopia

222423

404443

913C3C

C86468

924A4D

Achromatopsia

1E1E1E

3C3C3C

515151

A0A0A0

747474

Shades & Tints Shades & Tints

#22192C

Dark

Light

#40364E

Dark

Light

#963046

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #22192c;
  --color-2: #40364e;
  --color-3: #963046;
  --color-4: #ca9f37;
  --color-5: #94722b;
}

SCSS

$color-1: #22192c;
$color-2: #40364e;
$color-3: #963046;
$color-4: #ca9f37;
$color-5: #94722b;

TAILWIND

colors: {
  'brand-1': '#22192c',
  'brand-2': '#40364e',
  'brand-3': '#963046',
  'brand-4': '#ca9f37',
  'brand-5': '#94722b',
}

RGB Array

[34, 25, 44], [64, 54, 78], [150, 48, 70], [202, 159, 55], [148, 114, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #22192C, #40364E, #963046, #CA9F37, #94722B is ideal for: tech websites, dark mode UIs, game UIs. 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: #22192c; --color-2: #40364e; --color-3: #963046; --color-4: #ca9f37; --color-5: #94722b. 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. 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 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