What are the hex codes in the Magenta & Turquoise Sky palette?

The Magenta & Turquoise Sky color palette consists of Obsidian #10002B, Magenta #B00054, Mauve #E0AAFF, Turquoise #00F5D4.

How should I use the Magenta & Turquoise Sky palette on a website?

Use Turquoise #00F5D4 as the background, Obsidian #10002B for text, Magenta #B00054 for buttons and links, and Mauve #E0AAFF for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Turquoise at 14.2:1.

Which colors in Magenta & Turquoise Sky have enough contrast for text?

The highest-contrast pair is #10002B on #00F5D4 with a ratio of 14.2:1, which passes WCAG AA for normal text.

#10002BObsidian

#B00054Magenta

#E0AAFFMauve

#00F5D4Turquoise

Magenta & Turquoise Sky color palette

Dark Vibrant Black Purple Teal

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Obsidian	`#10002B`	`rgb(16, 0, 43)`	`hsl(262, 100%, 8%)`	`oklch(15.3% 0.085 294)`
Magenta	`#B00054`	`rgb(176, 0, 84)`	`hsl(331, 100%, 35%)`	`oklch(48.8% 0.197 3)`
Mauve	`#E0AAFF`	`rgb(224, 170, 255)`	`hsl(278, 100%, 83%)`	`oklch(81.7% 0.129 313)`
Turquoise	`#00F5D4`	`rgb(0, 245, 212)`	`hsl(172, 100%, 48%)`	`oklch(86.8% 0.160 178)`

Why it works and how to use it

Magenta & Turquoise Sky is a vivid complementary color palette tagged dark, vibrant, black. Near-complementary hues (about 159° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Magenta takes the lead while the rest support. Lightness runs from 8% to 83%. Well suited to websites, presentations and branding.

Background: Turquoise (#00F5D4) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#10002B) on #00F5D4 gives 14.2:1, passing WCAG AAA.
Primary: Magenta (#B00054) is the most saturated mid-tone; use it for buttons and links (5.05:1 against the background, fine for UI elements).
Accent: Mauve (#E0AAFF) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Turquoise at 14.2:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Magenta & Turquoise Sky

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#10002B

#B00054

#E0AAFF

#00F5D4

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#10002B` on `#00F5D4`	Aa	14.2:1	AAA
`#10002B` on `#E0AAFF`	Aa	10.75:1	AAA
`#B00054` on `#00F5D4`	Aa	5.05:1	AA
`#B00054` on `#E0AAFF`	Aa	3.82:1	AA large only
`#10002B` on `#B00054`	Aa	2.81:1	Fail
`#E0AAFF` on `#00F5D4`	Aa	1.32:1	Fail

:root {
  --obsidian: #10002B;
  --magenta: #B00054;
  --mauve: #E0AAFF;
  --turquoise: #00F5D4;
}

$obsidian: #10002B;
$magenta: #B00054;
$mauve: #E0AAFF;
$turquoise: #00F5D4;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'obsidian': '#10002B',
        'magenta': '#B00054',
        'mauve': '#E0AAFF',
        'turquoise': '#00F5D4',
      },
    },
  },
};

{
  "name": "Magenta & Turquoise Sky",
  "colors": [
    "#10002B",
    "#B00054",
    "#E0AAFF",
    "#00F5D4"
  ]
}

background: linear-gradient(135deg, #10002B, #B00054, #E0AAFF, #00F5D4);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-12-24 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood