色名 · #BAC4D5
Candela
Candelaは#BAC4D5：rgb(186 196 213)、hsl(218 24% 78%)、oklch(0.818 0.026 261.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Candela color name →
#BAC4D5
oklch(0.818 0.026 261.1)
カラー変換
- HEX
- #bac4d5
- RGB
- rgb(186 196 213)
- HSL
- hsl(218 24% 78%)
- HWB
- hwb(218 73% 16%)
- OKLCH
- oklch(0.818 0.026 261.1)
- OKLab
- oklab(0.818 -0.004 -0.026)
- CIE Lab
- lab(78.77 -1.02 -9.77)
- LCH
- lch(78.77 9.82 264.1)
- CMYK
- cmyk(13% 8% 0% 16%)
ティント · シェード · トーン
ティント
- C1CAD9
- C7D0DD
- CED5E2
- D5DBE6
- DCE1EA
- E3E7EE
- EAEDF2
- F1F3F7
- F8F9FB
シェード
- A1AAB9
- 89919E
- 727883
- 5C616A
- 464A51
- 32353A
- 1E2124
- 0D0E10
- 020202
トーン
- B4BDCC
- AEB6C3
- A8AFBB
- A2A8B2
- 9DA1AA
- 979BA1
- 919499
- 8B8D90
- 868788
カラーハーモニー
補色 +180°
- BAC4D5
Candela
- CCC2B1
≈ Soft Pelican
類似色 -30° +30°
- BAC4D5
Candela
- B3C7D2
≈ Celestyn
- C3C1D4
≈ Estate Violet
トライアド +120° +240°
- BAC4D5
Candela
- D4BDBC
≈ Embroidery
- BAC8B8
≈ Pond’s Edge
スプリットコンプリメンタリー +150° +210°
- BAC4D5
Candela
- D2BFB4
≈ Summer Bloom
- C4C5B2
≈ Spring Grey
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.75:1 · APCA Lc 32
Ag
AAA黒の上
WCAG 11.94:1 · APCA Lc 71
最適な文字色: #000000
WCAG 11.94:1 (AAA) · APCA Lc 71
Contrast pairs
コードスニペット
CSS
:root {
--candela: #bac4d5;
--candela-rgb: 186 196 213;
--candela-oklch: oklch(0.818 0.026 261.1);
}
.element {
color: var(--candela);
background-color: hsl(218 24% 78%);
border-color: oklch(0.818 0.026 261.1);
}Tailwind CSS v4
@theme {
--color-candela: #bac4d5;
--color-candela-50: #f1f5fd;
--color-candela-100: #e3e8f1;
--color-candela-200: #ced4e0;
--color-candela-300: #b0b8c5;
--color-candela-400: #969fae;
--color-candela-500: #7c8798;
--color-candela-600: #697281;
--color-candela-700: #545b67;
--color-candela-800: #3d434c;
--color-candela-900: #2a2e35;
--color-candela-950: #171b20;
}SCSS
$candela: #bac4d5;
$candela-rgb: 186, 196, 213;
$candela-light: mix(#fff, $candela, 20%);
$candela-dark: mix(#000, $candela, 20%);
.element {
color: $candela;
box-shadow: 0 0 0 2px rgba($candela, 0.35);
}