最接近的命名颜色 · #3A6B77
#3A6B77
最接近的命名颜色: Ocean’s Embrace
#3A6B77（rgb(58 107 119)、hsl(192 34% 35%)、oklch(0.498 0.056 215.4)）最接近命名颜色 Ocean’s Embrace。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#3A6B77
oklch(0.498 0.056 215.4)
颜色转换
- HEX
- #3a6b77
- RGB
- rgb(58 107 119)
- HSL
- hsl(192 34% 35%)
- HWB
- hwb(192 23% 53%)
- OKLCH
- oklch(0.498 0.056 215.4)
- OKLab
- oklab(0.498 -0.046 -0.033)
- CIE Lab
- lab(42.15 -14.61 -12.17)
- LCH
- lch(42.15 19.01 219.8)
- CMYK
- cmyk(51% 10% 0% 53%)
浅色调 · 深色调 · 灰色调
浅色调
- 4E7984
- 618791
- 74959E
- 87A4AB
- 9AB3B9
- AEC1C7
- C2D1D5
- D6E0E3
- EAEFF1
深色调
- 315C67
- 284E57
- 203F47
- 183238
- 10252A
- 09181C
- 040D10
- 010405
- 000001
灰色调
- 426D78
- 4A6F79
- 51727A
- 58747B
- 5F767C
- 66787D
- 6D7A7D
- 737C7E
- 7A7E7F
配色和谐
互补色 +180°
- 3A6B77
Ocean’s Embrace
- 7F574D
≈ Root Beer
类似色 -30° +30°
- 3A6B77
Ocean’s Embrace
- 3A6D67
≈ Deep Pool Teal
- 476681
≈ Stellar
三角配色 +120° +240°
- 3A6B77
Ocean’s Embrace
- 77576F
≈ Exotic Orchid
- 6C633D
≈ Bronze Medal
分裂互补色 +150° +210°
- 3A6B77
Ocean’s Embrace
- 7F555E
≈ Rose Branch
- 795C40
≈ Wooden Cabin
四角配色 +90° +180° +270°
- 3A6B77
Ocean’s Embrace
- 6A5B7D
≈ Napa Winery
- 7F574D
≈ Root Beer
- 5B6945
≈ Baby Vegetable
对比度与无障碍
Ag
AA白底
WCAG 5.91:1 · APCA Lc 79
Ag
Fail黑底
WCAG 3.54:1 · APCA Lc 22
最佳文字颜色: #FFFFFF
WCAG 5.91:1 (AA) · APCA Lc 79
Contrast pairs
代码片段
CSS
:root {
--ocean-s-embrace: #3a6b77;
--ocean-s-embrace-rgb: 58 107 119;
--ocean-s-embrace-oklch: oklch(0.498 0.056 215.4);
}
.element {
color: var(--ocean-s-embrace);
background-color: hsl(192 34% 35%);
border-color: oklch(0.498 0.056 215.4);
}Tailwind CSS v4
@theme {
--color-ocean-s-embrace: #3a6b77;
--color-ocean-s-embrace-50: #e4faff;
--color-ocean-s-embrace-100: #d4edf4;
--color-ocean-s-embrace-200: #badbe4;
--color-ocean-s-embrace-300: #98bfca;
--color-ocean-s-embrace-400: #78a7b4;
--color-ocean-s-embrace-500: #59909e;
--color-ocean-s-embrace-600: #4c7a85;
--color-ocean-s-embrace-700: #3c616b;
--color-ocean-s-embrace-800: #2a484e;
--color-ocean-s-embrace-900: #1d3236;
--color-ocean-s-embrace-950: #0c1e21;
}SCSS
$ocean-s-embrace: #3a6b77;
$ocean-s-embrace-rgb: 58, 107, 119;
$ocean-s-embrace-light: mix(#fff, $ocean-s-embrace, 20%);
$ocean-s-embrace-dark: mix(#000, $ocean-s-embrace, 20%);
.element {
color: $ocean-s-embrace;
box-shadow: 0 0 0 2px rgba($ocean-s-embrace, 0.35);
}