Adlandırılmış renk · #00CCBB
Pristine Oceanic
Pristine Oceanic, #00CCBB: rgb(0 204 187), hsl(175 100% 40%), oklch(0.76 0.134 184.3). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Teal mean? → · Pristine Oceanic color name →
#00CCBB
oklch(0.76 0.134 184.3)
Renk dönüşümleri
- HEX
- #00ccbb
- RGB
- rgb(0 204 187)
- HSL
- hsl(175 100% 40%)
- HWB
- hwb(175 0% 20%)
- OKLCH
- oklch(0.76 0.134 184.3)
- OKLab
- oklab(0.76 -0.134 -0.01)
- CIE Lab
- lab(73.74 -46.64 -4.14)
- LCH
- lch(73.74 46.82 185.1)
- CMYK
- cmyk(100% 0% 8% 20%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 44D1C2
- 63D7C8
- 7BDCCF
- 91E1D6
- A5E6DD
- B8ECE3
- CAF1EA
- DCF5F1
- EEFAF8
Koyu tonlar
- 00B1A2
- 00978A
- 007E73
- 00655C
- 004E46
- 003732
- 00221F
- 000F0D
- 000202
Gri tonlar
- 32C4B5
- 46BDAF
- 53B5A9
- 5EAEA3
- 66A69D
- 6D9E97
- 739791
- 788F8B
- 7C8886
Renk uyumları
Tamamlayıcı +180°
- 00CCBB
Pristine Oceanic
- F78BA6
≈ Bunny Fluff
Analog -30° +30°
- 00CCBB
Pristine Oceanic
- 63CA8A
≈ Vegetation
- 00C6E5
≈ Caribbean Blue
Üçlü +120° +240°
- 00CCBB
Pristine Oceanic
- C49AF6
≈ Baby Purple
- EB9D4C
≈ Sunflower Field
Bölünmüş tamamlayıcı +150° +210°
- 00CCBB
Pristine Oceanic
- E48FD4
≈ Love Dust
- FA9076
≈ Kissable
Dörtlü +90° +180° +270°
- 00CCBB
Pristine Oceanic
- 99AAFF
≈ Widowmaker
- F78BA6
≈ Bunny Fluff
- CDAF3C
≈ Sugar Leaves
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.02:1 · APCA Lc 39
Ag
AAASiyah üzerinde
WCAG 10.35:1 · APCA Lc 64
En iyi metin rengi: #000000
WCAG 10.35:1 (AAA) · APCA Lc 64
Contrast pairs
Kod parçacıkları
CSS
:root {
--pristine-oceanic: #00ccbb;
--pristine-oceanic-rgb: 0 204 187;
--pristine-oceanic-oklch: oklch(0.76 0.134 184.3);
}
.element {
color: var(--pristine-oceanic);
background-color: hsl(175 100% 40%);
border-color: oklch(0.76 0.134 184.3);
}Tailwind CSS v4
@theme {
--color-pristine-oceanic: #00ccbb;
--color-pristine-oceanic-50: #cafffb;
--color-pristine-oceanic-100: #b5f7ef;
--color-pristine-oceanic-200: #8ee7dd;
--color-pristine-oceanic-300: #58cec2;
--color-pristine-oceanic-400: #00b7a8;
--color-pristine-oceanic-500: #00a191;
--color-pristine-oceanic-600: #00887a;
--color-pristine-oceanic-700: #006d62;
--color-pristine-oceanic-800: #005146;
--color-pristine-oceanic-900: #003831;
--color-pristine-oceanic-950: #00231d;
}SCSS
$pristine-oceanic: #00ccbb;
$pristine-oceanic-rgb: 0, 204, 187;
$pristine-oceanic-light: mix(#fff, $pristine-oceanic, 20%);
$pristine-oceanic-dark: mix(#000, $pristine-oceanic, 20%);
.element {
color: $pristine-oceanic;
box-shadow: 0 0 0 2px rgba($pristine-oceanic, 0.35);
}