色名 · #BFD0CB
White Box
White Boxは#BFD0CB：rgb(191 208 203)、hsl(162 15% 78%)、oklch(0.843 0.02 176.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · White Box color name →
#BFD0CB
oklch(0.843 0.02 176.3)
カラー変換
- HEX
- #bfd0cb
- RGB
- rgb(191 208 203)
- HSL
- hsl(162 15% 78%)
- HWB
- hwb(162 75% 18%)
- OKLCH
- oklch(0.843 0.02 176.3)
- OKLab
- oklab(0.843 -0.02 0.001)
- CIE Lab
- lab(82.07 -6.67 0.41)
- LCH
- lch(82.07 6.68 176.4)
- CMYK
- cmyk(8% 0% 2% 18%)
ティント · シェード · トーン
ティント
- C5D5D0
- CCD9D5
- D2DEDA
- D8E3E0
- DFE7E5
- E5ECEA
- ECF1EF
- F2F5F4
- F8FAFA
シェード
- A6B5B0
- 8D9A96
- 75807D
- 5E6765
- 484F4D
- 333937
- 1F2322
- 0D100F
- 020202
トーン
- B9C8C3
- B2BFBC
- ACB7B4
- A5AFAC
- 9FA7A5
- 999F9D
- 929796
- 8C8F8E
- 868887
カラーハーモニー
補色 +180°
- BFD0CB
White Box
- D7C7CC
≈ Odyssey Lilac
類似色 -30° +30°
- BFD0CB
White Box
- C4CFC4
≈ Silver Grass
- BED0D2
≈ Detroit
トライアド +120° +240°
- BFD0CB
White Box
- CCC9D7
≈ Magic Scent
- D6C9C0
≈ Unfussy Beige
スプリットコンプリメンタリー +150° +210°
- BFD0CB
White Box
- D3C7D2
≈ Enchant
- D8C7C5
≈ Fairview Taupe
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.60:1 · APCA Lc 27
Ag
AAA黒の上
WCAG 13.09:1 · APCA Lc 76
最適な文字色: #000000
WCAG 13.09:1 (AAA) · APCA Lc 76
Contrast pairs
コードスニペット
CSS
:root {
--white-box: #bfd0cb;
--white-box-rgb: 191 208 203;
--white-box-oklch: oklch(0.843 0.02 176.3);
}
.element {
color: var(--white-box);
background-color: hsl(162 15% 78%);
border-color: oklch(0.843 0.02 176.3);
}Tailwind CSS v4
@theme {
--color-white-box: #bfd0cb;
--color-white-box-50: #f0f7f5;
--color-white-box-100: #e1eae8;
--color-white-box-200: #ccd7d4;
--color-white-box-300: #adbbb7;
--color-white-box-400: #93a29e;
--color-white-box-500: #798b86;
--color-white-box-600: #677571;
--color-white-box-700: #525e5a;
--color-white-box-800: #3c4542;
--color-white-box-900: #292f2d;
--color-white-box-950: #171c1a;
}SCSS
$white-box: #bfd0cb;
$white-box-rgb: 191, 208, 203;
$white-box-light: mix(#fff, $white-box, 20%);
$white-box-dark: mix(#000, $white-box, 20%);
.element {
color: $white-box;
box-shadow: 0 0 0 2px rgba($white-box, 0.35);
}