#A4C5FF
#9D93FF
#C049FF
#160819
#00090BObsidian
#7C49FFViolet
#008996Teal
#00A7E4Cyan
Violet & Cyan Drift is a vivid dark, split color palette tagged cyberpunk, neon, cold. A split scheme: Violet plays against Cyan across roughly 72° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is cool.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Obsidian | #00090B | rgb(0, 9, 11) | hsl(191, 100%, 2%) | oklch(12.8% 0.022 207) | |
| Violet | #7C49FF | rgb(124, 73, 255) | hsl(257, 100%, 64%) | oklch(57.4% 0.251 289) | |
| Teal | #008996 | rgb(0, 137, 150) | hsl(185, 100%, 29%) | oklch(57.6% 0.099 207) | |
| Cyan | #00A7E4 | rgb(0, 167, 228) | hsl(196, 100%, 45%) | oklch(68.6% 0.143 234) |
Why it works and how to use it
With 3 chromatic colors, Violet takes the lead while the rest support. Lightness runs from 2% to 64%. Well suited to dark-mode interfaces and gaming.
- Background: Cyan (#00A7E4) is the lightest color, so it belongs on large surfaces.
- Text: Obsidian (#00090B) on #00A7E4 gives 7.33:1, passing WCAG AAA.
- Primary: Violet (#7C49FF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Teal (#008996) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Cyan at 7.33:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Violet & Cyan Drift
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#00090B
#7C49FF
#008996
#00A7E4
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#00090B on #00A7E4 | Aa | 7.33:1 | AAA |
#00090B on #008996 | Aa | 4.81:1 | AA |
#00090B on #7C49FF | Aa | 4.08:1 | AA large only |
#7C49FF on #00A7E4 | Aa | 1.8:1 | Fail |
#008996 on #00A7E4 | Aa | 1.52:1 | Fail |
#7C49FF on #008996 | Aa | 1.18:1 | Fail |
Similar palettes 24 more in this mood
#170A1D
#895DE6
#0093D1
#DE3BF3
#121826
#8A2BE2
#00FFC6
#F0F0FF
#EDA6FF
#F46CB5
#865DFF
#280F1D
#80BAFF
#BB7FFF
#858BFF
#0F020E
#271730
#FF2C8B
#E87E00
#DF70D3
#00B2B7
#FF12AE
#E33B86
#23091F
#EF84FF
#F53538
#EA1F90
#0F0B12
#00131D
#008AC5
#84A7FF
#F591FF
#10002B
#5A189A
#9D4EDD
#E0AAFF
#0A0F1F
#304375
#00E5FF
#FF3C7E
#301427
#FA00BD
#BBB8FF
#F8A1FF
#FFA251
#F23D8D
#008999
#012324
#001526
#F40051
#0094BC
#BC7F00
#7D75FF
#0092C9
#1F7EFF
#000915
#130C12
#FF55AE
#FA42F9
#FFB6BA
#0C1D27
#6757FF
#6CABFF
#DABFFF
#FF8D6F
#EF6400
#00A5C1
#001518
#020A0C
#00898E
#F44A35
#00A3B8
#11060E
#E547AE
#FF2B82
#FF7777
#250916
#CA1F8A
#C866CF
#BE97FF
#262D3C
#A049FD
#C9FFEA
#F9F9FF
#00141A
#FF2353
#DC9900
#3ECBFF
#000D0F
#1479F9
#898BFF
#00D2F1