最接近的命名颜色 · #4EA8AF
#4EA8AF
最接近的命名颜色: Thalassa
#4EA8AF（rgb(78 168 175)、hsl(184 38% 50%)、oklch(0.68 0.086 202.2)）最接近命名颜色 Thalassa。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#4EA8AF
oklch(0.68 0.086 202.2)
颜色转换
- HEX
- #4ea8af
- RGB
- rgb(78 168 175)
- HSL
- hsl(184 38% 50%)
- HWB
- hwb(184 31% 31%)
- OKLCH
- oklch(0.68 0.086 202.2)
- OKLab
- oklab(0.68 -0.08 -0.033)
- CIE Lab
- lab(63.64 -26.45 -12.27)
- LCH
- lch(63.64 29.16 204.9)
- CMYK
- cmyk(55% 4% 0% 31%)
浅色调 · 深色调 · 灰色调
浅色调
- 63B1B7
- 76B9BF
- 88C2C7
- 99CBCF
- ABD3D7
- BCDCDF
- CDE5E7
- DDEDEF
- EEF6F7
深色调
- 439298
- 387C81
- 2D676B
- 235256
- 193F41
- 0F2C2E
- 071A1C
- 020A0B
- 000101
灰色调
- 56A4AA
- 5DA0A5
- 639CA1
- 68989C
- 6D9497
- 729093
- 768C8E
- 7A8889
- 7D8485
配色和谐
互补色 +180°
- 4EA8AF
Thalassa
- C88380
≈ Prancer
类似色 -30° +30°
- 4EA8AF
Thalassa
- 5BAA92
≈ O’grady Green
- 5EA2C4
≈ Scott Base
三角配色 +120° +240°
- 4EA8AF
Thalassa
- B286B8
≈ African Violet
- B39358
≈ Jungle Expedition
分裂互补色 +150° +210°
- 4EA8AF
Thalassa
- C2829D
≈ Cashmere Rose
- C38966
≈ Sassy
四角配色 +90° +180° +270°
- 4EA8AF
Thalassa
- 998FC9
≈ Hermosa
- C88380
≈ Prancer
- 999E5E
≈ Sweet Pea
对比度与无障碍
Ag
Fail白底
WCAG 2.78:1 · APCA Lc 53
Ag
AAA黑底
WCAG 7.54:1 · APCA Lc 48
最佳文字颜色: #000000
WCAG 7.54:1 (AAA) · APCA Lc 48
Contrast pairs
代码片段
CSS
:root {
--thalassa: #4ea8af;
--thalassa-rgb: 78 168 175;
--thalassa-oklch: oklch(0.68 0.086 202.2);
}
.element {
color: var(--thalassa);
background-color: hsl(184 38% 50%);
border-color: oklch(0.68 0.086 202.2);
}Tailwind CSS v4
@theme {
--color-thalassa: #4ea8af;
--color-thalassa-50: #dafdff;
--color-thalassa-100: #c8f1f5;
--color-thalassa-200: #a9e0e5;
--color-thalassa-300: #81c5cc;
--color-thalassa-400: #5aaeb4;
--color-thalassa-500: #2a979f;
--color-thalassa-600: #268086;
--color-thalassa-700: #1f666b;
--color-thalassa-800: #144b4e;
--color-thalassa-900: #0d3436;
--color-thalassa-950: #012021;
}SCSS
$thalassa: #4ea8af;
$thalassa-rgb: 78, 168, 175;
$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);
}