← Back to Editor

#0B224B · #362551 · #642544 · #2D6467 · #F1C4AD

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

#0B224B

Indigo · MidnightBlue · Deep Sea Blue

HEX
#0B224B
RGB
rgb(11, 34, 75)
HSL
hsl(218, 74%, 17%)
HSB
hsb(218, 85%, 29%)
CMYK
cmyk(85%, 55%, 0%, 71%)
Oklch
oklch(26.1% 0.082 260.9)

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

#362551

Deep Indigo · DarkSlateGray · Eggplant

HEX
#362551
RGB
rgb(54, 37, 81)
HSL
hsl(263, 37%, 23%)
HSB
hsb(263, 54%, 32%)
CMYK
cmyk(33%, 54%, 0%, 68%)
Oklch
oklch(30.8% 0.078 299.6)

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

#642544

Dark Violet · DarkSlateGray · Camellia

HEX
#642544
RGB
rgb(100, 37, 68)
HSL
hsl(330, 46%, 27%)
HSB
hsb(330, 63%, 39%)
CMYK
cmyk(0%, 63%, 32%, 61%)
Oklch
oklch(36.7% 0.098 352.4)

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

#2D6467

Slate Blue · DarkSlateGray · Mint Ice

HEX
#2D6467
RGB
rgb(45, 100, 103)
HSL
hsl(183, 39%, 29%)
HSB
hsb(183, 56%, 40%)
CMYK
cmyk(56%, 3%, 0%, 60%)
Oklch
oklch(46.8% 0.058 200.2)

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

#F1C4AD

Apricot · Wheat · Peach Orange

HEX
#F1C4AD
RGB
rgb(241, 196, 173)
HSL
hsl(20, 71%, 81%)
HSB
hsb(20, 28%, 95%)
CMYK
cmyk(0%, 19%, 28%, 5%)
Oklch
oklch(85.4% 0.060 48.5)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0B224B
4B340B

Analogous

0B434B
0B224B
140B4B

Triadic

0B224B
4B0B23
234B0B

Split-Comp.

0B224B
4B140B
434B0B

Tetradic

0B224B
4B0B43
4B340B
0B4B14

Contrast Matrix WCAG 2.1 Contrast

0B224B
362551
642544
2D6467
F1C4AD
—
1.1
Fail
1.4
Fail
2.3
Fail
9.8
AAA
1.1
Fail
—
1.2
Fail
2.0
Fail
8.6
AAA
1.4
Fail
1.2
Fail
—
1.7
Fail
7.0
AAA
2.3
Fail
2.0
Fail
1.7
Fail
—
4.2
AA Large
9.8
AAA
8.6
AAA
7.0
AAA
4.2
AA Large
—
White BG
15.6AAA
13.6AAA
11.1AAA
6.7AA
1.6Fail
Black BG
1.3Fail
1.5Fail
1.9Fail
3.1AA Large
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

151541
2F2E46
49483C
454566
DEDDB3

Deuteranopia

14123F
303144
4C513B
423E66
E0E4B4

Tritanopia

0C3938
353E3C
613735
306666
EFB7B8

Achromatopsia

202020
2F2F2F
3B3B3B
545454
CFCFCF

Shades & Tints Shades & Tints

#0B224B

Dark
Light

#362551

Dark
Light

#642544

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0b224b;
  --color-2: #362551;
  --color-3: #642544;
  --color-4: #2d6467;
  --color-5: #f1c4ad;
}

SCSS

$color-1: #0b224b;
$color-2: #362551;
$color-3: #642544;
$color-4: #2d6467;
$color-5: #f1c4ad;

TAILWIND

colors: {
  'brand-1': '#0b224b',
  'brand-2': '#362551',
  'brand-3': '#642544',
  'brand-4': '#2d6467',
  'brand-5': '#f1c4ad',
}

RGB Array

[11, 34, 75], [54, 37, 81], [100, 37, 68], [45, 100, 103], [241, 196, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0B224B, #362551, #642544, #2D6467, #F1C4AD 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: #0b224b; --color-2: #362551; --color-3: #642544; --color-4: #2d6467; --color-5: #f1c4ad. 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