Named color · #97BBC8
Sydney Harbour
Sydney Harbour is #97BBC8: rgb(151 187 200), hsl(196 31% 69%), oklch(0.77 0.043 221.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Cyan mean? → · Sydney Harbour color name →
#97BBC8
oklch(0.77 0.043 221.8)
Color conversions
- HEX
- #97bbc8
- RGB
- rgb(151 187 200)
- HSL
- hsl(196 31% 69%)
- HWB
- hwb(196 59% 22%)
- OKLCH
- oklch(0.77 0.043 221.8)
- OKLab
- oklab(0.77 -0.032 -0.029)
- CIE Lab
- lab(73.55 -10.34 -10.8)
- LCH
- lch(73.55 14.95 226.3)
- CMYK
- cmyk(25% 7% 0% 22%)
Tints · Shades · Tones
Tints
- A1C2CD
- ACC8D3
- B6CFD8
- C0D6DE
- CBDDE3
- D5E3E9
- DFEAEE
- EAF1F4
- F4F8F9
Shades
- 83A2AE
- 6F8A94
- 5C737B
- 495C63
- 37464C
- 263236
- 171F21
- 080D0F
- 010202
Tones
- 95B5C1
- 93AFB9
- 91A9B2
- 8EA3AB
- 8C9DA3
- 8A979C
- 879195
- 858C8E
- 828687
Color harmonies
Complementary +180°
- 97BBC8
Sydney Harbour
- CDAC9F
≈ Art Deco Pink
Analogous -30° +30°
- 97BBC8
Sydney Harbour
- 95BDBB
≈ Turner’s Light
- A1B7CF
≈ Misted Eve
Triadic +120° +240°
- 97BBC8
Sydney Harbour
- C8AABC
≈ Fragrant Lilac
- B9B696
≈ Bog
Split-complementary +150° +210°
- 97BBC8
Sydney Harbour
- CEAAAD
≈ Vista
- C6B097
≈ Nomadic Desert
Tetradic +90° +180° +270°
- 97BBC8
Sydney Harbour
- BDADC9
≈ Fancy Pansy
- CDAC9F
≈ Art Deco Pink
- AABA9E
≈ Laurel Green
Contrast & accessibility
Ag
FailOn white
WCAG 2.04:1 · APCA Lc 40
Ag
AAAOn black
WCAG 10.25:1 · APCA Lc 62
Best text color: #000000
WCAG 10.25:1 (AAA) · APCA Lc 62
Contrast pairs
Code snippets
CSS
:root {
--sydney-harbour: #97bbc8;
--sydney-harbour-rgb: 151 187 200;
--sydney-harbour-oklch: oklch(0.77 0.043 221.8);
}
.element {
color: var(--sydney-harbour);
background-color: hsl(196 31% 69%);
border-color: oklch(0.77 0.043 221.8);
}Tailwind CSS v4
@theme {
--color-sydney-harbour: #97bbc8;
--color-sydney-harbour-50: #e9f8fe;
--color-sydney-harbour-100: #d9ebf3;
--color-sydney-harbour-200: #c2d9e2;
--color-sydney-harbour-300: #a1bdc8;
--color-sydney-harbour-400: #83a5b1;
--color-sydney-harbour-500: #678d9b;
--color-sydney-harbour-600: #577783;
--color-sydney-harbour-700: #455f69;
--color-sydney-harbour-800: #32464d;
--color-sydney-harbour-900: #223035;
--color-sydney-harbour-950: #111d20;
}SCSS
$sydney-harbour: #97bbc8;
$sydney-harbour-rgb: 151, 187, 200;
$sydney-harbour-light: mix(#fff, $sydney-harbour, 20%);
$sydney-harbour-dark: mix(#000, $sydney-harbour, 20%);
.element {
color: $sydney-harbour;
box-shadow: 0 0 0 2px rgba($sydney-harbour, 0.35);
}