← Back to Editor

#221C48 · #030305 · #40332D · #A27F23 · #F1EAB3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#221C48

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#221C48
RGB
rgb(34, 28, 72)
HSL
hsl(248, 44%, 20%)
HSB
hsb(248, 61%, 28%)
CMYK
cmyk(53%, 61%, 0%, 72%)
Oklch
oklch(26.1% 0.079 285.8)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#030305

Deep Indigo · Black · Deep Sea Blue

HEX
#030305
RGB
rgb(3, 3, 5)
HSL
hsl(240, 25%, 2%)
HSB
hsb(240, 40%, 2%)
CMYK
cmyk(40%, 40%, 0%, 98%)
Oklch
oklch(9.9% 0.008 284.8)

Traditional「Deep Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#40332D

Tangerine · DarkSlateGray · Cinnamon

HEX
#40332D
RGB
rgb(64, 51, 45)
HSL
hsl(19, 17%, 21%)
HSB
hsb(19, 30%, 25%)
CMYK
cmyk(0%, 20%, 30%, 75%)
Oklch
oklch(33.3% 0.022 46.1)

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

#A27F23

Ochre · DarkGoldenRod · Honey Gold

HEX
#A27F23
RGB
rgb(162, 127, 35)
HSL
hsl(43, 64%, 39%)
HSB
hsb(43, 78%, 64%)
CMYK
cmyk(0%, 22%, 78%, 36%)
Oklch
oklch(61.4% 0.113 86.6)

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

#F1EAB3

Fresh Green · Wheat · Lemon Cream

HEX
#F1EAB3
RGB
rgb(241, 234, 179)
HSL
hsl(53, 69%, 82%)
HSB
hsb(53, 26%, 95%)
CMYK
cmyk(0%, 3%, 26%, 5%)
Oklch
oklch(92.9% 0.071 101.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

221C48
43491D

Analogous

1D2D49
221C48
391D49

Triadic

221C48
49231D
1D4923

Split-Comp.

221C48
49391D
2D491D

Tetradic

221C48
491D2D
43491D
1D4939

Contrast Matrix WCAG 2.1 Contrast

221C48
030305
40332D
A27F23
F1EAB3
—
1.3
Fail
1.3
Fail
4.2
AA Large
12.9
AAA
1.3
Fail
—
1.7
Fail
5.5
AA
16.8
AAA
1.3
Fail
1.7
Fail
—
3.2
AA Large
9.9
AAA
4.2
AA Large
5.5
AA
3.2
AA Large
—
3.1
AA Large
12.9
AAA
16.8
AAA
9.9
AAA
3.1
AA Large
—
White BG
15.8AAA
20.6AAA
12.1AAA
3.8AA Large
1.2Fail
Black BG
1.3Fail
1.0Fail
1.7Fail
5.6AA
17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1F3D
030305
3A3A2E
939339
EEEEC0

Deuteranopia

20203B
030304
3B3C2F
95983F
EEEFC4

Tritanopia

223533
030404
3F3030
A04B4F
F1CBCD

Achromatopsia

232323
030303
363636
7F7F7F
E6E6E6

Shades & Tints Shades & Tints

#221C48

Dark
Light

#030305

Dark
Light

#40332D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #221c48;
  --color-2: #030305;
  --color-3: #40332d;
  --color-4: #a27f23;
  --color-5: #f1eab3;
}

SCSS

$color-1: #221c48;
$color-2: #030305;
$color-3: #40332d;
$color-4: #a27f23;
$color-5: #f1eab3;

TAILWIND

colors: {
  'brand-1': '#221c48',
  'brand-2': '#030305',
  'brand-3': '#40332d',
  'brand-4': '#a27f23',
  'brand-5': '#f1eab3',
}

RGB Array

[34, 28, 72], [3, 3, 5], [64, 51, 45], [162, 127, 35], [241, 234, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #221C48, #030305, #40332D, #A27F23, #F1EAB3 is ideal for: tech websites, dark mode UIs, game UIs, 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: #221c48; --color-2: #030305; --color-3: #40332d; --color-4: #a27f23; --color-5: #f1eab3. 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 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