Cor nomeada · #16F8FF
Hey Blue!
Hey Blue! é #16F8FF: rgb(22 248 255), hsl(182 100% 54%), oklch(0.89 0.149 198.5). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Teal mean? → · Hey Blue! color name →
#16F8FF
oklch(0.89 0.149 198.5)
Conversões de cor
- HEX
- #16f8ff
- RGB
- rgb(22 248 255)
- HSL
- hsl(182 100% 54%)
- HWB
- hwb(182 9% 0%)
- OKLCH
- oklch(0.89 0.149 198.5)
- OKLab
- oklab(0.89 -0.142 -0.047)
- CIE Lab
- lab(88.7 -47.45 -17.87)
- LCH
- lch(88.7 50.7 200.6)
- CMYK
- cmyk(91% 3% 0% 0%)
Tons claros · Sombras · Tons
Tons claros
- 52F9FF
- 71FAFF
- 89FBFF
- 9EFCFF
- B1FDFF
- C2FDFF
- D2FEFF
- E2FEFF
- F1FFFF
Sombras
- 12D8DE
- 0DB8BE
- 099A9E
- 067C80
- 036063
- 024548
- 012C2E
- 001516
- 000303
Tons
- 3EECF2
- 52DFE4
- 5FD3D7
- 69C7CA
- 70BBBE
- 76AFB1
- 7AA3A5
- 7D9798
- 7F8C8C
Harmonias de cor
Complementar +180°
- 16F8FF
Hey Blue!
- FFCCCC
≈ Lusty-Gallant
Análoga -30° +30°
- 16F8FF
Hey Blue!
- 5EFAC9
≈ Rare Wind
- ABE4FF
≈ Frozen Landscape
Tríade +120° +240°
- 16F8FF
Hey Blue!
- F3CAFF
≈ Sparkling Lavender
- FFD38D
≈ Honey Bird
Complementar dividida +150° +210°
- 16F8FF
Hey Blue!
- FFC9E2
≈ Cherry Blush
- FFCFB6
≈ Apricot Lily
Tétrade +90° +180° +270°
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.32:1 · APCA Lc 15
Ag
AAASobre preto
WCAG 15.90:1 · APCA Lc 89
Melhor cor de texto: #000000
WCAG 15.90:1 (AAA) · APCA Lc 89
Contrast pairs
Trechos de código
CSS
:root {
--hey-blue: #16f8ff;
--hey-blue-rgb: 22 248 255;
--hey-blue-oklch: oklch(0.89 0.149 198.5);
}
.element {
color: var(--hey-blue);
background-color: hsl(182 100% 54%);
border-color: oklch(0.89 0.149 198.5);
}Tailwind CSS v4
@theme {
--color-hey-blue: #16f8ff;
--color-hey-blue-50: #c3ffff;
--color-hey-blue-100: #acf8fc;
--color-hey-blue-200: #80e8ee;
--color-hey-blue-300: #3bced6;
--color-hey-blue-400: #00b8bf;
--color-hey-blue-500: #00a1aa;
--color-hey-blue-600: #008890;
--color-hey-blue-700: #006d73;
--color-hey-blue-800: #005154;
--color-hey-blue-900: #00383a;
--color-hey-blue-950: #002324;
}SCSS
$hey-blue: #16f8ff;
$hey-blue-rgb: 22, 248, 255;
$hey-blue-light: mix(#fff, $hey-blue, 20%);
$hey-blue-dark: mix(#000, $hey-blue, 20%);
.element {
color: $hey-blue;
box-shadow: 0 0 0 2px rgba($hey-blue, 0.35);
}