色名 · #B7B7B2
Grey Clouds
Grey Cloudsは#B7B7B2：rgb(183 183 178)、hsl(60 3% 71%)、oklch(0.778 0.007 106.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Grey Clouds color name →
#B7B7B2
oklch(0.778 0.007 106.6)
カラー変換
- HEX
- #b7b7b2
- RGB
- rgb(183 183 178)
- HSL
- hsl(60 3% 71%)
- HWB
- hwb(60 70% 28%)
- OKLCH
- oklch(0.778 0.007 106.6)
- OKLab
- oklab(0.778 -0.002 0.007)
- CIE Lab
- lab(74.31 -0.68 2.55)
- LCH
- lch(74.31 2.64 105)
- CMYK
- cmyk(0% 0% 3% 28%)
ティント · シェード · トーン
ティント
- BEBEB9
- C5C5C1
- CCCCC9
- D3D3D0
- DADAD8
- E2E2E0
- E9E9E7
- F0F0EF
- F8F8F7
シェード
- 9F9F9A
- 878783
- 70706D
- 5A5A57
- 454543
- 31312F
- 1E1E1D
- 0C0C0C
- 020201
トーン
- B1B1AD
- ACACA8
- A6A6A3
- A1A19E
- 9B9B99
- 969694
- 90908F
- 8B8B8A
- 858585
カラーハーモニー
補色 +180°
- B7B7B2
Grey Clouds
- B6B6BB
≈ Powder Dust
類似色 -30° +30°
- B7B7B2
Grey Clouds
- B9B6B2
≈ Clear Concrete
- B5B8B3
≈ Grey Clouds
トライアド +120° +240°
- B7B7B2
Grey Clouds
- B2B8BA
≈ Autumn Fog
- BAB5B7
≈ Silver Bells
スプリットコンプリメンタリー +150° +210°
- B7B7B2
Grey Clouds
- B4B7BB
≈ Powder Dust
- B8B5BA
≈ Silver Bullet
テトラード +90° +180° +270°
- B7B7B2
Grey Clouds
- B2B8B8
≈ Silver Mistral
- B6B6BB
≈ Powder Dust
- BBB5B5
≈ Winter Calm
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.01:1 · APCA Lc 39
Ag
AAA黒の上
WCAG 10.42:1 · APCA Lc 63
最適な文字色: #000000
WCAG 10.42:1 (AAA) · APCA Lc 63
Contrast pairs
コードスニペット
CSS
:root {
--grey-clouds: #b7b7b2;
--grey-clouds-rgb: 183 183 178;
--grey-clouds-oklch: oklch(0.778 0.007 106.6);
}
.element {
color: var(--grey-clouds);
background-color: hsl(60 3% 71%);
border-color: oklch(0.778 0.007 106.6);
}Tailwind CSS v4
@theme {
--color-grey-clouds: #b7b7b2;
--color-grey-clouds-50: #f5f5f3;
--color-grey-clouds-100: #e8e8e5;
--color-grey-clouds-200: #d4d4d1;
--color-grey-clouds-300: #b7b8b4;
--color-grey-clouds-400: #9f9f9a;
--color-grey-clouds-500: #868681;
--color-grey-clouds-600: #72726d;
--color-grey-clouds-700: #5b5b57;
--color-grey-clouds-800: #434240;
--color-grey-clouds-900: #2e2e2c;
--color-grey-clouds-950: #1b1b19;
}SCSS
$grey-clouds: #b7b7b2;
$grey-clouds-rgb: 183, 183, 178;
$grey-clouds-light: mix(#fff, $grey-clouds, 20%);
$grey-clouds-dark: mix(#000, $grey-clouds, 20%);
.element {
color: $grey-clouds;
box-shadow: 0 0 0 2px rgba($grey-clouds, 0.35);
}