色名 · #B7C9E2
Light Blue Grey
Light Blue Greyは#B7C9E2：rgb(183 201 226)、hsl(215 43% 80%)、oklch(0.83 0.04 256.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Light Blue Grey color name →
#B7C9E2
oklch(0.83 0.04 256.6)
カラー変換
- HEX
- #b7c9e2
- RGB
- rgb(183 201 226)
- HSL
- hsl(215 43% 80%)
- HWB
- hwb(215 72% 11%)
- OKLCH
- oklch(0.83 0.04 256.6)
- OKLab
- oklab(0.83 -0.009 -0.039)
- CIE Lab
- lab(80.19 -2.42 -14.64)
- LCH
- lch(80.19 14.84 260.6)
- CMYK
- cmyk(19% 11% 0% 11%)
ティント · シェード · トーン
ティント
- BECEE5
- C5D4E8
- CCD9EB
- D3DEEE
- DBE4F1
- E2E9F4
- E9EFF6
- F0F4F9
- F8FAFC
シェード
- 9FAEC4
- 8795A8
- 707C8C
- 5A6471
- 454C57
- 31363E
- 1E2227
- 0C0F12
- 020203
トーン
- B1C1D8
- ACBACE
- A6B3C4
- A1ABBA
- 9BA4B0
- 969DA6
- 90959C
- 8B8E93
- 858789
カラーハーモニー
補色 +180°
- B7C9E2
Light Blue Grey
- D7C5AB
≈ Paper Dog
類似色 -30° +30°
- B7C9E2
Light Blue Grey
- ADCDDC
≈ Early September
- C5C4E1
≈ Ice Mauve
トライアド +120° +240°
- B7C9E2
Light Blue Grey
- E1BDBE
≈ Soft Blush
- BCCEB4
≈ Rhys
スプリットコンプリメンタリー +150° +210°
- B7C9E2
Light Blue Grey
- DFC0B2
≈ Sunwashed Brick
- CACAAC
≈ Thistle Green
テトラード +90° +180° +270°
- B7C9E2
Light Blue Grey
- DCBDCD
≈ Creamy Berry
- D7C5AB
≈ Paper Dog
- B0D0C2
≈ Lester
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.68:1 · APCA Lc 30
Ag
AAA黒の上
WCAG 12.46:1 · APCA Lc 73
最適な文字色: #000000
WCAG 12.46:1 (AAA) · APCA Lc 73
Contrast pairs
コードスニペット
CSS
:root {
--light-blue-grey: #b7c9e2;
--light-blue-grey-rgb: 183 201 226;
--light-blue-grey-oklch: oklch(0.83 0.04 256.6);
}
.element {
color: var(--light-blue-grey);
background-color: hsl(215 43% 80%);
border-color: oklch(0.83 0.04 256.6);
}Tailwind CSS v4
@theme {
--color-light-blue-grey: #b7c9e2;
--color-light-blue-grey-50: #eef6ff;
--color-light-blue-grey-100: #e0e9f6;
--color-light-blue-grey-200: #cad5e6;
--color-light-blue-grey-300: #abb8cc;
--color-light-blue-grey-400: #8fa0b7;
--color-light-blue-grey-500: #7588a1;
--color-light-blue-grey-600: #637388;
--color-light-blue-grey-700: #4f5c6d;
--color-light-blue-grey-800: #394350;
--color-light-blue-grey-900: #272e38;
--color-light-blue-grey-950: #151b23;
}SCSS
$light-blue-grey: #b7c9e2;
$light-blue-grey-rgb: 183, 201, 226;
$light-blue-grey-light: mix(#fff, $light-blue-grey, 20%);
$light-blue-grey-dark: mix(#000, $light-blue-grey, 20%);
.element {
color: $light-blue-grey;
box-shadow: 0 0 0 2px rgba($light-blue-grey, 0.35);
}