← Back to Editor

#0C0A13 · #565B65 · #888689 · #BDC7C9 · #F3E6D4

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

#0C0A13

Deep Indigo · Black · Deep Sea Blue

HEX
#0C0A13
RGB
rgb(12, 10, 19)
HSL
hsl(253, 31%, 6%)
HSB
hsb(253, 47%, 7%)
CMYK
cmyk(37%, 47%, 0%, 93%)
Oklch
oklch(15.2% 0.019 294.2)

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

#565B65

Indigo · DimGray · Charcoal

HEX
#565B65
RGB
rgb(86, 91, 101)
HSL
hsl(220, 8%, 37%)
HSB
hsb(220, 15%, 40%)
CMYK
cmyk(15%, 10%, 0%, 60%)
Oklch
oklch(47.0% 0.017 264.4)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#888689

Ash · Gray · Warm Gray

HEX
#888689
RGB
rgb(136, 134, 137)
HSL
hsl(280, 1%, 53%)
HSB
hsb(280, 2%, 54%)
CMYK
cmyk(1%, 2%, 0%, 46%)
Oklch
oklch(62.3% 0.005 314.8)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#BDC7C9

Sky Blue · Silver · Glacier Blue

HEX
#BDC7C9
RGB
rgb(189, 199, 201)
HSL
hsl(190, 10%, 76%)
HSB
hsb(190, 6%, 79%)
CMYK
cmyk(6%, 1%, 0%, 21%)
Oklch
oklch(82.3% 0.011 211.0)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#F3E6D4

Goose Yellow · Beige · Peach Orange

HEX
#F3E6D4
RGB
rgb(243, 230, 212)
HSL
hsl(35, 56%, 89%)
HSB
hsb(35, 13%, 95%)
CMYK
cmyk(0%, 5%, 13%, 5%)
Oklch
oklch(93.0% 0.028 76.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0C0A13
12140B

Analogous

0B0D14
0C0A13
110B14

Triadic

0C0A13
140D0B
0B140D

Split-Comp.

0C0A13
14110B
0D140B

Tetradic

0C0A13
140B0D
12140B
0B1411

Contrast Matrix WCAG 2.1 Contrast

0C0A13
565B65
888689
BDC7C9
F3E6D4
—
2.9
Fail
5.4
AA
11.4
AAA
16.0
AAA
2.9
Fail
—
1.9
Fail
4.0
AA Large
5.5
AA
5.4
AA
1.9
Fail
—
2.1
Fail
2.9
Fail
11.4
AAA
4.0
AA Large
2.1
Fail
—
1.4
Fail
16.0
AAA
5.5
AA
2.9
Fail
1.4
Fail
—
White BG
19.7AAA
6.8AA
3.6AA Large
1.7Fail
1.2Fail
Black BG
1.1Fail
3.1AA Large
5.8AA
12.2AAA
17.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0B0B11
585863
878788
C1C1C9
EDEDD8

Deuteranopia

0B0B10
585862
878788
C1C0C8
EEEFD9

Tritanopia

0C0F0F
566160
888888
BDC8C8
F2DCDD

Achromatopsia

0C0C0C
5B5B5B
878787
C4C4C4
E8E8E8

Shades & Tints Shades & Tints

#0C0A13

Dark
Light

#565B65

Dark
Light

#888689

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0c0a13;
  --color-2: #565b65;
  --color-3: #888689;
  --color-4: #bdc7c9;
  --color-5: #f3e6d4;
}

SCSS

$color-1: #0c0a13;
$color-2: #565b65;
$color-3: #888689;
$color-4: #bdc7c9;
$color-5: #f3e6d4;

TAILWIND

colors: {
  'brand-1': '#0c0a13',
  'brand-2': '#565b65',
  'brand-3': '#888689',
  'brand-4': '#bdc7c9',
  'brand-5': '#f3e6d4',
}

RGB Array

[12, 10, 19], [86, 91, 101], [136, 134, 137], [189, 199, 201], [243, 230, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0C0A13, #565B65, #888689, #BDC7C9, #F3E6D4 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #0c0a13; --color-2: #565b65; --color-3: #888689; --color-4: #bdc7c9; --color-5: #f3e6d4. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. Restrained colors convey professionalism and trust. 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