uiwheel
Open Wheel
Base Hex: #06B6D4

Cyberpunk Cyan Color Wheel & UI Harmonies

#07B6D5Hue 189°complementary

Drag the handle around the wheel or use sliders below

RGB(7, 182, 213)
Hue Angle189°
Saturation94%
Lightness43%

Generated Harmonies (2 Colors)

Primary Base

#07B6D5

oklch(0.715 0.126 215.9)

Complementary

#D52607

oklch(0.563 0.212 31.6)

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 (#D52607)
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
Primary Base
#07B6D5
2.42:1(Fail)
7.90:1(AAA)
Best on Dark UI / Buttons
Complementary
#D52607
5.11:1(AA)
3.75:1(AA (large text))
Best on Light UI / Backgrounds
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: '#F4F9FA',
          100: '#E6F2F4',
          200: '#B0F1FD',
          300: '#7EE8FB',
          400: '#43DEF9',
          500: '#07B6D5',
          600: '#06B2D0',
          700: '#0590A8',
          800: '#046A7C',
          900: '#004A57',
          950: '#002B33',
        },
        secondary: '#D52607',
        accent: '#10B981',
      }
    }
  }
};
Color Architecture & Design Systems

How to Use Cyberpunk Cyan in Digital Product Design

Cyberpunk Cyan (189° hue) radiates futuristic energy, hyper-speed computation, and neon aesthetics. It is designed to pierce through pure black and dark slate environments, giving telemetry dashboards and crypto platforms an avant-garde digital pulse.

✓Recommended UI Applications

Glowing border borders, terminal prompts, real-time charts, telemetry meters, and dark-mode pill tags. Combine with hot magenta or neon amber for full synthwave aesthetic.

⚠Accessibility & Contrast Guidelines

Cyberpunk Cyan against dark surfaces (#090D16) achieves an enormous 9.2:1 AAA contrast ratio. Against pure white, use Cyan 800 (#155E75) to prevent eye wash.

Curated UI Pairings for Cyberpunk Cyan

Expertly tested color coordinates that harmonize with Cyberpunk Cyan without visual clashes.

Neon Fuchsia

#D946EF

Electrifying complementary duel for maximum cyberpunk drama.

Obsidian Canvas

#030712

Deep black abyss allowing neon photons to glow cleanly without banding.

Matrix Lime

#84CC16

Triadic terminal green for healthy telemetry and live socket status.

Cyberpunk Cyan Design System Token Specifications

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

HEX CODE

#06B6D4

RGB VALUE

rgb(6, 182, 212)

HSL VALUE

hsl(189°, 94%, 43%)

OKLCH VALUE

oklch(0.715 0.126 215.2)

Target Industries:Web3 & BlockchainGaming & EsportsDevOps DashboardsAI Infrastructure

Frequently Asked Questions About Cyberpunk Cyan

What primary role should Cyberpunk Cyan take in a digital interface?

Cyberpunk Cyan (189° hue) radiates futuristic energy, hyper-speed computation, and neon aesthetics. It is designed to pierce through pure black and dark slate environments, giving telemetry dashboards and crypto platforms an avant-garde digital pulse. 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 Cyberpunk Cyan?

Cyberpunk Cyan against dark surfaces (#090D16) achieves an enormous 9.2:1 AAA contrast ratio. Against pure white, use Cyan 800 (#155E75) to prevent eye wash. Always verify text and background luminance ratios using our real-time WCAG matrix table above before shipping to production.

How can I import Cyberpunk Cyan 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.