Named color · #16A5A3
Royal Cloak
Royal Cloak is #16A5A3: rgb(22 165 163), hsl(179 76% 37%), oklch(0.655 0.109 193.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Teal mean? → · Royal Cloak color name →
#16A5A3
oklch(0.655 0.109 193.3)
Color conversions
- HEX
- #16a5a3
- RGB
- rgb(22 165 163)
- HSL
- hsl(179 76% 37%)
- HWB
- hwb(179 9% 35%)
- OKLCH
- oklch(0.655 0.109 193.3)
- OKLab
- oklab(0.655 -0.106 -0.025)
- CIE Lab
- lab(61.11 -36 -9.51)
- LCH
- lch(61.11 37.23 194.8)
- CMYK
- cmyk(87% 0% 1% 35%)
Tints · Shades · Tones
Tints
- 41AEAC
- 5CB7B5
- 74C0BE
- 89C9C7
- 9ED2D0
- B2DBD9
- C5E4E3
- D9EDEC
- ECF6F6
Shades
- 128F8D
- 0D7978
- 096563
- 06514F
- 033D3C
- 022B2A
- 011A19
- 000A0A
- 000101
Tones
- 31A19F
- 419E9C
- 4E9A98
- 589795
- 609391
- 688F8E
- 6F8C8A
- 758887
- 7B8483
Color harmonies
Complementary +180°
- 16A5A3
Royal Cloak
- CA737D
≈ Trout Pout
Analogous -30° +30°
- 16A5A3
Royal Cloak
- 46A57E
≈ Shamrock Green
- 2F9FC1
≈ Major Blue
Triadic +120° +240°
- 16A5A3
Royal Cloak
- A87CC0
≈ Wisteria
- B8853D
≈ Amber Essence
Split-complementary +150° +210°
- 16A5A3
Royal Cloak
- BF75A2
≈ Hollyhock Blossom Pink
- C87959
≈ Gold Pheasant
Tetradic +90° +180° +270°
- 16A5A3
Royal Cloak
- 8887D1
≈ Brocade
- CA737D
≈ Trout Pout
- 9C933C
≈ Gecko
Contrast & accessibility
Ag
FailOn white
WCAG 3.02:1 · APCA Lc 56
Ag
AAOn black
WCAG 6.94:1 · APCA Lc 45
Best text color: #000000
WCAG 6.94:1 (AA) · APCA Lc 45
Contrast pairs
Code snippets
CSS
:root {
--royal-cloak: #16a5a3;
--royal-cloak-rgb: 22 165 163;
--royal-cloak-oklch: oklch(0.655 0.109 193.3);
}
.element {
color: var(--royal-cloak);
background-color: hsl(179 76% 37%);
border-color: oklch(0.655 0.109 193.3);
}Tailwind CSS v4
@theme {
--color-royal-cloak: #16a5a3;
--color-royal-cloak-50: #d2ffff;
--color-royal-cloak-100: #bef4f3;
--color-royal-cloak-200: #9ce3e3;
--color-royal-cloak-300: #6fc9c9;
--color-royal-cloak-400: #3cb2b0;
--color-royal-cloak-500: #009c9a;
--color-royal-cloak-600: #008482;
--color-royal-cloak-700: #006a68;
--color-royal-cloak-800: #004e4b;
--color-royal-cloak-900: #003634;
--color-royal-cloak-950: #002120;
}SCSS
$royal-cloak: #16a5a3;
$royal-cloak-rgb: 22, 165, 163;
$royal-cloak-light: mix(#fff, $royal-cloak, 20%);
$royal-cloak-dark: mix(#000, $royal-cloak, 20%);
.element {
color: $royal-cloak;
box-shadow: 0 0 0 2px rgba($royal-cloak, 0.35);
}