Nazwany kolor · #009E6C
Highlighter Turquoise
Highlighter Turquoise to #009E6C: rgb(0 158 108), hsl(161 100% 31%), oklch(0.618 0.135 162.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Green mean? → · Highlighter Turquoise color name →
#009E6C
oklch(0.618 0.135 162.1)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 39A87A
- 56B288
- 6EBB96
- 84C5A5
- 99CFB3
- AED8C2
- C2E2D1
- D7ECE0
- EBF5F0
Odcienie ciemniejsze
- 00895D
- 00744E
- 006040
- 004D32
- 003A25
- 002919
- 00180D
- 000904
- 000100
Tony
- 289B6E
- 3B9970
- 489672
- 539374
- 5C9076
- 658D78
- 6C8A7A
- 73877C
- 7A837E
Harmonie kolorów
Komplementarna +180°
- 009E6C
Highlighter Turquoise
- BB619C
≈ Spring Crocus
Analogowa -30° +30°
- 009E6C
Highlighter Turquoise
- 669638
≈ Bitter Leaf
- 009996
≈ Regula Barbara Blue
Triada +120° +240°
- 009E6C
Highlighter Turquoise
- 7A79D4
≈ Kickstart Purple
- C8663E
≈ Hashut Copper
Komplementarna rozszczepiona +150° +210°
- 009E6C
Highlighter Turquoise
- A16BC0
≈ Prickly Purple
- C95F70
≈ Triple Berry
Tetrada +90° +180° +270°
- 009E6C
Highlighter Turquoise
- 4188D4
≈ Blue Sonki
- BB619C
≈ Spring Crocus
- B67600
≈ Cassandra’s Curse
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.43:1 · APCA Lc 61
Ag
AANa czerni
WCAG 6.10:1 · APCA Lc 40
Najlepszy kolor tekstu: #000000
WCAG 6.10:1 (AA) · APCA Lc 40
Contrast pairs
Fragmenty kodu
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);
}