最接近的命名颜色 · #A0C7DB
#A0C7DB
最接近的命名颜色: Neptune’s Realm
#A0C7DB（rgb(160 199 219)、hsl(200 45% 74%)、oklch(0.808 0.05 230.4)）最接近命名颜色 Neptune’s Realm。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#A0C7DB
oklch(0.808 0.05 230.4)
颜色转换
- HEX
- #a0c7db
- RGB
- rgb(160 199 219)
- HSL
- hsl(200 45% 74%)
- HWB
- hwb(200 63% 14%)
- OKLCH
- oklch(0.808 0.05 230.4)
- OKLab
- oklab(0.808 -0.032 -0.039)
- CIE Lab
- lab(77.91 -10.01 -14.49)
- LCH
- lch(77.91 17.61 235.4)
- CMYK
- cmyk(27% 9% 0% 14%)
浅色调 · 深色调 · 灰色调
浅色调
- AACDDF
- B3D2E2
- BCD8E6
- C6DDEA
- CFE3ED
- D9E8F1
- E2EEF4
- ECF4F8
- F5F9FB
深色调
- 8BADBE
- 7693A2
- 617A87
- 4E626D
- 3B4C54
- 29363C
- 192126
- 090E11
- 010202
灰色调
- 9DC0D2
- 9AB8C8
- 97B1BF
- 94AAB6
- 91A3AD
- 8D9CA3
- 8A959B
- 878E92
- 838789
配色和谐
互补色 +180°
- A0C7DB
Neptune’s Realm
- DCB8A4
≈ Camel Hair
类似色 -30° +30°
- A0C7DB
Neptune’s Realm
- 9BCBCD
≈ Pentagon
- AEC1E1
≈ Promise
三角配色 +120° +240°
- A0C7DB
Neptune’s Realm
- DBB4C5
≈ Mental Floss
- C1C49F
≈ Chameleon Tango
分裂互补色 +150° +210°
- A0C7DB
Neptune’s Realm
- DFB4B3
≈ Peachskin
- D1BD9C
≈ Pony Tail
四角配色 +90° +180° +270°
- A0C7DB
Neptune’s Realm
- CFB6D5
≈ Confectionary
- DCB8A4
≈ Camel Hair
- B0C9AA
≈ Relish
对比度与无障碍
Ag
Fail白底
WCAG 1.79:1 · APCA Lc 33
Ag
AAA黑底
WCAG 11.68:1 · APCA Lc 69
最佳文字颜色: #000000
WCAG 11.68:1 (AAA) · APCA Lc 69
Contrast pairs
代码片段
CSS
:root {
--neptune-s-realm: #a0c7db;
--neptune-s-realm-rgb: 160 199 219;
--neptune-s-realm-oklch: oklch(0.808 0.05 230.4);
}
.element {
color: var(--neptune-s-realm);
background-color: hsl(200 45% 74%);
border-color: oklch(0.808 0.05 230.4);
}Tailwind CSS v4
@theme {
--color-neptune-s-realm: #a0c7db;
--color-neptune-s-realm-50: #e8f8ff;
--color-neptune-s-realm-100: #d8ebf6;
--color-neptune-s-realm-200: #c0d9e6;
--color-neptune-s-realm-300: #9fbccd;
--color-neptune-s-realm-400: #81a4b7;
--color-neptune-s-realm-500: #638da1;
--color-neptune-s-realm-600: #557788;
--color-neptune-s-realm-700: #435f6d;
--color-neptune-s-realm-800: #304650;
--color-neptune-s-realm-900: #203038;
--color-neptune-s-realm-950: #101d22;
}SCSS
$neptune-s-realm: #a0c7db;
$neptune-s-realm-rgb: 160, 199, 219;
$neptune-s-realm-light: mix(#fff, $neptune-s-realm, 20%);
$neptune-s-realm-dark: mix(#000, $neptune-s-realm, 20%);
.element {
color: $neptune-s-realm;
box-shadow: 0 0 0 2px rgba($neptune-s-realm, 0.35);
}