Adlandırılmış renk · #9BD8C4
Isabella’s Aqua
Isabella’s Aqua, #9BD8C4: rgb(155 216 196), hsl(160 44% 73%), oklch(0.835 0.068 172.2). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Teal mean? → · Isabella’s Aqua color name →
#9BD8C4
oklch(0.835 0.068 172.2)
Renk dönüşümleri
- HEX
- #9bd8c4
- RGB
- rgb(155 216 196)
- HSL
- hsl(160 44% 73%)
- HWB
- hwb(160 61% 15%)
- OKLCH
- oklch(0.835 0.068 172.2)
- OKLab
- oklab(0.835 -0.068 0.009)
- CIE Lab
- lab(81.77 -23.39 3.31)
- LCH
- lch(81.77 23.63 171.9)
- CMYK
- cmyk(28% 0% 9% 15%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- A5DCCA
- B0E0D0
- BAE4D5
- C4E8DB
- CEECE1
- D8F0E7
- E2F3ED
- EBF7F3
- F5FBF9
Koyu tonlar
- 86BCAA
- 72A091
- 5E8578
- 4B6B61
- 39534A
- 283B35
- 182521
- 09110E
- 010202
Gri tonlar
- 99CFBD
- 97C6B6
- 94BDAF
- 92B4A8
- 8FABA1
- 8CA29B
- 899A94
- 86918D
- 838887
Renk uyumları
Tamamlayıcı +180°
- 9BD8C4
Isabella’s Aqua
- EDB7CD
≈ Bunny Cake
Analog -30° +30°
- 9BD8C4
Isabella’s Aqua
- B0D5AC
≈ Flower Stem
- 93D7DC
≈ Arctic Blue
Üçlü +120° +240°
- 9BD8C4
Isabella’s Aqua
- C9C1F3
≈ Connecticut Lilac
- EEBDA0
≈ Tan Temptation
Bölünmüş tamamlayıcı +150° +210°
- 9BD8C4
Isabella’s Aqua
- DFBBE4
≈ Romantic Morning
- F3B8B5
≈ Old Flame
Dörtlü +90° +180° +270°
- 9BD8C4
Isabella’s Aqua
- B1CAF6
≈ Night Snow
- EDB7CD
≈ Bunny Cake
- DFC596
≈ Corn Chowder
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.61:1 · APCA Lc 27
Ag
AAASiyah üzerinde
WCAG 13.01:1 · APCA Lc 75
En iyi metin rengi: #000000
WCAG 13.01:1 (AAA) · APCA Lc 75
Contrast pairs
Kod parçacıkları
CSS
:root {
--isabella-s-aqua: #9bd8c4;
--isabella-s-aqua-rgb: 155 216 196;
--isabella-s-aqua-oklch: oklch(0.835 0.068 172.2);
}
.element {
color: var(--isabella-s-aqua);
background-color: hsl(160 44% 73%);
border-color: oklch(0.835 0.068 172.2);
}Tailwind CSS v4
@theme {
--color-isabella-s-aqua: #9bd8c4;
--color-isabella-s-aqua-50: #e2fcf4;
--color-isabella-s-aqua-100: #d2f0e6;
--color-isabella-s-aqua-200: #b7ded2;
--color-isabella-s-aqua-300: #93c3b5;
--color-isabella-s-aqua-400: #74ac9a;
--color-isabella-s-aqua-500: #539581;
--color-isabella-s-aqua-600: #477e6d;
--color-isabella-s-aqua-700: #386557;
--color-isabella-s-aqua-800: #284a3f;
--color-isabella-s-aqua-900: #1b332b;
--color-isabella-s-aqua-950: #0b1f19;
}SCSS
$isabella-s-aqua: #9bd8c4;
$isabella-s-aqua-rgb: 155, 216, 196;
$isabella-s-aqua-light: mix(#fff, $isabella-s-aqua, 20%);
$isabella-s-aqua-dark: mix(#000, $isabella-s-aqua, 20%);
.element {
color: $isabella-s-aqua;
box-shadow: 0 0 0 2px rgba($isabella-s-aqua, 0.35);
}