命名颜色 · #A1C8DB
Piezo Blue
Piezo Blue 即 #A1C8DB：rgb(161 200 219)、hsl(200 45% 75%)、oklch(0.811 0.049 229.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Cyan mean? → · Piezo Blue color name →
#A1C8DB
oklch(0.811 0.049 229.1)
颜色转换
- HEX
- #a1c8db
- RGB
- rgb(161 200 219)
- HSL
- hsl(200 45% 75%)
- HWB
- hwb(200 63% 14%)
- OKLCH
- oklch(0.811 0.049 229.1)
- OKLab
- oklab(0.811 -0.032 -0.037)
- CIE Lab
- lab(78.25 -10.18 -13.99)
- LCH
- lch(78.25 17.3 233.9)
- CMYK
- cmyk(26% 9% 0% 14%)
浅色调 · 深色调 · 灰色调
浅色调
- AACDDF
- B4D3E2
- BDD8E6
- C7DEE9
- D0E3ED
- D9E9F1
- E3EEF4
- ECF4F8
- F6F9FB
深色调
- 8BAEBE
- 7694A2
- 627B87
- 4E636D
- 3C4C54
- 2A363C
- 192126
- 090F11
- 010202
灰色调
- 9EC1D2
- 9BB9C8
- 98B2BF
- 94ABB6
- 91A3AD
- 8E9CA3
- 8A959A
- 878E92
- 838789
配色和谐
互补色 +180°
- A1C8DB
Piezo Blue
- DDB9A6
≈ Coral Bay
类似色 -30° +30°
- A1C8DB
Piezo Blue
- 9CCBCD
≈ Aqua Mist
- AEC3E2
≈ Simply Sparkling
三角配色 +120° +240°
- A1C8DB
Piezo Blue
- DBB5C6
≈ Kunzite
- C3C4A0
≈ Sage Splendour
分裂互补色 +150° +210°
- A1C8DB
Piezo Blue
- E0B5B5
≈ Cherry Tree
- D3BE9E
≈ Eire
四角配色 +90° +180° +270°
- A1C8DB
Piezo Blue
- CFB8D6
≈ Pussyfoot
- DDB9A6
≈ Coral Bay
- B1C9AB
≈ Relish
对比度与无障碍
Ag
Fail白底
WCAG 1.77:1 · APCA Lc 33
Ag
AAA黑底
WCAG 11.80:1 · APCA Lc 70
最佳文字颜色: #000000
WCAG 11.80:1 (AAA) · APCA Lc 70
Contrast pairs
代码片段
CSS
:root {
--piezo-blue: #a1c8db;
--piezo-blue-rgb: 161 200 219;
--piezo-blue-oklch: oklch(0.811 0.049 229.1);
}
.element {
color: var(--piezo-blue);
background-color: hsl(200 45% 75%);
border-color: oklch(0.811 0.049 229.1);
}Tailwind CSS v4
@theme {
--color-piezo-blue: #a1c8db;
--color-piezo-blue-50: #e8f8ff;
--color-piezo-blue-100: #d8ebf6;
--color-piezo-blue-200: #c0d9e6;
--color-piezo-blue-300: #9fbdcc;
--color-piezo-blue-400: #81a5b6;
--color-piezo-blue-500: #648da1;
--color-piezo-blue-600: #557788;
--color-piezo-blue-700: #435f6d;
--color-piezo-blue-800: #304650;
--color-piezo-blue-900: #203038;
--color-piezo-blue-950: #101d22;
}SCSS
$piezo-blue: #a1c8db;
$piezo-blue-rgb: 161, 200, 219;
$piezo-blue-light: mix(#fff, $piezo-blue, 20%);
$piezo-blue-dark: mix(#000, $piezo-blue, 20%);
.element {
color: $piezo-blue;
box-shadow: 0 0 0 2px rgba($piezo-blue, 0.35);
}