最接近的命名颜色 · #67C9AB
#67C9AB
最接近的命名颜色: Mermaid’s Kiss
#67C9AB（rgb(103 201 171)、hsl(162 48% 60%)、oklch(0.768 0.103 171.2)）最接近命名颜色 Mermaid’s Kiss。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#67C9AB
oklch(0.768 0.103 171.2)
颜色转换
- HEX
- #67c9ab
- RGB
- rgb(103 201 171)
- HSL
- hsl(162 48% 60%)
- HWB
- hwb(162 40% 21%)
- OKLCH
- oklch(0.768 0.103 171.2)
- OKLab
- oklab(0.768 -0.102 0.016)
- CIE Lab
- lab(74.42 -35.68 5.71)
- LCH
- lch(74.42 36.14 170.9)
- CMYK
- cmyk(49% 0% 15% 21%)
浅色调 · 深色调 · 灰色调
浅色调
- 79CFB3
- 89D4BB
- 99DAC4
- A9DFCC
- B7E4D4
- C6EADD
- D4EFE5
- E3F4EE
- F1FAF6
深色调
- 59AE94
- 4B957E
- 3D7C68
- 306454
- 234C40
- 17362D
- 0C221B
- 040F0B
- 000201
灰色调
- 6CC2A7
- 70BAA2
- 74B39E
- 77AC9A
- 79A495
- 7B9D91
- 7D968D
- 7E8E88
- 7F8784
配色和谐
互补色 +180°
- 67C9AB
Mermaid’s Kiss
- E698BB
≈ Shocking
类似色 -30° +30°
- 67C9AB
Mermaid’s Kiss
- 8EC486
≈ Leprechaun Laugh
- 54C7CF
≈ Sea Serpent
三角配色 +120° +240°
- 67C9AB
Mermaid’s Kiss
- B4A8F1
≈ Shy Moment
- E8A076
≈ Mexican Standoff
分裂互补色 +150° +210°
- 67C9AB
Mermaid’s Kiss
- D29EDB
≈ Velvet Horizon
- EE9997
≈ Funki Porcini
四角配色 +90° +180° +270°
- 67C9AB
Mermaid’s Kiss
- 8EB4F6
≈ Fly Away
- E698BB
≈ Shocking
- D5AD63
≈ Butterscotch Bliss
对比度与无障碍
Ag
Fail白底
WCAG 1.99:1 · APCA Lc 38
Ag
AAA黑底
WCAG 10.51:1 · APCA Lc 64
最佳文字颜色: #000000
WCAG 10.51:1 (AAA) · APCA Lc 64
Contrast pairs
代码片段
CSS
:root {
--mermaid-s-kiss: #67c9ab;
--mermaid-s-kiss-rgb: 103 201 171;
--mermaid-s-kiss-oklch: oklch(0.768 0.103 171.2);
}
.element {
color: var(--mermaid-s-kiss);
background-color: hsl(162 48% 60%);
border-color: oklch(0.768 0.103 171.2);
}Tailwind CSS v4
@theme {
--color-mermaid-s-kiss: #67c9ab;
--color-mermaid-s-kiss-50: #d8fff2;
--color-mermaid-s-kiss-100: #c6f4e5;
--color-mermaid-s-kiss-200: #a7e3d0;
--color-mermaid-s-kiss-300: #7dc9b3;
--color-mermaid-s-kiss-400: #56b296;
--color-mermaid-s-kiss-500: #1f9c7d;
--color-mermaid-s-kiss-600: #1f846a;
--color-mermaid-s-kiss-700: #196a55;
--color-mermaid-s-kiss-800: #124e3c;
--color-mermaid-s-kiss-900: #0c3629;
--color-mermaid-s-kiss-950: #002117;
}SCSS
$mermaid-s-kiss: #67c9ab;
$mermaid-s-kiss-rgb: 103, 201, 171;
$mermaid-s-kiss-light: mix(#fff, $mermaid-s-kiss, 20%);
$mermaid-s-kiss-dark: mix(#000, $mermaid-s-kiss, 20%);
.element {
color: $mermaid-s-kiss;
box-shadow: 0 0 0 2px rgba($mermaid-s-kiss, 0.35);
}