Adlandırılmış renk · #8BCECB
Aaquatic Wonderland
Aaquatic Wonderland, #8BCECB: rgb(139 206 203), hsl(177 41% 68%), oklch(0.806 0.068 192.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? → · Aaquatic Wonderland color name →
#8BCECB
oklch(0.806 0.068 192.3)
Renk dönüşümleri
- HEX
- #8bcecb
- RGB
- rgb(139 206 203)
- HSL
- hsl(177 41% 68%)
- HWB
- hwb(177 55% 19%)
- OKLCH
- oklch(0.806 0.068 192.3)
- OKLab
- oklab(0.806 -0.066 -0.014)
- CIE Lab
- lab(78.23 -22.49 -5.63)
- LCH
- lch(78.23 23.19 194.1)
- CMYK
- cmyk(33% 0% 1% 19%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 97D3D0
- A3D8D5
- AFDDDA
- BBE2E0
- C6E7E5
- D2EBEA
- DDF0EF
- E8F5F4
- F4FAFA
Koyu tonlar
- 78B3B0
- 669896
- 547F7D
- 436665
- 324E4D
- 233837
- 142322
- 070F0F
- 010202
Gri tonlar
- 8BC6C3
- 8ABEBC
- 8AB6B4
- 89AEAC
- 88A6A5
- 869F9D
- 859796
- 848F8E
- 828887
Renk uyumları
Tamamlayıcı +180°
- 8BCECB
Aaquatic Wonderland
- E8AEB4
≈ Amazon River Dolphin
Analog -30° +30°
- 8BCECB
Aaquatic Wonderland
- 98CEB3
≈ Mint Ice Cream
- 8FCADF
≈ Baby Motive
Üçlü +120° +240°
- 8BCECB
Aaquatic Wonderland
- CFB3E0
≈ Sea Lavender
- DBB990
≈ Painted Ash
Bölünmüş tamamlayıcı +150° +210°
- 8BCECB
Aaquatic Wonderland
- DFAFCC
≈ Pink Lavender
- E6B29D
≈ Pretty in Peach
Dörtlü +90° +180° +270°
- 8BCECB
Aaquatic Wonderland
- B8BBEB
≈ Larkspur Bud
- E8AEB4
≈ Amazon River Dolphin
- C8C28F
≈ Lime Peel
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.78:1 · APCA Lc 33
Ag
AAASiyah üzerinde
WCAG 11.78:1 · APCA Lc 70
En iyi metin rengi: #000000
WCAG 11.78:1 (AAA) · APCA Lc 70
Contrast pairs
Kod parçacıkları
CSS
:root {
--aaquatic-wonderland: #8bcecb;
--aaquatic-wonderland-rgb: 139 206 203;
--aaquatic-wonderland-oklch: oklch(0.806 0.068 192.3);
}
.element {
color: var(--aaquatic-wonderland);
background-color: hsl(177 41% 68%);
border-color: oklch(0.806 0.068 192.3);
}Tailwind CSS v4
@theme {
--color-aaquatic-wonderland: #8bcecb;
--color-aaquatic-wonderland-50: #e0fcfb;
--color-aaquatic-wonderland-100: #cff0ef;
--color-aaquatic-wonderland-200: #b4dedd;
--color-aaquatic-wonderland-300: #8fc3c2;
--color-aaquatic-wonderland-400: #6daca9;
--color-aaquatic-wonderland-500: #4a9592;
--color-aaquatic-wonderland-600: #3f7e7b;
--color-aaquatic-wonderland-700: #326563;
--color-aaquatic-wonderland-800: #234a48;
--color-aaquatic-wonderland-900: #183332;
--color-aaquatic-wonderland-950: #081f1e;
}SCSS
$aaquatic-wonderland: #8bcecb;
$aaquatic-wonderland-rgb: 139, 206, 203;
$aaquatic-wonderland-light: mix(#fff, $aaquatic-wonderland, 20%);
$aaquatic-wonderland-dark: mix(#000, $aaquatic-wonderland, 20%);
.element {
color: $aaquatic-wonderland;
box-shadow: 0 0 0 2px rgba($aaquatic-wonderland, 0.35);
}