← Back to Editor

#9DBFDF · #547CA1 · #3E6587 · #284561 · #071A2B

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#9DBFDF

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#9DBFDF
RGB
rgb(157, 191, 223)
HSL
hsl(209, 51%, 75%)
HSB
hsb(209, 30%, 87%)
CMYK
cmyk(30%, 14%, 0%, 13%)
Oklch
oklch(79.1% 0.059 247.0)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#547CA1

Slate Blue · SteelBlue · Navy Blue

HEX
#547CA1
RGB
rgb(84, 124, 161)
HSL
hsl(209, 31%, 48%)
HSB
hsb(209, 48%, 63%)
CMYK
cmyk(48%, 23%, 0%, 37%)
Oklch
oklch(57.2% 0.073 247.3)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#3E6587

Slate Blue · DarkSlateBlue · Prussian Blue

HEX
#3E6587
RGB
rgb(62, 101, 135)
HSL
hsl(208, 37%, 39%)
HSB
hsb(208, 54%, 53%)
CMYK
cmyk(54%, 25%, 0%, 47%)
Oklch
oklch(49.3% 0.070 246.2)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#284561

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#284561
RGB
rgb(40, 69, 97)
HSL
hsl(209, 42%, 27%)
HSB
hsb(209, 59%, 38%)
CMYK
cmyk(59%, 29%, 0%, 62%)
Oklch
oklch(38.1% 0.060 248.8)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#071A2B

Lake Blue · Black · Deep Sea Blue

HEX
#071A2B
RGB
rgb(7, 26, 43)
HSL
hsl(208, 72%, 10%)
HSB
hsb(208, 84%, 17%)
CMYK
cmyk(84%, 40%, 0%, 83%)
Oklch
oklch(21.2% 0.042 247.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DBFDF
E0BE9F

Analogous

9FE0DF
9DBFDF
9FA0E0

Triadic

9DBFDF
E09FC0
C0E09F

Split-Comp.

9DBFDF
E09FA0
E0DF9F

Tetradic

9DBFDF
DF9FE0
E0BE9F
A0E09F

Contrast Matrix WCAG 2.1 Contrast

9DBFDF
547CA1
3E6587
284561
071A2B
—
2.3
Fail
3.2
AA Large
5.2
AA
9.2
AAA
2.3
Fail
—
1.4
Fail
2.3
Fail
4.0
AA Large
3.2
AA Large
1.4
Fail
—
1.6
Fail
2.9
Fail
5.2
AA
2.3
Fail
1.6
Fail
—
1.8
Fail
9.2
AAA
4.0
AA Large
2.9
Fail
1.8
Fail
—
White BG
1.9Fail
4.4AA Large
6.1AA
9.9AAA
17.6AAA
Black BG
11.0AAA
4.8AA
3.4AA Large
2.1Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACACD7
656698
4F4F7F
35355A
0F0F27

Deuteranopia

AAA7D5
636096
4D4A7D
333159
0E0D26

Tritanopia

9FD1D0
56918F
407877
295554
082423

Achromatopsia

B8B8B8
747474
5D5D5D
404040
161616

Shades & Tints Shades & Tints

#9DBFDF

Dark
Light

#547CA1

Dark
Light

#3E6587

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9dbfdf;
  --color-2: #547ca1;
  --color-3: #3e6587;
  --color-4: #284561;
  --color-5: #071a2b;
}

SCSS

$color-1: #9dbfdf;
$color-2: #547ca1;
$color-3: #3e6587;
$color-4: #284561;
$color-5: #071a2b;

TAILWIND

colors: {
  'brand-1': '#9dbfdf',
  'brand-2': '#547ca1',
  'brand-3': '#3e6587',
  'brand-4': '#284561',
  'brand-5': '#071a2b',
}

RGB Array

[157, 191, 223], [84, 124, 161], [62, 101, 135], [40, 69, 97], [7, 26, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #9DBFDF, #547CA1, #3E6587, #284561, #071A2B 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: #9dbfdf; --color-2: #547ca1; --color-3: #3e6587; --color-4: #284561; --color-5: #071a2b. 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 dark-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