命名颜色 · #678F8A
Oil Blue
Oil Blue 即 #678F8A：rgb(103 143 138)、hsl(173 16% 48%)、oklch(0.619 0.045 186.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Oil Blue color name →
#678F8A
oklch(0.619 0.045 186.5)
颜色转换
- HEX
- #678f8a
- RGB
- rgb(103 143 138)
- HSL
- hsl(173 16% 48%)
- HWB
- hwb(173 40% 44%)
- OKLCH
- oklch(0.619 0.045 186.5)
- OKLab
- oklab(0.619 -0.045 -0.005)
- CIE Lab
- lab(56.34 -15.19 -2.04)
- LCH
- lch(56.34 15.33 187.6)
- CMYK
- cmyk(28% 0% 3% 44%)
浅色调 · 深色调 · 灰色调
浅色调
- 769A95
- 85A5A0
- 93B0AC
- A2BBB7
- B1C6C3
- C1D1CF
- D0DCDB
- E0E8E7
- EFF3F3
深色调
- 597C77
- 4B6965
- 3D5753
- 304542
- 233432
- 172422
- 0C1514
- 040707
- 000101
灰色调
- 6A8E89
- 6D8C88
- 6F8B87
- 728986
- 758885
- 778684
- 798583
- 7C8382
- 7E8281
配色和谐
互补色 +180°
- 678F8A
Oil Blue
- 9E7B81
≈ Mulberry Wine
类似色 -30° +30°
- 678F8A
Oil Blue
- 708E7B
≈ Ivy Wreath
- 678D97
≈ Oarsman Blue
三角配色 +120° +240°
- 678F8A
Oil Blue
- 8D7F9C
≈ Wildflower
- 998169
≈ Chocolate Moment
分裂互补色 +150° +210°
- 678F8A
Oil Blue
- 987C90
≈ Mountbatten Pink
- 9F7D73
≈ Wild Hemp
四角配色 +90° +180° +270°
对比度与无障碍
Ag
Fail白底
WCAG 3.57:1 · APCA Lc 63
Ag
AA黑底
WCAG 5.87:1 · APCA Lc 38
最佳文字颜色: #000000
WCAG 5.87:1 (AA) · APCA Lc 38
Contrast pairs
代码片段
CSS
:root {
--oil-blue: #678f8a;
--oil-blue-rgb: 103 143 138;
--oil-blue-oklch: oklch(0.619 0.045 186.5);
}
.element {
color: var(--oil-blue);
background-color: hsl(173 16% 48%);
border-color: oklch(0.619 0.045 186.5);
}Tailwind CSS v4
@theme {
--color-oil-blue: #678f8a;
--color-oil-blue-50: #e8faf7;
--color-oil-blue-100: #d8edeb;
--color-oil-blue-200: #c0dbd8;
--color-oil-blue-300: #9ebfbc;
--color-oil-blue-400: #81a7a2;
--color-oil-blue-500: #64908b;
--color-oil-blue-600: #557a75;
--color-oil-blue-700: #44625e;
--color-oil-blue-800: #314844;
--color-oil-blue-900: #21322f;
--color-oil-blue-950: #101e1c;
}SCSS
$oil-blue: #678f8a;
$oil-blue-rgb: 103, 143, 138;
$oil-blue-light: mix(#fff, $oil-blue, 20%);
$oil-blue-dark: mix(#000, $oil-blue, 20%);
.element {
color: $oil-blue;
box-shadow: 0 0 0 2px rgba($oil-blue, 0.35);
}