色名 · #BEC3BB
Comfort Grey
Comfort Greyは#BEC3BB：rgb(190 195 187)、hsl(97 6% 75%)、oklch(0.811 0.012 133.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Comfort Grey color name →
#BEC3BB
oklch(0.811 0.012 133.4)
カラー変換
- HEX
- #bec3bb
- RGB
- rgb(190 195 187)
- HSL
- hsl(97 6% 75%)
- HWB
- hwb(97 73% 24%)
- OKLCH
- oklch(0.811 0.012 133.4)
- OKLab
- oklab(0.811 -0.008 0.009)
- CIE Lab
- lab(78.22 -2.89 3.4)
- LCH
- lch(78.22 4.46 130.4)
- CMYK
- cmyk(3% 0% 4% 24%)
ティント · シェード · トーン
ティント
- C4C9C2
- CBCFC8
- D1D5CF
- D8DBD6
- DEE1DD
- E5E7E3
- EBEDEA
- F2F3F1
- F8F9F8
シェード
- A5A9A2
- 8C908A
- 757873
- 5E605C
- 484A46
- 333432
- 1F201F
- 0D0E0D
- 020202
トーン
- B8BCB5
- B1B5AF
- ABAEA9
- A5A8A3
- 9EA19D
- 989A97
- 929491
- 8C8D8B
- 868686
カラーハーモニー
補色 +180°
- BEC3BB
Comfort Grey
- C4BFC7
≈ Grape Mist
類似色 -30° +30°
- BEC3BB
Comfort Grey
- C2C2B9
≈ Baby Barn Owl
- BAC4BF
≈ Tiara
トライアド +120° +240°
- BEC3BB
Comfort Grey
- BCC2C9
≈ Metallic
- C9BEBF
≈ Nantucket Mist
スプリットコンプリメンタリー +150° +210°
- BEC3BB
Comfort Grey
- C0C0C9
≈ Lavender Oil
- C7BEC3
≈ Glass Bead
テトラード +90° +180° +270°
- BEC3BB
Comfort Grey
- B9C3C7
≈ Metallic
- C4BFC7
≈ Grape Mist
- C9BFBB
≈ Worn Silver
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.79:1 · APCA Lc 33
Ag
AAA黒の上
WCAG 11.71:1 · APCA Lc 69
最適な文字色: #000000
WCAG 11.71:1 (AAA) · APCA Lc 69
Contrast pairs
コードスニペット
CSS
:root {
--comfort-grey: #bec3bb;
--comfort-grey-rgb: 190 195 187;
--comfort-grey-oklch: oklch(0.811 0.012 133.4);
}
.element {
color: var(--comfort-grey);
background-color: hsl(97 6% 75%);
border-color: oklch(0.811 0.012 133.4);
}Tailwind CSS v4
@theme {
--color-comfort-grey: #bec3bb;
--color-comfort-grey-50: #f3f6f2;
--color-comfort-grey-100: #e6e9e5;
--color-comfort-grey-200: #d2d5d0;
--color-comfort-grey-300: #b5b9b3;
--color-comfort-grey-400: #9ba099;
--color-comfort-grey-500: #838880;
--color-comfort-grey-600: #6f736c;
--color-comfort-grey-700: #595c56;
--color-comfort-grey-800: #41433f;
--color-comfort-grey-900: #2d2e2b;
--color-comfort-grey-950: #1a1b19;
}SCSS
$comfort-grey: #bec3bb;
$comfort-grey-rgb: 190, 195, 187;
$comfort-grey-light: mix(#fff, $comfort-grey, 20%);
$comfort-grey-dark: mix(#000, $comfort-grey, 20%);
.element {
color: $comfort-grey;
box-shadow: 0 0 0 2px rgba($comfort-grey, 0.35);
}