命名颜色 · #8AF1FE
Shallow Water
Shallow Water 即 #8AF1FE：rgb(138 241 254)、hsl(187 98% 77%)、oklch(0.9 0.098 206.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Cyan mean? → · Shallow Water color name →
#8AF1FE
oklch(0.9 0.098 206.1)
颜色转换
- HEX
- #8af1fe
- RGB
- rgb(138 241 254)
- HSL
- hsl(187 98% 77%)
- HWB
- hwb(187 54% 0%)
- OKLCH
- oklch(0.9 0.098 206.1)
- OKLab
- oklab(0.9 -0.088 -0.043)
- CIE Lab
- lab(89.26 -28.9 -16.19)
- LCH
- lch(89.26 33.13 209.3)
- CMYK
- cmyk(46% 5% 0% 0%)
浅色调 · 深色调 · 灰色调
浅色调
- 98F3FE
- A5F4FE
- B2F6FF
- BEF7FF
- C9F9FF
- D5FAFF
- E0FBFF
- EAFDFF
- F5FEFF
深色调
- 77D2DD
- 65B3BD
- 53959E
- 427980
- 325D63
- 224347
- 142B2D
- 071416
- 010303
灰色调
- 8BE5F1
- 8BDAE4
- 8BCED7
- 8BC3CA
- 8AB7BD
- 89ACB1
- 87A1A4
- 859698
- 838B8C
配色和谐
互补色 +180°
- 8AF1FE
Shallow Water
- FFD2CC
≈ Girlie
类似色 -30° +30°
- 8AF1FE
Shallow Water
- 94F4DC
≈ Turquoise Pearl
- BBE5FF
≈ Breaking the Ice
三角配色 +120° +240°
- 8AF1FE
Shallow Water
- FFC9FF
≈ Sugar Chic
- FBDA92
≈ Cooled Cream
分裂互补色 +150° +210°
- 8AF1FE
Shallow Water
- FFCFDF
≈ Bologna Sausage
- FFD4B7
≈ Sensual Peach
四角配色 +90° +180° +270°
- 8AF1FE
Shallow Water
- E1D7FF
≈ Transparent Blue
- FFD2CC
≈ Girlie
- DAE79B
≈ Fresh Frappé
对比度与无障碍
Ag
Fail白底
WCAG 1.30:1 · APCA Lc 15
Ag
AAA黑底
WCAG 16.09:1 · APCA Lc 89
最佳文字颜色: #000000
WCAG 16.09:1 (AAA) · APCA Lc 89
Contrast pairs
代码片段
CSS
:root {
--shallow-water: #8af1fe;
--shallow-water-rgb: 138 241 254;
--shallow-water-oklch: oklch(0.9 0.098 206.1);
}
.element {
color: var(--shallow-water);
background-color: hsl(187 98% 77%);
border-color: oklch(0.9 0.098 206.1);
}Tailwind CSS v4
@theme {
--color-shallow-water: #8af1fe;
--color-shallow-water-50: #d6feff;
--color-shallow-water-100: #c3f2f9;
--color-shallow-water-200: #a3e1ea;
--color-shallow-water-300: #78c6d2;
--color-shallow-water-400: #4cafbb;
--color-shallow-water-500: #0098a6;
--color-shallow-water-600: #07818c;
--color-shallow-water-700: #096770;
--color-shallow-water-800: #034c52;
--color-shallow-water-900: #043539;
--color-shallow-water-950: #002023;
}SCSS
$shallow-water: #8af1fe;
$shallow-water-rgb: 138, 241, 254;
$shallow-water-light: mix(#fff, $shallow-water, 20%);
$shallow-water-dark: mix(#000, $shallow-water, 20%);
.element {
color: $shallow-water;
box-shadow: 0 0 0 2px rgba($shallow-water, 0.35);
}