Named color · #5CCBC7
Setting Sail
Setting Sail is #5CCBC7: rgb(92 203 199), hsl(178 52% 58%), oklch(0.777 0.101 192.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Setting Sail color name →
#5CCBC7
oklch(0.777 0.101 192.1)
Color conversions
- HEX
- #5ccbc7
- RGB
- rgb(92 203 199)
- HSL
- hsl(178 52% 58%)
- HWB
- hwb(178 36% 20%)
- OKLCH
- oklch(0.777 0.101 192.1)
- OKLab
- oklab(0.777 -0.099 -0.021)
- CIE Lab
- lab(75.24 -33.77 -8.17)
- LCH
- lch(75.24 34.74 193.6)
- CMYK
- cmyk(55% 0% 2% 20%)
Tints · Shades · Tones
Tints
- 71D0CD
- 83D6D2
- 94DBD8
- A5E0DD
- B4E5E3
- C4EBE8
- D3F0EE
- E2F5F4
- F0FAF9
Shades
- 4FB0AD
- 429693
- 367D7A
- 2A6562
- 1F4D4C
- 143736
- 0A2221
- 030F0E
- 000202
Tones
- 63C3C0
- 69BCB8
- 6EB4B1
- 72ADAA
- 76A5A3
- 799E9C
- 7B9695
- 7D8F8E
- 7F8787
Color harmonies
Complementary +180°
- 5CCBC7
Setting Sail
- EF9BA5
≈ Candy Coated
Analogous -30° +30°
- 5CCBC7
Setting Sail
- 77CBA3
≈ Minted Elegance
- 64C5E5
≈ Candid Blue
Triadic +120° +240°
- 5CCBC7
Setting Sail
- CCA4E6
≈ Tropical Violet
- DFAC6B
≈ Necrophilic Brown
Split-complementary +150° +210°
- 5CCBC7
Setting Sail
- E49DC9
≈ Sultan of Pink
- EEA183
≈ Mamey
Tetradic +90° +180° +270°
- 5CCBC7
Setting Sail
- ACAFF6
≈ Wondrous Wisteria
- EF9BA5
≈ Candy Coated
- C3B96A
≈ Linden Green
Contrast & accessibility
Ag
FailOn white
WCAG 1.94:1 · APCA Lc 37
Ag
AAAOn black
WCAG 10.82:1 · APCA Lc 65
Best text color: #000000
WCAG 10.82:1 (AAA) · APCA Lc 65
Contrast pairs
Code snippets
CSS
:root {
--setting-sail: #5ccbc7;
--setting-sail-rgb: 92 203 199;
--setting-sail-oklch: oklch(0.777 0.101 192.1);
}
.element {
color: var(--setting-sail);
background-color: hsl(178 52% 58%);
border-color: oklch(0.777 0.101 192.1);
}Tailwind CSS v4
@theme {
--color-setting-sail: #5ccbc7;
--color-setting-sail-50: #d5fffe;
--color-setting-sail-100: #c2f3f2;
--color-setting-sail-200: #a1e2e1;
--color-setting-sail-300: #75c8c6;
--color-setting-sail-400: #48b1ae;
--color-setting-sail-500: #009b97;
--color-setting-sail-600: #008380;
--color-setting-sail-700: #006967;
--color-setting-sail-800: #004d4a;
--color-setting-sail-900: #023633;
--color-setting-sail-950: #00211f;
}SCSS
$setting-sail: #5ccbc7;
$setting-sail-rgb: 92, 203, 199;
$setting-sail-light: mix(#fff, $setting-sail, 20%);
$setting-sail-dark: mix(#000, $setting-sail, 20%);
.element {
color: $setting-sail;
box-shadow: 0 0 0 2px rgba($setting-sail, 0.35);
}