命名颜色 · #04D8B2
Channel Marker Green
Channel Marker Green 即 #04D8B2：rgb(4 216 178)、hsl(169 96% 43%)、oklch(0.787 0.15 173.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Teal mean? → · Channel Marker Green color name →
#04D8B2
oklch(0.787 0.15 173.8)
颜色转换
- HEX
- #04d8b2
- RGB
- rgb(4 216 178)
- HSL
- hsl(169 96% 43%)
- HWB
- hwb(169 2% 15%)
- OKLCH
- oklch(0.787 0.15 173.8)
- OKLab
- oklab(0.787 -0.149 0.016)
- CIE Lab
- lab(77.25 -52.68 5.71)
- LCH
- lch(77.25 52.98 173.8)
- CMYK
- cmyk(98% 0% 18% 15%)
浅色调 · 深色调 · 灰色调
浅色调
- 47DCB9
- 66E1C1
- 7FE5C9
- 94E9D0
- A8EDD8
- BAF1E0
- CCF4E7
- DEF8EF
- EEFCF7
深色调
- 03BC9A
- 02A083
- 01856D
- 016B57
- 005343
- 003B2F
- 00251D
- 00110C
- 000201
灰色调
- 34CFAD
- 48C6A8
- 56BDA3
- 60B59E
- 69AC99
- 6FA394
- 759A8F
- 79928A
- 7D8985
配色和谐
互补色 +180°
- 04D8B2
Channel Marker Green
- FF91C0
≈ Cochonnet
类似色 -30° +30°
- 04D8B2
Channel Marker Green
- 7AD279
≈ Electric Lettuce
- 00D2E1
≈ Aztec Turquoise
三角配色 +120° +240°
- 04D8B2
Channel Marker Green
- BEAAFF
≈ Winterspring Lilac
- FF9F5C
≈ Orange Spice
分裂互补色 +150° +210°
- 04D8B2
Channel Marker Green
- E897F0
≈ Diva Mecha
- FF9993
≈ Lolly
四角配色 +90° +180° +270°
- 04D8B2
Channel Marker Green
- 96B9FF
≈ Truesky Gloxym
- FF91C0
≈ Cochonnet
- E7B02D
≈ Nanohanacha Gold
对比度与无障碍
Ag
Fail白底
WCAG 1.83:1 · APCA Lc 34
Ag
AAA黑底
WCAG 11.47:1 · APCA Lc 69
最佳文字颜色: #000000
WCAG 11.47:1 (AAA) · APCA Lc 69
Contrast pairs
代码片段
CSS
:root {
--channel-marker-green: #04d8b2;
--channel-marker-green-rgb: 4 216 178;
--channel-marker-green-oklch: oklch(0.787 0.15 173.8);
}
.element {
color: var(--channel-marker-green);
background-color: hsl(169 96% 43%);
border-color: oklch(0.787 0.15 173.8);
}Tailwind CSS v4
@theme {
--color-channel-marker-green: #04d8b2;
--color-channel-marker-green-50: #c9fff3;
--color-channel-marker-green-100: #b2f9e6;
--color-channel-marker-green-200: #8bead2;
--color-channel-marker-green-300: #51d0b4;
--color-channel-marker-green-400: #00ba97;
--color-channel-marker-green-500: #00a47e;
--color-channel-marker-green-600: #008b6b;
--color-channel-marker-green-700: #006f55;
--color-channel-marker-green-800: #00523c;
--color-channel-marker-green-900: #003929;
--color-channel-marker-green-950: #002317;
}SCSS
$channel-marker-green: #04d8b2;
$channel-marker-green-rgb: 4, 216, 178;
$channel-marker-green-light: mix(#fff, $channel-marker-green, 20%);
$channel-marker-green-dark: mix(#000, $channel-marker-green, 20%);
.element {
color: $channel-marker-green;
box-shadow: 0 0 0 2px rgba($channel-marker-green, 0.35);
}