#80BAFF
#BB7FFF
#858BFF
#0F020E
#00131DObsidian
#008AC5Steel Blue
#84A7FFCornflower
#F591FFMauve
Synth Mauve & Cornflower is a vivid split color palette tagged cyberpunk, cold, black. A split scheme: Steel Blue plays against Mauve across roughly 97° 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 | #00131D | rgb(0, 19, 29) | hsl(201, 100%, 6%) | oklch(17.5% 0.035 231) | |
| Steel Blue | #008AC5 | rgb(0, 138, 197) | hsl(198, 100%, 39%) | oklch(60.1% 0.132 237) | |
| Cornflower | #84A7FF | rgb(132, 167, 255) | hsl(223, 100%, 76%) | oklch(73.9% 0.134 267) | |
| Mauve | #F591FF | rgb(245, 145, 255) | hsl(295, 100%, 78%) | oklch(79.9% 0.182 324) |
Why it works and how to use it
It works because the lightness range is wide (6% to 78%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Mauve (#F591FF) is the lightest color, so it belongs on large surfaces.
- Text: Obsidian (#00131D) on #F591FF gives 9.34:1, passing WCAG AAA.
- Primary: Steel Blue (#008AC5) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Cornflower (#84A7FF) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Mauve at 9.34:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Synth Mauve & Cornflower
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
#00131D
#008AC5
#84A7FF
#F591FF
Color-blind check: under protanopia, Cornflower and Mauve become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#00131D on #F591FF | Aa | 9.34:1 | AAA |
#00131D on #84A7FF | Aa | 8.06:1 | AAA |
#00131D on #008AC5 | Aa | 4.9:1 | AA |
#008AC5 on #F591FF | Aa | 1.91:1 | Fail |
#008AC5 on #84A7FF | Aa | 1.65:1 | Fail |
#84A7FF on #F591FF | Aa | 1.16:1 | Fail |
Similar palettes 24 more in this mood
#A4C5FF
#9D93FF
#C049FF
#160819
#170A1D
#895DE6
#0093D1
#DE3BF3
#00090B
#7C49FF
#008996
#00A7E4
#7D75FF
#0092C9
#1F7EFF
#000915
#000D0F
#1479F9
#898BFF
#00D2F1
#10002B
#5A189A
#9D4EDD
#E0AAFF
#00CEAD
#00B856
#00A2CD
#001D21
#121826
#8A2BE2
#00FFC6
#F0F0FF
#EDA6FF
#F46CB5
#865DFF
#280F1D
#001526
#F40051
#0094BC
#BC7F00
#0C1D27
#6757FF
#6CABFF
#DABFFF
#250916
#CA1F8A
#C866CF
#BE97FF
#51CCFF
#FF700F
#0088B0
#02080B
#271730
#FF2C8B
#E87E00
#DF70D3
#00141A
#FF2353
#DC9900
#3ECBFF
#EF84FF
#F53538
#EA1F90
#0F0B12
#09022E
#4823A4
#8658EC
#CDB4FF
#100311
#D04D00
#FF8294
#FF74D0
#301427
#FA00BD
#BBB8FF
#F8A1FF
#100113
#F44F92
#FF8B8E
#FF9EDF
#150F12
#E13F62
#FF86BC
#FFB4A3
#130C12
#FF55AE
#FA42F9
#FFB6BA
#FF8D6F
#EF6400
#00A5C1
#001518