#040F12
#00C7D1
#8EBBFF
#CAC6FF
#080F10Obsidian
#00D0E0Turquoise
#B1C2FFPeriwinkle
#ADE6FFGlacier
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.
Color codes click any value to copy
| Swatch | 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
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 SecondaryCard title
Card title
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.
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 |
Similar palettes 24 more in this mood
#5AA2D9
#8BB1FF
#00CED9
#5ED8FF
#160216
#B384FF
#94AAFF
#9BD1FF
#00C184
#64D2FC
#A9D875
#3DEEEC
#7CEAE6
#35D7FF
#74BDFD
#788BF6
#97C4FF
#00ACAF
#008EB6
#7251FE
#A4DCFF
#60D7D5
#00AF8D
#00A4BF
#0C050C
#B296FF
#EE70FF
#99D6FF
#00C6D3
#63B7FF
#6BD7FF
#CEDBFF
#8BCBFF
#00ED85
#27DEFF
#01F4DF
#009CD4
#3195FF
#00BAB8
#00D3F2
#31A3E1
#00C4AA
#00CBE0
#8DEFA2
#589DFF
#03BA89
#88DCFF
#01F1F4
#00B0CA
#79D213
#00ED9D
#58FDEE
#001A16
#00B6AE
#40D654
#C4F328
#00FAA0
#00E1D9
#87BB00
#000906
#54C3C7
#2DCCFF
#9BCAFF
#7AF0CE
#0D0500
#FF86EC
#8ECDFF
#FFD5B0
#00C187
#00C7C5
#94C173
#9DE4FF
#D9D8FF
#D9DF00
#B5A2FF
#0E120B
#001918
#00BDAA
#FB9500
#00E7D3
#7A91FF
#CBA6FF
#FF92EE
#87CBFF
#92A026
#39C137
#33CFA4
#2EDEE0
#3EF58F
#7DCD20
#00BFC0
#00A78A