色名 · #ABC0BB
Garden Gazebo
Garden Gazeboは#ABC0BB：rgb(171 192 187)、hsl(166 14% 71%)、oklch(0.79 0.024 179.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Garden Gazebo color name →
#ABC0BB
oklch(0.79 0.024 179.8)
カラー変換
- HEX
- #abc0bb
- RGB
- rgb(171 192 187)
- HSL
- hsl(166 14% 71%)
- HWB
- hwb(166 67% 25%)
- OKLCH
- oklch(0.79 0.024 179.8)
- OKLab
- oklab(0.79 -0.024 0)
- CIE Lab
- lab(75.98 -8.17 -0.04)
- LCH
- lch(75.98 8.17 180.3)
- CMYK
- cmyk(11% 0% 3% 25%)
ティント · シェード · トーン
ティント
- B3C6C2
- BBCCC8
- C4D3CF
- CCD9D6
- D4DFDD
- DDE5E3
- E5ECEA
- EEF2F1
- F6F9F8
シェード
- 94A7A2
- 7E8E8A
- 687673
- 545F5C
- 404946
- 2D3432
- 1B201F
- 0B0E0D
- 010202
トーン
- A7B9B5
- A2B3AF
- 9EACA9
- 9AA6A3
- 959F9D
- 919997
- 8D9391
- 898C8B
- 848686
カラーハーモニー
補色 +180°
- ABC0BB
Garden Gazebo
- C9B5BA
≈ High Society
類似色 -30° +30°
- ABC0BB
Garden Gazebo
- B0BFB3
≈ Grey Embrace
- AABFC3
≈ Bleu Clair
トライアド +120° +240°
- ABC0BB
Garden Gazebo
- BDB8C8
≈ Wild Lilac
- C7B7AC
≈ Boardwalk Sashay
スプリットコンプリメンタリー +150° +210°
- ABC0BB
Garden Gazebo
- C4B5C2
≈ Pink Bravado
- CAB5B2
≈ Cold Turkey
テトラード +90° +180° +270°
- ABC0BB
Garden Gazebo
- B4BACB
≈ Heritage
- C9B5BA
≈ High Society
- C1BAAA
≈ Bright Loam
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.91:1 · APCA Lc 36
Ag
AAA黒の上
WCAG 10.98:1 · APCA Lc 66
最適な文字色: #000000
WCAG 10.98:1 (AAA) · APCA Lc 66
Contrast pairs
コードスニペット
CSS
:root {
--garden-gazebo: #abc0bb;
--garden-gazebo-rgb: 171 192 187;
--garden-gazebo-oklch: oklch(0.79 0.024 179.8);
}
.element {
color: var(--garden-gazebo);
background-color: hsl(166 14% 71%);
border-color: oklch(0.79 0.024 179.8);
}Tailwind CSS v4
@theme {
--color-garden-gazebo: #abc0bb;
--color-garden-gazebo-50: #eef7f5;
--color-garden-gazebo-100: #e0ebe8;
--color-garden-gazebo-200: #cad8d5;
--color-garden-gazebo-300: #abbcb8;
--color-garden-gazebo-400: #90a39f;
--color-garden-gazebo-500: #768c87;
--color-garden-gazebo-600: #647672;
--color-garden-gazebo-700: #505f5b;
--color-garden-gazebo-800: #3a4542;
--color-garden-gazebo-900: #28302e;
--color-garden-gazebo-950: #161c1a;
}SCSS
$garden-gazebo: #abc0bb;
$garden-gazebo-rgb: 171, 192, 187;
$garden-gazebo-light: mix(#fff, $garden-gazebo, 20%);
$garden-gazebo-dark: mix(#000, $garden-gazebo, 20%);
.element {
color: $garden-gazebo;
box-shadow: 0 0 0 2px rgba($garden-gazebo, 0.35);
}