← Back to Editor

#262626 · #475959 · #689493 · #9DC4C4 · #EBDDC7

dark

A 5-color dark 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

#262626

Ink Black · DarkSlateGray · Dark Stone

HEX
#262626
RGB
rgb(38, 38, 38)
HSL
hsl(0, 0%, 15%)
HSB
hsb(0, 0%, 15%)
CMYK
cmyk(0%, 0%, 0%, 85%)
Oklch
oklch(26.9% 0.000 89.9)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

#475959

Slate Blue · DarkSlateGray · Mint Ice

HEX
#475959
RGB
rgb(71, 89, 89)
HSL
hsl(180, 11%, 31%)
HSB
hsb(180, 20%, 35%)
CMYK
cmyk(20%, 0%, 0%, 65%)
Oklch
oklch(44.9% 0.022 196.4)

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

#689493

Mineral Blue · CadetBlue · Mint Ice

HEX
#689493
RGB
rgb(104, 148, 147)
HSL
hsl(179, 17%, 49%)
HSB
hsb(179, 30%, 58%)
CMYK
cmyk(30%, 0%, 1%, 42%)
Oklch
oklch(63.4% 0.048 194.2)

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

#9DC4C4

Sky Blue · LightSteelBlue · Lake Green

HEX
#9DC4C4
RGB
rgb(157, 196, 196)
HSL
hsl(180, 25%, 69%)
HSB
hsb(180, 20%, 77%)
CMYK
cmyk(20%, 0%, 0%, 23%)
Oklch
oklch(79.2% 0.041 196.3)

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

#EBDDC7

Goose Yellow · Bisque · Peach Orange

HEX
#EBDDC7
RGB
rgb(235, 221, 199)
HSL
hsl(37, 47%, 85%)
HSB
hsb(37, 15%, 92%)
CMYK
cmyk(0%, 6%, 15%, 8%)
Oklch
oklch(90.3% 0.033 79.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

262626
262626

Analogous

262626
262626
262626

Triadic

262626
262626
262626

Split-Comp.

262626
262626
262626

Tetradic

262626
262626
262626
262626

Contrast Matrix WCAG 2.1 Contrast

262626
475959
689493
9DC4C4
EBDDC7
—
2.0
Fail
4.5
AA
8.0
AAA
11.3
AAA
2.0
Fail
—
2.2
Fail
3.9
AA Large
5.5
AA
4.5
AA
2.2
Fail
—
1.8
Fail
2.5
Fail
8.0
AAA
3.9
AA Large
1.8
Fail
—
1.4
Fail
11.3
AAA
5.5
AA
2.5
Fail
1.4
Fail
—
White BG
15.1AAA
7.4AAA
3.4AA Large
1.9Fail
1.3Fail
Black BG
1.4Fail
2.8Fail
6.2AA
11.1AAA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

262626
4F4F59
7B7B93
AEAEC4
E5E5CC

Deuteranopia

262626
4E4C59
797593
ACA9C4
E6E7CE

Tritanopia

262626
485959
6A9393
9FC4C4
EAD1D1

Achromatopsia

262626
545454
878787
B8B8B8
DFDFDF

Shades & Tints Shades & Tints

#262626

Dark
Light

#475959

Dark
Light

#689493

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #262626;
  --color-2: #475959;
  --color-3: #689493;
  --color-4: #9dc4c4;
  --color-5: #ebddc7;
}

SCSS

$color-1: #262626;
$color-2: #475959;
$color-3: #689493;
$color-4: #9dc4c4;
$color-5: #ebddc7;

TAILWIND

colors: {
  'brand-1': '#262626',
  'brand-2': '#475959',
  'brand-3': '#689493',
  'brand-4': '#9dc4c4',
  'brand-5': '#ebddc7',
}

RGB Array

[38, 38, 38], [71, 89, 89], [104, 148, 147], [157, 196, 196], [235, 221, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #262626, #475959, #689493, #9DC4C4, #EBDDC7 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: #262626; --color-2: #475959; --color-3: #689493; --color-4: #9dc4c4; --color-5: #ebddc7. 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 dark-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