最接近的命名颜色 · #4FABB2
#4FABB2
最接近的命名颜色: Thalassa
#4FABB2（rgb(79 171 178)、hsl(184 39% 50%)、oklch(0.688 0.087 202.1)）最接近命名颜色 Thalassa。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#4FABB2
oklch(0.688 0.087 202.1)
颜色转换
- HEX
- #4fabb2
- RGB
- rgb(79 171 178)
- HSL
- hsl(184 39% 50%)
- HWB
- hwb(184 31% 30%)
- OKLCH
- oklch(0.688 0.087 202.1)
- OKLab
- oklab(0.688 -0.081 -0.033)
- CIE Lab
- lab(64.67 -26.93 -12.4)
- LCH
- lch(64.67 29.65 204.7)
- CMYK
- cmyk(56% 4% 0% 30%)
浅色调 · 深色调 · 灰色调
浅色调
- 64B3BA
- 77BCC1
- 89C4C9
- 9ACDD0
- ABD5D8
- BCDDE0
- CDE6E8
- DEEEEF
- EEF7F7
深色调
- 44949A
- 387E83
- 2E686D
- 235457
- 194043
- 102D2F
- 071B1D
- 020B0C
- 000101
灰色调
- 57A7AD
- 5EA3A8
- 649EA3
- 699A9E
- 6E9699
- 729194
- 768D8F
- 7A898A
- 7D8485
配色和谐
互补色 +180°
- 4FABB2
Thalassa
- CC8582
≈ Raspberry Ripple
类似色 -30° +30°
- 4FABB2
Thalassa
- 5CAD95
≈ O’grady Green
- 5FA5C8
≈ Ethereal Blue
三角配色 +120° +240°
- 4FABB2
Thalassa
- B589BB
≈ Violet Whimsy
- B69659
≈ Jungle Expedition
分裂互补色 +150° +210°
- 4FABB2
Thalassa
- C584A0
≈ Moonlight Mauve
- C68B68
≈ Copper Hide
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 2.69:1 · APCA Lc 52
Ag
AAA黑底
WCAG 7.80:1 · APCA Lc 50
最佳文字颜色: #000000
WCAG 7.80:1 (AAA) · APCA Lc 50
Contrast pairs
代码片段
CSS
:root {
--thalassa: #4fabb2;
--thalassa-rgb: 79 171 178;
--thalassa-oklch: oklch(0.688 0.087 202.1);
}
.element {
color: var(--thalassa);
background-color: hsl(184 39% 50%);
border-color: oklch(0.688 0.087 202.1);
}Tailwind CSS v4
@theme {
--color-thalassa: #4fabb2;
--color-thalassa-50: #d9fdff;
--color-thalassa-100: #c7f1f5;
--color-thalassa-200: #a9e0e5;
--color-thalassa-300: #80c5cc;
--color-thalassa-400: #58aeb5;
--color-thalassa-500: #26979f;
--color-thalassa-600: #248086;
--color-thalassa-700: #1d666c;
--color-thalassa-800: #124b4e;
--color-thalassa-900: #0c3436;
--color-thalassa-950: #002021;
}SCSS
$thalassa: #4fabb2;
$thalassa-rgb: 79, 171, 178;
$thalassa-light: mix(#fff, $thalassa, 20%);
$thalassa-dark: mix(#000, $thalassa, 20%);
.element {
color: $thalassa;
box-shadow: 0 0 0 2px rgba($thalassa, 0.35);
}