命名颜色 · #BBCCDD
Arctic Grey
Arctic Grey 即 #BBCCDD：rgb(187 204 221)、hsl(210 33% 80%)、oklch(0.838 0.03 248.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Arctic Grey color name →
#BBCCDD
oklch(0.838 0.03 248.2)
颜色转换
- HEX
- #bbccdd
- RGB
- rgb(187 204 221)
- HSL
- hsl(210 33% 80%)
- HWB
- hwb(210 73% 13%)
- OKLCH
- oklch(0.838 0.03 248.2)
- OKLab
- oklab(0.838 -0.011 -0.028)
- CIE Lab
- lab(81.14 -3.38 -10.54)
- LCH
- lch(81.14 11.06 252.2)
- CMYK
- cmyk(15% 8% 0% 13%)
浅色调 · 深色调 · 灰色调
浅色调
- C2D1E0
- C8D6E4
- CFDBE7
- D6E0EB
- DDE5EE
- E3EAF1
- EAF0F5
- F1F5F8
- F8FAFC
深色调
- A2B1C0
- 8A97A4
- 737E88
- 5C656E
- 464E55
- 32373D
- 1F2226
- 0D0F11
- 020202
灰色调
- B5C4D3
- AFBCCA
- A9B5C0
- A3ADB7
- 9DA5AD
- 979EA4
- 91969B
- 8C8F92
- 868789
配色和谐
互补色 +180°
- BBCCDD
Arctic Grey
- D7C7B5
≈ Dry Creek
类似色 -30° +30°
- BBCCDD
Arctic Grey
- B5CFD7
≈ Midsummer’s Dream
- C5C8DE
≈ Silver Sweetpea
三角配色 +120° +240°
- BBCCDD
Arctic Grey
- DCC2C6
≈ Bunny Pink
- C4CEB9
≈ Mellow Spring
分裂互补色 +150° +210°
- BBCCDD
Arctic Grey
- DCC4BC
≈ Shell
- CFCAB4
≈ Skipping Stone
四角配色 +90° +180° +270°
- BBCCDD
Arctic Grey
- D8C3D1
≈ Mauve Organdie
- D7C7B5
≈ Dry Creek
- BAD0C2
≈ Spray of Mint
对比度与无障碍
Ag
Fail白底
WCAG 1.64:1 · APCA Lc 28
Ag
AAA黑底
WCAG 12.79:1 · APCA Lc 74
最佳文字颜色: #000000
WCAG 12.79:1 (AAA) · APCA Lc 74
Contrast pairs
代码片段
CSS
:root {
--arctic-grey: #bbccdd;
--arctic-grey-rgb: 187 204 221;
--arctic-grey-oklch: oklch(0.838 0.03 248.2);
}
.element {
color: var(--arctic-grey);
background-color: hsl(210 33% 80%);
border-color: oklch(0.838 0.03 248.2);
}Tailwind CSS v4
@theme {
--color-arctic-grey: #bbccdd;
--color-arctic-grey-50: #eff6fe;
--color-arctic-grey-100: #e1e9f2;
--color-arctic-grey-200: #cbd6e1;
--color-arctic-grey-300: #acb9c7;
--color-arctic-grey-400: #91a0b0;
--color-arctic-grey-500: #77889a;
--color-arctic-grey-600: #657382;
--color-arctic-grey-700: #505c68;
--color-arctic-grey-800: #3a444c;
--color-arctic-grey-900: #282f35;
--color-arctic-grey-950: #161b20;
}SCSS
$arctic-grey: #bbccdd;
$arctic-grey-rgb: 187, 204, 221;
$arctic-grey-light: mix(#fff, $arctic-grey, 20%);
$arctic-grey-dark: mix(#000, $arctic-grey, 20%);
.element {
color: $arctic-grey;
box-shadow: 0 0 0 2px rgba($arctic-grey, 0.35);
}