Cor nomeada · #70CBCE
Tropical Splash
Tropical Splash é #70CBCE: rgb(112 203 206), hsl(182 49% 62%), oklch(0.787 0.087 198.3). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Teal mean? → · Tropical Splash color name →
#70CBCE
oklch(0.787 0.087 198.3)
Conversões de cor
- HEX
- #70cbce
- RGB
- rgb(112 203 206)
- HSL
- hsl(182 49% 62%)
- HWB
- hwb(182 44% 19%)
- OKLCH
- oklch(0.787 0.087 198.3)
- OKLab
- oklab(0.787 -0.083 -0.027)
- CIE Lab
- lab(76.17 -27.83 -10.45)
- LCH
- lch(76.17 29.73 200.6)
- CMYK
- cmyk(46% 1% 0% 19%)
Tons claros · Sombras · Tons
Tons claros
- 80D0D3
- 90D6D8
- 9FDBDD
- ADE0E1
- BBE5E6
- C9EAEB
- D7F0F0
- E4F5F5
- F2FAFA
Sombras
- 60B0B3
- 519698
- 437D7F
- 356566
- 274D4E
- 1A3738
- 0E2223
- 040F0F
- 010202
Tons
- 74C3C6
- 77BCBE
- 79B4B6
- 7BADAE
- 7DA5A6
- 7E9E9E
- 7F9697
- 808F8F
- 808788
Harmonias de cor
Complementar +180°
- 70CBCE
Tropical Splash
- ECA3A4
≈ Pink Icing
Análoga -30° +30°
- 70CBCE
Tropical Splash
- 7FCCAF
≈ Aquamarine Ocean
- 7BC5E6
≈ Spritzig
Tríade +120° +240°
- 70CBCE
Tropical Splash
- D2A8DE
≈ Favourite Lavender
- D8B379
≈ Egyptian Temple
Complementar dividida +150° +210°
- 70CBCE
Tropical Splash
- E4A3C3
≈ Prettiest Pink
- E8A988
≈ Ceramic Glaze
Tétrade +90° +180° +270°
- 70CBCE
Tropical Splash
- B7B1EF
≈ Purple Sand
- ECA3A4
≈ Pink Icing
- BEBE7C
≈ Pine Glade
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.88:1 · APCA Lc 36
Ag
AAASobre preto
WCAG 11.12:1 · APCA Lc 67
Melhor cor de texto: #000000
WCAG 11.12:1 (AAA) · APCA Lc 67
Contrast pairs
Trechos de código
CSS
:root {
--tropical-splash: #70cbce;
--tropical-splash-rgb: 112 203 206;
--tropical-splash-oklch: oklch(0.787 0.087 198.3);
}
.element {
color: var(--tropical-splash);
background-color: hsl(182 49% 62%);
border-color: oklch(0.787 0.087 198.3);
}Tailwind CSS v4
@theme {
--color-tropical-splash: #70cbce;
--color-tropical-splash-50: #d9fdff;
--color-tropical-splash-100: #c7f1f3;
--color-tropical-splash-200: #a9e0e3;
--color-tropical-splash-300: #80c5c9;
--color-tropical-splash-400: #59aeb1;
--color-tropical-splash-500: #27989b;
--color-tropical-splash-600: #248083;
--color-tropical-splash-700: #1d6769;
--color-tropical-splash-800: #134c4c;
--color-tropical-splash-900: #0c3535;
--color-tropical-splash-950: #002020;
}SCSS
$tropical-splash: #70cbce;
$tropical-splash-rgb: 112, 203, 206;
$tropical-splash-light: mix(#fff, $tropical-splash, 20%);
$tropical-splash-dark: mix(#000, $tropical-splash, 20%);
.element {
color: $tropical-splash;
box-shadow: 0 0 0 2px rgba($tropical-splash, 0.35);
}