色名 · #A3BBB3
Garden Twilight
Garden Twilightは#A3BBB3：rgb(163 187 179)、hsl(160 15% 69%)、oklch(0.772 0.029 173.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Garden Twilight color name →
#A3BBB3
oklch(0.772 0.029 173.5)
カラー変換
- HEX
- #a3bbb3
- RGB
- rgb(163 187 179)
- HSL
- hsl(160 15% 69%)
- HWB
- hwb(160 64% 27%)
- OKLCH
- oklch(0.772 0.029 173.5)
- OKLab
- oklab(0.772 -0.028 0.003)
- CIE Lab
- lab(73.87 -9.7 1.15)
- LCH
- lch(73.87 9.77 173.2)
- CMYK
- cmyk(13% 0% 4% 27%)
ティント · シェード · トーン
ティント
- ACC2BA
- B5C8C2
- BECFC9
- C7D6D1
- D0DDD8
- DAE3E0
- E3EAE8
- ECF1EF
- F6F8F7
シェード
- 8DA29B
- 788A84
- 63736E
- 4F5C58
- 3C4643
- 2A322F
- 191F1D
- 0A0D0C
- 010201
トーン
- A0B5AE
- 9CAFA9
- 99A9A3
- 95A39E
- 929D99
- 8E9794
- 8B918F
- 878B8A
- 848685
カラーハーモニー
補色 +180°
- A3BBB3
Garden Twilight
- C4AEB6
≈ Velvet Ears
類似色 -30° +30°
- A3BBB3
Garden Twilight
- AABAA9
≈ Rockfall
- A0BABD
≈ Hopeful Blue
トライアド +120° +240°
- A3BBB3
Garden Twilight
- B5B2C6
≈ Bohemianism
- C4B0A4
≈ Vintage Charm
スプリットコンプリメンタリー +150° +210°
- A3BBB3
Garden Twilight
- BEAFBF
≈ Almost Plum
- C7AEAC
≈ Wispy Mauve
テトラード +90° +180° +270°
- A3BBB3
Garden Twilight
- ABB5C8
≈ Spacious Sky
- C4AEB6
≈ Velvet Ears
- BEB4A1
≈ Oyster Shoal
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.03:1 · APCA Lc 40
Ag
AAA黒の上
WCAG 10.31:1 · APCA Lc 63
最適な文字色: #000000
WCAG 10.31:1 (AAA) · APCA Lc 63
Contrast pairs
コードスニペット
CSS
:root {
--garden-twilight: #a3bbb3;
--garden-twilight-rgb: 163 187 179;
--garden-twilight-oklch: oklch(0.772 0.029 173.5);
}
.element {
color: var(--garden-twilight);
background-color: hsl(160 15% 69%);
border-color: oklch(0.772 0.029 173.5);
}Tailwind CSS v4
@theme {
--color-garden-twilight: #a3bbb3;
--color-garden-twilight-50: #edf8f5;
--color-garden-twilight-100: #dfebe7;
--color-garden-twilight-200: #c8d8d3;
--color-garden-twilight-300: #a9bcb7;
--color-garden-twilight-400: #8ea49d;
--color-garden-twilight-500: #738d84;
--color-garden-twilight-600: #627770;
--color-garden-twilight-700: #4e5f5a;
--color-garden-twilight-800: #394641;
--color-garden-twilight-900: #27302d;
--color-garden-twilight-950: #151c1a;
}SCSS
$garden-twilight: #a3bbb3;
$garden-twilight-rgb: 163, 187, 179;
$garden-twilight-light: mix(#fff, $garden-twilight, 20%);
$garden-twilight-dark: mix(#000, $garden-twilight, 20%);
.element {
color: $garden-twilight;
box-shadow: 0 0 0 2px rgba($garden-twilight, 0.35);
}