色名 · #8AC6BD
Holiday Turquoise
Holiday Turquoiseは#8AC6BD：rgb(138 198 189)、hsl(171 34% 66%)、oklch(0.783 0.063 184.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Holiday Turquoise color name →
#8AC6BD
oklch(0.783 0.063 184.4)
カラー変換
- 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%)
ティント · シェード · トーン
ティント
- 96CCC3
- A2D1CA
- AED7D0
- BADDD7
- C5E2DE
- D1E8E4
- DCEEEB
- E8F4F2
- F3F9F8
シェード
- 77ACA4
- 65928C
- 537A74
- 42625D
- 324B47
- 223533
- 14211F
- 070E0D
- 010202
トーン
- 8ABFB7
- 89B8B0
- 89B1AA
- 88AAA4
- 87A39E
- 869C98
- 849592
- 838E8C
- 828786
カラーハーモニー
補色 +180°
- 8AC6BD
Holiday Turquoise
- DCA8B3
≈ Pink Nectar
類似色 -30° +30°
- 8AC6BD
Holiday Turquoise
- 99C5A6
≈ Mini Green
- 89C3D1
≈ After the Rain
トライアド +120° +240°
- 8AC6BD
Holiday Turquoise
- C1AFDA
≈ Moonraker
- D5B08E
≈ Butterscotch Amber
スプリットコンプリメンタリー +150° +210°
- 8AC6BD
Holiday Turquoise
- D2AAC9
≈ Orchid Bouquet
- DEAA9E
≈ Tamanegi Peel
テトラード +90° +180° +270°
- 8AC6BD
Holiday Turquoise
- ACB6E1
≈ Sassy Violet
- DCA8B3
≈ Pink Nectar
- C5B88A
≈ Bakelite Yellow
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.92:1 · APCA Lc 37
Ag
AAA黒の上
WCAG 10.89:1 · APCA Lc 66
最適な文字色: #000000
WCAG 10.89:1 (AAA) · APCA Lc 66
Contrast pairs
コードスニペット
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);
}