命名颜色 · #A2CDCB
Ice Boutique Turquoise
Ice Boutique Turquoise 即 #A2CDCB：rgb(162 205 203)、hsl(177 30% 72%)、oklch(0.817 0.045 192.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Ice Boutique Turquoise color name →
#A2CDCB
oklch(0.817 0.045 192.8)
颜色转换
- HEX
- #a2cdcb
- RGB
- rgb(162 205 203)
- HSL
- hsl(177 30% 72%)
- HWB
- hwb(177 64% 20%)
- OKLCH
- oklch(0.817 0.045 192.8)
- OKLab
- oklab(0.817 -0.044 -0.01)
- CIE Lab
- lab(79.29 -14.97 -3.91)
- LCH
- lch(79.29 15.47 194.6)
- CMYK
- cmyk(21% 0% 1% 20%)
浅色调 · 深色调 · 灰色调
浅色调
- ABD2D0
- B5D7D5
- BEDCDA
- C7E1E0
- D1E6E5
- DAEBEA
- E3F0EF
- ECF5F4
- F6FAFA
深色调
- 8CB2B0
- 779896
- 637E7D
- 4F6665
- 3C4E4D
- 2A3837
- 192322
- 0A0F0F
- 010202
灰色调
- 9FC5C3
- 9CBDBC
- 98B5B4
- 95AEAC
- 92A6A5
- 8E9E9D
- 8B9696
- 878F8E
- 848787
配色和谐
互补色 +180°
- A2CDCB
Ice Boutique Turquoise
- DFB8BB
≈ Shy Young Salmon
类似色 -30° +30°
- A2CDCB
Ice Boutique Turquoise
- AACDBB
≈ Greywacke
- A4CAD9
≈ Vast Sky
三角配色 +120° +240°
- A2CDCB
Ice Boutique Turquoise
- CDBBD9
≈ Petite Purple
- D6BFA4
≈ Pine Strain
分裂互补色 +150° +210°
- A2CDCB
Ice Boutique Turquoise
- D9B8CB
≈ Spring Boutique
- DEBAAC
≈ Pickled Pork
四角配色 +90° +180° +270°
- A2CDCB
Ice Boutique Turquoise
- BEC0E0
≈ Rhapsody Lilac
- DFB8BB
≈ Shy Young Salmon
- C8C5A4
≈ Ta Prohm
对比度与无障碍
Ag
Fail白底
WCAG 1.73:1 · APCA Lc 31
Ag
AAA黑底
WCAG 12.13:1 · APCA Lc 71
最佳文字颜色: #000000
WCAG 12.13:1 (AAA) · APCA Lc 71
Contrast pairs
代码片段
CSS
:root {
--ice-boutique-turquoise: #a2cdcb;
--ice-boutique-turquoise-rgb: 162 205 203;
--ice-boutique-turquoise-oklch: oklch(0.817 0.045 192.8);
}
.element {
color: var(--ice-boutique-turquoise);
background-color: hsl(177 30% 72%);
border-color: oklch(0.817 0.045 192.8);
}Tailwind CSS v4
@theme {
--color-ice-boutique-turquoise: #a2cdcb;
--color-ice-boutique-turquoise-50: #e7faf9;
--color-ice-boutique-turquoise-100: #d7edec;
--color-ice-boutique-turquoise-200: #bfdbda;
--color-ice-boutique-turquoise-300: #9dbfbe;
--color-ice-boutique-turquoise-400: #80a7a6;
--color-ice-boutique-turquoise-500: #62908e;
--color-ice-boutique-turquoise-600: #547a78;
--color-ice-boutique-turquoise-700: #436260;
--color-ice-boutique-turquoise-800: #304846;
--color-ice-boutique-turquoise-900: #203230;
--color-ice-boutique-turquoise-950: #101e1d;
}SCSS
$ice-boutique-turquoise: #a2cdcb;
$ice-boutique-turquoise-rgb: 162, 205, 203;
$ice-boutique-turquoise-light: mix(#fff, $ice-boutique-turquoise, 20%);
$ice-boutique-turquoise-dark: mix(#000, $ice-boutique-turquoise, 20%);
.element {
color: $ice-boutique-turquoise;
box-shadow: 0 0 0 2px rgba($ice-boutique-turquoise, 0.35);
}