Colore con nome · #009E6C
Highlighter Turquoise
Highlighter Turquoise è #009E6C: rgb(0 158 108), hsl(161 100% 31%), oklch(0.618 0.135 162.1). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Green mean? → · Highlighter Turquoise color name →
#009E6C
oklch(0.618 0.135 162.1)
Conversioni di colore
- HEX
- #009e6c
- RGB
- rgb(0 158 108)
- HSL
- hsl(161 100% 31%)
- HWB
- hwb(161 0% 38%)
- OKLCH
- oklch(0.618 0.135 162.1)
- OKLab
- oklab(0.618 -0.129 0.042)
- CIE Lab
- lab(57.48 -45.97 15.9)
- LCH
- lch(57.48 48.64 160.9)
- CMYK
- cmyk(100% 0% 32% 38%)
Tinte · Ombre · Toni
Tinte
- 39A87A
- 56B288
- 6EBB96
- 84C5A5
- 99CFB3
- AED8C2
- C2E2D1
- D7ECE0
- EBF5F0
Ombre
- 00895D
- 00744E
- 006040
- 004D32
- 003A25
- 002919
- 00180D
- 000904
- 000100
Toni
- 289B6E
- 3B9970
- 489672
- 539374
- 5C9076
- 658D78
- 6C8A7A
- 73877C
- 7A837E
Armonie di colore
Complementare +180°
- 009E6C
Highlighter Turquoise
- BB619C
≈ Spring Crocus
Analogo -30° +30°
- 009E6C
Highlighter Turquoise
- 669638
≈ Bitter Leaf
- 009996
≈ Regula Barbara Blue
Triadico +120° +240°
- 009E6C
Highlighter Turquoise
- 7A79D4
≈ Kickstart Purple
- C8663E
≈ Hashut Copper
Complementare divisa +150° +210°
- 009E6C
Highlighter Turquoise
- A16BC0
≈ Prickly Purple
- C95F70
≈ Triple Berry
Tetradico +90° +180° +270°
- 009E6C
Highlighter Turquoise
- 4188D4
≈ Blue Sonki
- BB619C
≈ Spring Crocus
- B67600
≈ Cassandra’s Curse
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 3.43:1 · APCA Lc 61
Ag
AASu nero
WCAG 6.10:1 · APCA Lc 40
Miglior colore del testo: #000000
WCAG 6.10:1 (AA) · APCA Lc 40
Contrast pairs
Frammenti di codice
CSS
:root {
--highlighter-turquoise: #009e6c;
--highlighter-turquoise-rgb: 0 158 108;
--highlighter-turquoise-oklch: oklch(0.618 0.135 162.1);
}
.element {
color: var(--highlighter-turquoise);
background-color: hsl(161 100% 31%);
border-color: oklch(0.618 0.135 162.1);
}Tailwind CSS v4
@theme {
--color-highlighter-turquoise: #009e6c;
--color-highlighter-turquoise-50: #d3ffeb;
--color-highlighter-turquoise-100: #bff7dc;
--color-highlighter-turquoise-200: #9de7c5;
--color-highlighter-turquoise-300: #6fcda5;
--color-highlighter-turquoise-400: #41b786;
--color-highlighter-turquoise-500: #00a16a;
--color-highlighter-turquoise-600: #00885a;
--color-highlighter-turquoise-700: #006d48;
--color-highlighter-turquoise-800: #005032;
--color-highlighter-turquoise-900: #003822;
--color-highlighter-turquoise-950: #002211;
}SCSS
$highlighter-turquoise: #009e6c;
$highlighter-turquoise-rgb: 0, 158, 108;
$highlighter-turquoise-light: mix(#fff, $highlighter-turquoise, 20%);
$highlighter-turquoise-dark: mix(#000, $highlighter-turquoise, 20%);
.element {
color: $highlighter-turquoise;
box-shadow: 0 0 0 2px rgba($highlighter-turquoise, 0.35);
}