Named color · #88AAAA
Harbour Mist
Harbour Mist is #88AAAA: rgb(136 170 170), hsl(180 17% 60%), oklch(0.713 0.037 196.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Harbour Mist color name →
#88AAAA
oklch(0.713 0.037 196.3)
Color conversions
- HEX
- #88aaaa
- RGB
- rgb(136 170 170)
- HSL
- hsl(180 17% 60%)
- HWB
- hwb(180 53% 33%)
- OKLCH
- oklch(0.713 0.037 196.3)
- OKLab
- oklab(0.713 -0.036 -0.01)
- CIE Lab
- lab(67.08 -12.03 -4.05)
- LCH
- lch(67.08 12.69 198.6)
- CMYK
- cmyk(20% 0% 0% 33%)
Tints · Shades · Tones
Tints
- 94B2B2
- 9FBBBA
- ABC3C3
- B7CBCB
- C3D4D4
- CFDCDC
- DBE5E5
- E7EEEE
- F3F6F6
Shades
- 759393
- 637D7D
- 526868
- 415353
- 313F3F
- 222D2D
- 131B1B
- 060B0B
- 010101
Tones
- 87A6A6
- 87A1A1
- 869D9D
- 859999
- 859595
- 849191
- 838C8C
- 828888
- 818484
Color harmonies
Complementary +180°
- 88AAAA
Harbour Mist
- B9999A
≈ Twilight Blush
Analogous -30° +30°
- 88AAAA
Harbour Mist
- 8DAA9D
≈ Rare Happening
- 8BA8B4
≈ Pewter Blue
Triadic +120° +240°
- 88AAAA
Harbour Mist
- AC9CB2
≈ Veiled Violet
- B0A089
≈ Whitney Oaks
Split-complementary +150° +210°
- 88AAAA
Harbour Mist
- B599A7
≈ On the Nile
- B79C8F
≈ Postmodern Mauve
Tetradic +90° +180° +270°
- 88AAAA
Harbour Mist
- A09FB9
≈ Royal Mile
- B9999A
≈ Twilight Blush
- A5A48A
≈ Solid Snake
Contrast & accessibility
Ag
FailOn white
WCAG 2.50:1 · APCA Lc 49
Ag
AAAOn black
WCAG 8.37:1 · APCA Lc 53
Best text color: #000000
WCAG 8.37:1 (AAA) · APCA Lc 53
Contrast pairs
Code snippets
CSS
:root {
--harbour-mist: #88aaaa;
--harbour-mist-rgb: 136 170 170;
--harbour-mist-oklch: oklch(0.713 0.037 196.3);
}
.element {
color: var(--harbour-mist);
background-color: hsl(180 17% 60%);
border-color: oklch(0.713 0.037 196.3);
}Tailwind CSS v4
@theme {
--color-harbour-mist: #88aaaa;
--color-harbour-mist-50: #eaf9f9;
--color-harbour-mist-100: #daecec;
--color-harbour-mist-200: #c3d9da;
--color-harbour-mist-300: #a2bebe;
--color-harbour-mist-400: #86a6a6;
--color-harbour-mist-500: #698e8e;
--color-harbour-mist-600: #5a7878;
--color-harbour-mist-700: #476060;
--color-harbour-mist-800: #334746;
--color-harbour-mist-900: #233131;
--color-harbour-mist-950: #121d1d;
}SCSS
$harbour-mist: #88aaaa;
$harbour-mist-rgb: 136, 170, 170;
$harbour-mist-light: mix(#fff, $harbour-mist, 20%);
$harbour-mist-dark: mix(#000, $harbour-mist, 20%);
.element {
color: $harbour-mist;
box-shadow: 0 0 0 2px rgba($harbour-mist, 0.35);
}