Adlandırılmış renk · #8AC6BD
Holiday Turquoise
Holiday Turquoise, #8AC6BD: rgb(138 198 189), hsl(171 34% 66%), oklch(0.783 0.063 184.4). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Teal mean? → · Holiday Turquoise color name →
#8AC6BD
oklch(0.783 0.063 184.4)
Renk dönüşümleri
- HEX
- #8ac6bd
- RGB
- rgb(138 198 189)
- HSL
- hsl(171 34% 66%)
- HWB
- hwb(171 54% 22%)
- OKLCH
- oklch(0.783 0.063 184.4)
- OKLab
- oklab(0.783 -0.063 -0.005)
- CIE Lab
- lab(75.59 -21.54 -2)
- LCH
- lch(75.59 21.63 185.3)
- CMYK
- cmyk(30% 0% 5% 22%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 96CCC3
- A2D1CA
- AED7D0
- BADDD7
- C5E2DE
- D1E8E4
- DCEEEB
- E8F4F2
- F3F9F8
Koyu tonlar
- 77ACA4
- 65928C
- 537A74
- 42625D
- 324B47
- 223533
- 14211F
- 070E0D
- 010202
Gri tonlar
- 8ABFB7
- 89B8B0
- 89B1AA
- 88AAA4
- 87A39E
- 869C98
- 849592
- 838E8C
- 828786
Renk uyumları
Tamamlayıcı +180°
- 8AC6BD
Holiday Turquoise
- DCA8B3
≈ Pink Nectar
Analog -30° +30°
- 8AC6BD
Holiday Turquoise
- 99C5A6
≈ Mini Green
- 89C3D1
≈ After the Rain
Üçlü +120° +240°
- 8AC6BD
Holiday Turquoise
- C1AFDA
≈ Moonraker
- D5B08E
≈ Butterscotch Amber
Bölünmüş tamamlayıcı +150° +210°
- 8AC6BD
Holiday Turquoise
- D2AAC9
≈ Orchid Bouquet
- DEAA9E
≈ Tamanegi Peel
Dörtlü +90° +180° +270°
- 8AC6BD
Holiday Turquoise
- ACB6E1
≈ Sassy Violet
- DCA8B3
≈ Pink Nectar
- C5B88A
≈ Bakelite Yellow
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.92:1 · APCA Lc 37
Ag
AAASiyah üzerinde
WCAG 10.89:1 · APCA Lc 66
En iyi metin rengi: #000000
WCAG 10.89:1 (AAA) · APCA Lc 66
Contrast pairs
Kod parçacıkları
CSS
:root {
--holiday-turquoise: #8ac6bd;
--holiday-turquoise-rgb: 138 198 189;
--holiday-turquoise-oklch: oklch(0.783 0.063 184.4);
}
.element {
color: var(--holiday-turquoise);
background-color: hsl(171 34% 66%);
border-color: oklch(0.783 0.063 184.4);
}Tailwind CSS v4
@theme {
--color-holiday-turquoise: #8ac6bd;
--color-holiday-turquoise-50: #e2fbf8;
--color-holiday-turquoise-100: #d1efeb;
--color-holiday-turquoise-200: #b7ded8;
--color-holiday-turquoise-300: #93c2bc;
--color-holiday-turquoise-400: #73aba3;
--color-holiday-turquoise-500: #52948b;
--color-holiday-turquoise-600: #467d76;
--color-holiday-turquoise-700: #38645e;
--color-holiday-turquoise-800: #284a44;
--color-holiday-turquoise-900: #1b332f;
--color-holiday-turquoise-950: #0b1f1c;
}SCSS
$holiday-turquoise: #8ac6bd;
$holiday-turquoise-rgb: 138, 198, 189;
$holiday-turquoise-light: mix(#fff, $holiday-turquoise, 20%);
$holiday-turquoise-dark: mix(#000, $holiday-turquoise, 20%);
.element {
color: $holiday-turquoise;
box-shadow: 0 0 0 2px rgba($holiday-turquoise, 0.35);
}