Colore con nome · #7AB6B6
Kingfisher Turquoise
Kingfisher Turquoise è #7AB6B6: rgb(122 182 182), hsl(180 29% 60%), oklch(0.735 0.062 195.9). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Teal mean? → · Kingfisher Turquoise color name →
#7AB6B6
oklch(0.735 0.062 195.9)
Conversioni di colore
- HEX
- #7ab6b6
- RGB
- rgb(122 182 182)
- HSL
- hsl(180 29% 60%)
- HWB
- hwb(180 48% 29%)
- OKLCH
- oklch(0.735 0.062 195.9)
- OKLab
- oklab(0.735 -0.06 -0.017)
- CIE Lab
- lab(69.97 -20.12 -6.53)
- LCH
- lch(69.97 21.15 198)
- CMYK
- cmyk(33% 0% 0% 29%)
Tinte · Ombre · Toni
Tinte
- 88BDBD
- 95C4C4
- A3CCCB
- B0D3D3
- BDDADA
- CAE2E1
- D7E9E9
- E5F0F0
- F2F8F8
Ombre
- 699E9E
- 598686
- 496F6F
- 3A5959
- 2B4444
- 1D3030
- 101D1D
- 050C0C
- 010202
Toni
- 7BB1B0
- 7DABAB
- 7EA6A5
- 7EA0A0
- 7F9B9B
- 809595
- 809090
- 808B8B
- 808585
Armonie di colore
Complementare +180°
- 7AB6B6
Kingfisher Turquoise
- CE9A9C
≈ Silk Stone
Analogo -30° +30°
- 7AB6B6
Kingfisher Turquoise
- 84B6A0
≈ Source Green
- 7FB2C7
≈ Heavenly
Triadico +120° +240°
- 7AB6B6
Kingfisher Turquoise
- B99EC4
≈ Crocus Petal
- C0A57E
≈ Graham Cracker
Complementare divisa +150° +210°
- 7AB6B6
Kingfisher Turquoise
- C79AB2
≈ Lady’s Cushions Pink
- CB9E89
≈ Artefact
Tetradico +90° +180° +270°
- 7AB6B6
Kingfisher Turquoise
- A5A4CF
≈ Water Hyacinth
- CE9A9C
≈ Silk Stone
- AEAC7F
≈ Stuffed Olive
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 2.28:1 · APCA Lc 45
Ag
AAASu nero
WCAG 9.19:1 · APCA Lc 57
Miglior colore del testo: #000000
WCAG 9.19:1 (AAA) · APCA Lc 57
Contrast pairs
Frammenti di codice
CSS
:root {
--kingfisher-turquoise: #7ab6b6;
--kingfisher-turquoise-rgb: 122 182 182;
--kingfisher-turquoise-oklch: oklch(0.735 0.062 195.9);
}
.element {
color: var(--kingfisher-turquoise);
background-color: hsl(180 29% 60%);
border-color: oklch(0.735 0.062 195.9);
}Tailwind CSS v4
@theme {
--color-kingfisher-turquoise: #7ab6b6;
--color-kingfisher-turquoise-50: #e2fbfb;
--color-kingfisher-turquoise-100: #d1efef;
--color-kingfisher-turquoise-200: #b6ddde;
--color-kingfisher-turquoise-300: #93c2c3;
--color-kingfisher-turquoise-400: #72aaaa;
--color-kingfisher-turquoise-500: #509393;
--color-kingfisher-turquoise-600: #457c7d;
--color-kingfisher-turquoise-700: #376464;
--color-kingfisher-turquoise-800: #274949;
--color-kingfisher-turquoise-900: #1a3332;
--color-kingfisher-turquoise-950: #0a1e1e;
}SCSS
$kingfisher-turquoise: #7ab6b6;
$kingfisher-turquoise-rgb: 122, 182, 182;
$kingfisher-turquoise-light: mix(#fff, $kingfisher-turquoise, 20%);
$kingfisher-turquoise-dark: mix(#000, $kingfisher-turquoise, 20%);
.element {
color: $kingfisher-turquoise;
box-shadow: 0 0 0 2px rgba($kingfisher-turquoise, 0.35);
}