命名颜色 · #B8C0C3
Krypton
Krypton 即 #B8C0C3:rgb(184 192 195)、hsl(196 8% 74%)、oklch(0.802 0.01 222.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度,以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Krypton color name →
#B8C0C3
oklch(0.802 0.01 222.1)
颜色转换
- HEX
- #b8c0c3
- RGB
- rgb(184 192 195)
- HSL
- hsl(196 8% 74%)
- HWB
- hwb(196 72% 24%)
- OKLCH
- oklch(0.802 0.01 222.1)
- OKLab
- oklab(0.802 -0.007 -0.007)
- CIE Lab
- lab(77.14 -2.43 -2.53)
- LCH
- lch(77.14 3.51 226.1)
- CMYK
- cmyk(6% 2% 0% 24%)
浅色调 · 深色调 · 灰色调
浅色调
- BFC6C9
- C6CCCF
- CDD3D5
- D4D9DB
- DBDFE1
- E2E5E7
- E9ECED
- F0F2F3
- F8F9F9
深色调
- A0A7A9
- 888E90
- 717678
- 5B5F60
- 45494A
- 313434
- 1E2020
- 0C0E0E
- 020202
灰色调
- B2B9BC
- ADB3B5
- A7ACAE
- A1A6A8
- 9C9FA1
- 96999A
- 909394
- 8B8C8D
- 858686
配色和谐
互补色 +180°
- B8C0C3
Krypton
- C4BDBA
≈ Hush
类似色 -30° +30°
- B8C0C3
Krypton
- B8C1C0
≈ Adieu
- BABFC5
≈ Blue to You
三角配色 +120° +240°
- B8C0C3
Krypton
- C3BCC0
≈ Lace Wisteria
- BFBFB8
≈ Noble Grey
分裂互补色 +150° +210°
- B8C0C3
Krypton
- C5BCBD
≈ Wallis
- C2BEB8
≈ Noble Grey
四角配色 +90° +180° +270°
- B8C0C3
Krypton
- C1BDC3
≈ Inuit Ice
- C4BDBA
≈ Hush
- BCC0B9
≈ Hailstorm Grey
对比度与无障碍
Ag
Fail白底
WCAG 1.84:1 · APCA Lc 35
Ag
AAA黑底
WCAG 11.36:1 · APCA Lc 68
最佳文字颜色: #000000
WCAG 11.36:1 (AAA) · APCA Lc 68
Contrast pairs
代码片段
CSS
:root {
--krypton: #b8c0c3;
--krypton-rgb: 184 192 195;
--krypton-oklch: oklch(0.802 0.01 222.1);
}
.element {
color: var(--krypton);
background-color: hsl(196 8% 74%);
border-color: oklch(0.802 0.01 222.1);
}Tailwind CSS v4
@theme {
--color-krypton: #b8c0c3;
--color-krypton-50: #f2f6f7;
--color-krypton-100: #e4e9ea;
--color-krypton-200: #d0d5d7;
--color-krypton-300: #b2b8bb;
--color-krypton-400: #98a0a3;
--color-krypton-500: #7f888b;
--color-krypton-600: #6c7375;
--color-krypton-700: #565c5e;
--color-krypton-800: #3f4345;
--color-krypton-900: #2b2e2f;
--color-krypton-950: #191b1c;
}SCSS
$krypton: #b8c0c3;
$krypton-rgb: 184, 192, 195;
$krypton-light: mix(#fff, $krypton, 20%);
$krypton-dark: mix(#000, $krypton, 20%);
.element {
color: $krypton;
box-shadow: 0 0 0 2px rgba($krypton, 0.35);
}