色名 · #BDC9E3
Hindsight
Hindsightは#BDC9E3：rgb(189 201 227)、hsl(221 40% 82%)、oklch(0.835 0.039 265.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Hindsight color name →
#BDC9E3
oklch(0.835 0.039 265.8)
カラー変換
- HEX
- #bdc9e3
- RGB
- rgb(189 201 227)
- HSL
- hsl(221 40% 82%)
- HWB
- hwb(221 74% 11%)
- OKLCH
- oklch(0.835 0.039 265.8)
- OKLab
- oklab(0.835 -0.003 -0.039)
- CIE Lab
- lab(80.66 -0.27 -14.43)
- LCH
- lch(80.66 14.43 268.9)
- CMYK
- cmyk(17% 11% 0% 11%)
ティント · シェード · トーン
ティント
- C3CEE6
- CAD4E9
- D0D9EC
- D7DEEE
- DEE4F1
- E4E9F4
- EBEFF7
- F2F4FA
- F8FAFC
シェード
- A4AEC5
- 8C95A8
- 747C8C
- 5D6471
- 474C57
- 33363F
- 1F2227
- 0D0F12
- 020203
トーン
- B7C1D9
- B0BACE
- AAB3C4
- A4ABBA
- 9EA4B0
- 989DA7
- 92959D
- 8C8E93
- 868789
カラーハーモニー
補色 +180°
- BDC9E3
Hindsight
- D4C8AD
≈ Prairie House
類似色 -30° +30°
- BDC9E3
Hindsight
- B2CEDF
≈ Crystal Waters
- CBC4E0
≈ Lavender Bliss
トライアド +120° +240°
- BDC9E3
Hindsight
- E1C0BC
≈ Slubbed Silk
- BAD0BA
≈ Sunlit Sea
スプリットコンプリメンタリー +150° +210°
- BDC9E3
Hindsight
- DEC3B1
≈ Coral Stone
- C7CCB0
≈ Growing Season
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.66:1 · APCA Lc 29
Ag
AAA黒の上
WCAG 12.62:1 · APCA Lc 74
最適な文字色: #000000
WCAG 12.62:1 (AAA) · APCA Lc 74
Contrast pairs
コードスニペット
CSS
:root {
--hindsight: #bdc9e3;
--hindsight-rgb: 189 201 227;
--hindsight-oklch: oklch(0.835 0.039 265.8);
}
.element {
color: var(--hindsight);
background-color: hsl(221 40% 82%);
border-color: oklch(0.835 0.039 265.8);
}Tailwind CSS v4
@theme {
--color-hindsight: #bdc9e3;
--color-hindsight-50: #f0f5ff;
--color-hindsight-100: #e2e8f5;
--color-hindsight-200: #cdd4e5;
--color-hindsight-300: #afb7cc;
--color-hindsight-400: #949eb6;
--color-hindsight-500: #7a86a1;
--color-hindsight-600: #677288;
--color-hindsight-700: #535b6d;
--color-hindsight-800: #3c4250;
--color-hindsight-900: #292e38;
--color-hindsight-950: #171b22;
}SCSS
$hindsight: #bdc9e3;
$hindsight-rgb: 189, 201, 227;
$hindsight-light: mix(#fff, $hindsight, 20%);
$hindsight-dark: mix(#000, $hindsight, 20%);
.element {
color: $hindsight;
box-shadow: 0 0 0 2px rgba($hindsight, 0.35);
}