色名 · #BEC1CF
Whomp Grey
Whomp Greyは#BEC1CF：rgb(190 193 207)、hsl(229 15% 78%)、oklch(0.813 0.02 276.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Whomp Grey color name →
#BEC1CF
oklch(0.813 0.02 276.3)
カラー変換
- HEX
- #bec1cf
- RGB
- rgb(190 193 207)
- HSL
- hsl(229 15% 78%)
- HWB
- hwb(229 75% 19%)
- OKLCH
- oklch(0.813 0.02 276.3)
- OKLab
- oklab(0.813 0.002 -0.02)
- CIE Lab
- lab(78.15 0.94 -7.42)
- LCH
- lch(78.15 7.48 277.2)
- CMYK
- cmyk(8% 7% 0% 19%)
ティント · シェード · トーン
ティント
- C4C7D4
- CBCDD8
- D1D3DD
- D8D9E2
- DEE0E7
- E5E6EC
- EBECF0
- F2F2F5
- F8F9FA
シェード
- A5A7B4
- 8C8F99
- 75777F
- 5E5F67
- 48494F
- 333438
- 1F2023
- 0D0E10
- 020202
トーン
- B8BAC7
- B1B4BF
- ABADB7
- A5A6AF
- 9EA0A7
- 98999F
- 929397
- 8C8D8F
- 868688
カラーハーモニー
補色 +180°
- BEC1CF
Whomp Grey
- C5C2B4
≈ Comforting Grey
類似色 -30° +30°
- BEC1CF
Whomp Grey
- B8C3CE
≈ Yorkshire Cloud
- C5BFCC
≈ Clary Sage
トライアド +120° +240°
- BEC1CF
Whomp Grey
- CEBEB9
≈ Vintage Taupe
- B8C6BD
≈ Antique Patina
スプリットコンプリメンタリー +150° +210°
- BEC1CF
Whomp Grey
- CBC0B5
≈ Loophole
- BEC4B7
≈ Balsam
テトラード +90° +180° +270°
- BEC1CF
Whomp Grey
- CEBDC0
≈ Lady Fingers
- C5C2B4
≈ Comforting Grey
- B4C6C4
≈ Blustery Wind
コントラストとアクセシビリティ
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 {
--whomp-grey: #bec1cf;
--whomp-grey-rgb: 190 193 207;
--whomp-grey-oklch: oklch(0.813 0.02 276.3);
}
.element {
color: var(--whomp-grey);
background-color: hsl(229 15% 78%);
border-color: oklch(0.813 0.02 276.3);
}Tailwind CSS v4
@theme {
--color-whomp-grey: #bec1cf;
--color-whomp-grey-50: #f4f5fb;
--color-whomp-grey-100: #e6e7ef;
--color-whomp-grey-200: #d2d4dd;
--color-whomp-grey-300: #b5b7c2;
--color-whomp-grey-400: #9b9eaa;
--color-whomp-grey-500: #828594;
--color-whomp-grey-600: #6e717d;
--color-whomp-grey-700: #585a64;
--color-whomp-grey-800: #404249;
--color-whomp-grey-900: #2c2e33;
--color-whomp-grey-950: #191a1f;
}SCSS
$whomp-grey: #bec1cf;
$whomp-grey-rgb: 190, 193, 207;
$whomp-grey-light: mix(#fff, $whomp-grey, 20%);
$whomp-grey-dark: mix(#000, $whomp-grey, 20%);
.element {
color: $whomp-grey;
box-shadow: 0 0 0 2px rgba($whomp-grey, 0.35);
}