What are the hex codes in the Turquoise & Periwinkle Trail palette?

The Turquoise & Periwinkle Trail color palette consists of Obsidian #080F10, Turquoise #00D0E0, Periwinkle #B1C2FF, Glacier #ADE6FF.

How should I use the Turquoise & Periwinkle Trail palette on a website?

Use Glacier #ADE6FF as the background, Obsidian #080F10 for text, Turquoise #00D0E0 for buttons and links, and Periwinkle #B1C2FF for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Glacier at 14.31:1.

Which colors in Turquoise & Periwinkle Trail have enough contrast for text?

The highest-contrast pair is #080F10 on #ADE6FF with a ratio of 14.31:1, which passes WCAG AA for normal text.

#080F10Obsidian

#00D0E0Turquoise

#B1C2FFPeriwinkle

#ADE6FFGlacier

Turquoise & Periwinkle Trail color palette

Cold Black Teal Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Obsidian	`#080F10`	`rgb(8, 15, 16)`	`hsl(188, 33%, 5%)`	`oklch(16.2% 0.011 207)`
Turquoise	`#00D0E0`	`rgb(0, 208, 224)`	`hsl(184, 100%, 44%)`	`oklch(78.2% 0.134 205)`
Periwinkle	`#B1C2FF`	`rgb(177, 194, 255)`	`hsl(227, 100%, 85%)`	`oklch(82.3% 0.088 272)`
Glacier	`#ADE6FF`	`rgb(173, 230, 255)`	`hsl(198, 100%, 84%)`	`oklch(89.4% 0.067 227)`

Why it works and how to use it

Turquoise & Periwinkle Trail is a vivid analogous color palette tagged cold, black, teal. Analogous neighbors on the wheel (Turquoise, Periwinkle, Glacier) give it a natural, low-tension flow. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is cool.

With 3 chromatic colors, Turquoise takes the lead while the rest support. Lightness runs from 5% to 85%. Well suited to websites, presentations and branding.

Background: Glacier (#ADE6FF) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#080F10) on #ADE6FF gives 14.31:1, passing WCAG AAA.
Primary: Turquoise (#00D0E0) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Periwinkle (#B1C2FF) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Turquoise & Periwinkle Trail

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

#080F10

#00D0E0

#B1C2FF

#ADE6FF

Color-blind check: under protanopia and deuteranopia, Turquoise and Periwinkle become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#080F10` on `#ADE6FF`	Aa	14.31:1	AAA
`#080F10` on `#B1C2FF`	Aa	11.08:1	AAA
`#080F10` on `#00D0E0`	Aa	10.22:1	AAA
`#00D0E0` on `#ADE6FF`	Aa	1.4:1	Fail
`#B1C2FF` on `#ADE6FF`	Aa	1.29:1	Fail
`#00D0E0` on `#B1C2FF`	Aa	1.08:1	Fail

:root {
  --obsidian: #080F10;
  --turquoise: #00D0E0;
  --periwinkle: #B1C2FF;
  --glacier: #ADE6FF;
}

$obsidian: #080F10;
$turquoise: #00D0E0;
$periwinkle: #B1C2FF;
$glacier: #ADE6FF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'obsidian': '#080F10',
        'turquoise': '#00D0E0',
        'periwinkle': '#B1C2FF',
        'glacier': '#ADE6FF',
      },
    },
  },
};

{
  "name": "Turquoise & Periwinkle Trail",
  "colors": [
    "#080F10",
    "#00D0E0",
    "#B1C2FF",
    "#ADE6FF"
  ]
}

background: linear-gradient(135deg, #080F10, #00D0E0, #B1C2FF, #ADE6FF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-11-01 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood