色名 · #9FB1AB
Garden Vista
Garden Vistaは#9FB1AB：rgb(159 177 171)、hsl(160 10% 66%)、oklch(0.745 0.022 173.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Garden Vista color name →
#9FB1AB
oklch(0.745 0.022 173.7)
カラー変換
- HEX
- #9fb1ab
- RGB
- rgb(159 177 171)
- HSL
- hsl(160 10% 66%)
- HWB
- hwb(160 62% 31%)
- OKLCH
- oklch(0.745 0.022 173.7)
- OKLab
- oklab(0.745 -0.022 0.002)
- CIE Lab
- lab(70.66 -7.37 0.84)
- LCH
- lch(70.66 7.42 173.5)
- CMYK
- cmyk(10% 0% 3% 31%)
ティント · シェード · トーン
ティント
- A8B9B3
- B2C0BB
- BBC8C4
- C5D0CC
- CED7D4
- D8DFDD
- E1E7E5
- EBEFEE
- F5F7F6
シェード
- 8A9994
- 75837E
- 616C68
- 4D5754
- 3B4240
- 292F2D
- 181C1B
- 090C0B
- 010101
トーン
- 9CACA7
- 99A7A2
- 96A29E
- 939D9A
- 8F9895
- 8C9391
- 898E8D
- 868A88
- 838584
カラーハーモニー
補色 +180°
- 9FB1AB
Garden Vista
- B8A7AD
≈ Foggy Plum
類似色 -30° +30°
- 9FB1AB
Garden Vista
- A4B0A4
≈ Powdered Gum
- 9DB1B2
≈ Aqua-Sphere
トライアド +120° +240°
- 9FB1AB
Garden Vista
- ADAAB9
≈ Lilac Bloom
- B8A9A0
≈ Riveter Rose
スプリットコンプリメンタリー +150° +210°
- 9FB1AB
Garden Vista
- B3A8B4
≈ Resplendent
- BAA7A6
≈ Object of Desire
テトラード +90° +180° +270°
- 9FB1AB
Garden Vista
- A5ACBB
≈ Snub
- B8A7AD
≈ Foggy Plum
- B3AB9D
≈ Terrace Taupe
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.24:1 · APCA Lc 44
Ag
AAA黒の上
WCAG 9.35:1 · APCA Lc 58
最適な文字色: #000000
WCAG 9.35:1 (AAA) · APCA Lc 58
Contrast pairs
コードスニペット
CSS
:root {
--garden-vista: #9fb1ab;
--garden-vista-rgb: 159 177 171;
--garden-vista-oklch: oklch(0.745 0.022 173.7);
}
.element {
color: var(--garden-vista);
background-color: hsl(160 10% 66%);
border-color: oklch(0.745 0.022 173.7);
}Tailwind CSS v4
@theme {
--color-garden-vista: #9fb1ab;
--color-garden-vista-50: #eff7f5;
--color-garden-vista-100: #e1eae7;
--color-garden-vista-200: #cbd7d4;
--color-garden-vista-300: #adbbb7;
--color-garden-vista-400: #92a39d;
--color-garden-vista-500: #788b85;
--color-garden-vista-600: #667670;
--color-garden-vista-700: #515e5a;
--color-garden-vista-800: #3b4541;
--color-garden-vista-900: #29302d;
--color-garden-vista-950: #161c1a;
}SCSS
$garden-vista: #9fb1ab;
$garden-vista-rgb: 159, 177, 171;
$garden-vista-light: mix(#fff, $garden-vista, 20%);
$garden-vista-dark: mix(#000, $garden-vista, 20%);
.element {
color: $garden-vista;
box-shadow: 0 0 0 2px rgba($garden-vista, 0.35);
}