← Back to Editor

#0D0B16 · #057163 · #6A9625 · #89772D · #A3CDD9

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

#0D0B16

Deep Indigo · Black · Deep Sea Blue

HEX
#0D0B16
RGB
rgb(13, 11, 22)
HSL
hsl(251, 33%, 6%)
HSB
hsb(251, 50%, 9%)
CMYK
cmyk(41%, 50%, 0%, 91%)
Oklch
oklch(15.8% 0.023 291.9)

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

#057163

Mineral Blue · Teal · Peacock Green

HEX
#057163
RGB
rgb(5, 113, 99)
HSL
hsl(172, 92%, 23%)
HSB
hsb(172, 96%, 44%)
CMYK
cmyk(96%, 0%, 12%, 56%)
Oklch
oklch(49.2% 0.088 180.1)

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

#6A9625

Grass Green · Olive · Forest Green

HEX
#6A9625
RGB
rgb(106, 150, 37)
HSL
hsl(83, 60%, 37%)
HSB
hsb(83, 75%, 59%)
CMYK
cmyk(29%, 0%, 75%, 41%)
Oklch
oklch(61.9% 0.147 128.9)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#89772D

Ochre · Sienna · Honey Gold

HEX
#89772D
RGB
rgb(137, 119, 45)
HSL
hsl(48, 51%, 36%)
HSB
hsb(48, 67%, 54%)
CMYK
cmyk(0%, 13%, 67%, 46%)
Oklch
oklch(57.1% 0.096 95.5)

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

#A3CDD9

Sky Blue · LightSteelBlue · Lake Green

HEX
#A3CDD9
RGB
rgb(163, 205, 217)
HSL
hsl(193, 42%, 75%)
HSB
hsb(193, 25%, 85%)
CMYK
cmyk(25%, 6%, 0%, 15%)
Oklch
oklch(82.2% 0.047 217.1)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0D0B16
12140A

Analogous

0A0D14
0D0B16
110A14

Triadic

0D0B16
140C0A
0A140C

Split-Comp.

0D0B16
14110A
0D140A

Tetradic

0D0B16
140A0D
12140A
0A1411

Contrast Matrix WCAG 2.1 Contrast

0D0B16
057163
6A9625
89772D
A3CDD9
—
3.3
AA Large
5.6
AA
4.4
AA Large
11.4
AAA
3.3
AA Large
—
1.7
Fail
1.3
Fail
3.5
AA Large
5.6
AA
1.7
Fail
—
1.3
Fail
2.0
Fail
4.4
AA Large
1.3
Fail
1.3
Fail
—
2.6
Fail
11.4
AAA
3.5
AA Large
2.0
Fail
2.6
Fail
—
White BG
19.5AAA
5.9AA
3.5AA Large
4.4AA Large
1.7Fail
Black BG
1.1Fail
3.5AA Large
6.0AA
4.7AA
12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0C0C13
343566
7D7D40
81813F
B5B6D6

Deuteranopia

0C0C13
2E2567
7B7747
828443
B3B0D5

Tritanopia

0D1111
0A696A
6C565B
884D50
A5D4D3

Achromatopsia

0D0D0D
4F4F4F
7C7C7C
747474
C2C2C2

Shades & Tints Shades & Tints

#0D0B16

Dark
Light

#057163

Dark
Light

#6A9625

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0d0b16;
  --color-2: #057163;
  --color-3: #6a9625;
  --color-4: #89772d;
  --color-5: #a3cdd9;
}

SCSS

$color-1: #0d0b16;
$color-2: #057163;
$color-3: #6a9625;
$color-4: #89772d;
$color-5: #a3cdd9;

TAILWIND

colors: {
  'brand-1': '#0d0b16',
  'brand-2': '#057163',
  'brand-3': '#6a9625',
  'brand-4': '#89772d',
  'brand-5': '#a3cdd9',
}

RGB Array

[13, 11, 22], [5, 113, 99], [106, 150, 37], [137, 119, 45], [163, 205, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0D0B16, #057163, #6A9625, #89772D, #A3CDD9 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: #0d0b16; --color-2: #057163; --color-3: #6a9625; --color-4: #89772d; --color-5: #a3cdd9. 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