Cor nomeada mais próxima · #67C9AB
#67C9AB
Cor nomeada mais próxima: Mermaid’s Kiss
#67C9AB (rgb(103 201 171), hsl(162 48% 60%), oklch(0.768 0.103 171.2)) é mais próxima da cor nomeada Mermaid’s Kiss. Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
#67C9AB
oklch(0.768 0.103 171.2)
Conversões de cor
- 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%)
Tons claros · Sombras · Tons
Tons claros
- 79CFB3
- 89D4BB
- 99DAC4
- A9DFCC
- B7E4D4
- C6EADD
- D4EFE5
- E3F4EE
- F1FAF6
Sombras
- 59AE94
- 4B957E
- 3D7C68
- 306454
- 234C40
- 17362D
- 0C221B
- 040F0B
- 000201
Tons
- 6CC2A7
- 70BAA2
- 74B39E
- 77AC9A
- 79A495
- 7B9D91
- 7D968D
- 7E8E88
- 7F8784
Harmonias de cor
Complementar +180°
- 67C9AB
Mermaid’s Kiss
- E698BB
≈ Shocking
Análoga -30° +30°
- 67C9AB
Mermaid’s Kiss
- 8EC486
≈ Leprechaun Laugh
- 54C7CF
≈ Sea Serpent
Tríade +120° +240°
- 67C9AB
Mermaid’s Kiss
- B4A8F1
≈ Shy Moment
- E8A076
≈ Mexican Standoff
Complementar dividida +150° +210°
- 67C9AB
Mermaid’s Kiss
- D29EDB
≈ Velvet Horizon
- EE9997
≈ Funki Porcini
Tétrade +90° +180° +270°
- 67C9AB
Mermaid’s Kiss
- 8EB4F6
≈ Fly Away
- E698BB
≈ Shocking
- D5AD63
≈ Butterscotch Bliss
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.99:1 · APCA Lc 38
Ag
AAASobre preto
WCAG 10.51:1 · APCA Lc 64
Melhor cor de texto: #000000
WCAG 10.51:1 (AAA) · APCA Lc 64
Contrast pairs
Trechos de código
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);
}