uiwheel
Open Wheel
Base Hex: #334155

Charcoal Slate Color Wheel & UI Harmonies

#344256Hue 215°monochromatic

Drag the handle around the wheel or use sliders below

RGB(52, 66, 86)
Hue Angle215°
Saturation25%
Lightness27%

Generated Harmonies (4 Colors)

Deep Shade

#1D2530

oklch(0.262 0.024 256.4)

Primary Base

#344256

oklch(0.375 0.039 257.3)

Vibrant Tint

#456BA1

oklch(0.524 0.096 257.3)

Subtle Soft

#8293AB

oklch(0.658 0.041 257.0)

Design System Validation

Live UI Component Preview

UI

Apex Analytics

Team Dashboard

Harmonized Active
Total Conversion+18.4%

$84,290

Active Users+34.2%

14,820

Harmonic Health99.8%

Optimal

Interactive Button & State Styles

Verify clickability, state contrasts, and visual weight across primary and secondary controls.

Badge Tag (#456BA1)
Accessibility Audit

WCAG 2.1 Contrast Matrix

Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).

Color RoleHexOn Pure White (#FFF)On Dark Obsidian (#0B0F19)Recommended Usage
Deep Shade
#1D2530
15.45:1(AAA)
1.24:1(Fail)
Best on Light UI / Backgrounds
Primary Base
#344256
10.20:1(AAA)
1.88:1(Fail)
Best on Light UI / Backgrounds
Vibrant Tint
#456BA1
5.43:1(AA)
3.53:1(AA (large text))
Best on Light UI / Backgrounds
Subtle Soft
#8293AB
3.13:1(AA (large text))
6.12:1(AA)
Best on Dark UI / Buttons
Design Token Generator

50–950 Tailwind Shade Ramp

Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.

Developer Export Center

Ready-to-Use Code Snippets

// tailwind.config.js / CSS @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#F6F7F8',
          100: '#EAEDF0',
          200: '#CCD4E0',
          300: '#ACBACD',
          400: '#869AB6',
          500: '#1D2530',
          600: '#506786',
          700: '#41536C',
          800: '#303D50',
          900: '#1F2938',
          950: '#121821',
        },
        secondary: '#344256',
        accent: '#456BA1',
      }
    }
  }
};
Color Architecture & Design Systems

How to Use Charcoal Slate in Digital Product Design

Charcoal Slate (215° hue, low saturation) is the quiet backbone of modern design systems. Rather than using harsh, soulless pure black (#000000), top design systems use charcoal slate with a subtle blue undertone to create depth, luxury, and optical softness.

✓Recommended UI Applications

Primary body copy, structural borders, dropdown menu shells, neutral avatars, and secondary toolbars. It keeps typography razor-sharp while eliminating glare on retina displays.

⚠Accessibility & Contrast Guidelines

Charcoal 700 (#334155) delivers an outstanding 9.1:1 AAA contrast score on pure white. It is the gold standard for long-form readability.

Curated UI Pairings for Charcoal Slate

Expertly tested color coordinates that harmonize with Charcoal Slate without visual clashes.

Pure White Light

#FFFFFF

Pristine contrasting surface for paper-like readability.

Soft Zinc Border

#E2E8F0

Hairline dividers and subtle container borders.

Electric Blue Accent

#3B82F6

Precision pointer indicator for active navigation states.

Charcoal Slate Design System Token Specifications

Exact mathematical coordinates for design tokens, CSS variables, and modern style declarations.

HEX CODE

#334155

RGB VALUE

rgb(51, 65, 85)

HSL VALUE

hsl(215°, 25%, 27%)

OKLCH VALUE

oklch(0.372 0.039 257.3)

Target Industries:Design SystemsProductivity AppsDeveloper DocsArchitecture Studios

Frequently Asked Questions About Charcoal Slate

What primary role should Charcoal Slate take in a digital interface?

Charcoal Slate (215° hue, low saturation) is the quiet backbone of modern design systems. Rather than using harsh, soulless pure black (#000000), top design systems use charcoal slate with a subtle blue undertone to create depth, luxury, and optical softness. In software applications, it functions best as an intentional accent, call-to-action anchor, or branded container highlight rather than an overwhelming full-bleed background.

How do I maintain WCAG AA accessibility when using Charcoal Slate?

Charcoal 700 (#334155) delivers an outstanding 9.1:1 AAA contrast score on pure white. It is the gold standard for long-form readability. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.

How can I import Charcoal Slate into Tailwind CSS?

Use our Code Export Center above to copy the ready-made 11-step shade scale (50 to 950) directly into your Tailwind v4 @theme or v3 tailwind.config.js file.

Explore More

Related Design Color Wheels

View all wheels →

Aesthetic

#9D8DF1

Dreamy, Pinterest-inspired palette featuring Y2K pastels, cottagecore greens, and warm 70s vintage tones.

Soft Autumn

#B86B53

Muted, warm earth-toned palette from 12-season color analysis — featuring terracotta, olive, and warm taupe.

Deep Winter

#1E3A8A

High-contrast, jewel-toned palette from 12-season analysis — featuring obsidian navy, icy cobalt, and cool ruby.

Soft Summer

#9B8EB9

Cool, desaturated smoky pastel palette — featuring dusty lavender, slate denim, and sea mist sage.