Nazwany kolor · #52C1B3
Treasured Teal
Treasured Teal to #52C1B3: rgb(82 193 179), hsl(172 47% 54%), oklch(0.743 0.103 184). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Treasured Teal color name →
#52C1B3
oklch(0.743 0.103 184)
Konwersje koloru
- HEX
- #52c1b3
- RGB
- rgb(82 193 179)
- HSL
- hsl(172 47% 54%)
- HWB
- hwb(172 32% 24%)
- OKLCH
- oklch(0.743 0.103 184)
- OKLab
- oklab(0.743 -0.103 -0.007)
- CIE Lab
- lab(71.45 -35.63 -2.98)
- LCH
- lch(71.45 35.75 184.8)
- CMYK
- cmyk(58% 0% 7% 24%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 68C7BA
- 7CCEC2
- 8ED4C9
- 9FDAD1
- B0E0D8
- C0E7E0
- D0EDE8
- E0F3EF
- EFF9F7
Odcienie ciemniejsze
- 46A79B
- 3B8F84
- 2F776E
- 255F58
- 1A4943
- 11342F
- 08201D
- 020E0C
- 000201
Tony
- 5BBAAE
- 62B4A9
- 68ADA3
- 6DA79E
- 72A099
- 759A94
- 79938F
- 7C8D8A
- 7E8785
Harmonie kolorów
Komplementarna +180°
- 52C1B3
Treasured Teal
- E390A4
≈ Underwater Flare
Analogowa -30° +30°
- 52C1B3
Treasured Teal
- 75BF8E
≈ Felt Green
- 50BCD3
≈ Bachelor Button
Triada +120° +240°
- 52C1B3
Treasured Teal
- BA9BE1
≈ Violet Velvet
- DA9E64
≈ Butternut Pie
Komplementarna rozszczepiona +150° +210°
- 52C1B3
Treasured Teal
- D493C7
≈ Carnation Rose
- E59480
≈ Ravishing Coral
Tetrada +90° +180° +270°
- 52C1B3
Treasured Teal
- 97A7ED
≈ Cold Lips
- E390A4
≈ Underwater Flare
- C1AB5B
≈ Slender Stem
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.17:1 · APCA Lc 43
Ag
AAANa czerni
WCAG 9.63:1 · APCA Lc 60
Najlepszy kolor tekstu: #000000
WCAG 9.63:1 (AAA) · APCA Lc 60
Contrast pairs
Fragmenty kodu
CSS
:root {
--treasured-teal: #52c1b3;
--treasured-teal-rgb: 82 193 179;
--treasured-teal-oklch: oklch(0.743 0.103 184);
}
.element {
color: var(--treasured-teal);
background-color: hsl(172 47% 54%);
border-color: oklch(0.743 0.103 184);
}Tailwind CSS v4
@theme {
--color-treasured-teal: #52c1b3;
--color-treasured-teal-50: #d5fff9;
--color-treasured-teal-100: #c2f4ed;
--color-treasured-teal-200: #a2e3db;
--color-treasured-teal-300: #76c9bf;
--color-treasured-teal-400: #4ab2a5;
--color-treasured-teal-500: #009c8e;
--color-treasured-teal-600: #008478;
--color-treasured-teal-700: #036a60;
--color-treasured-teal-800: #024e45;
--color-treasured-teal-900: #033630;
--color-treasured-teal-950: #00211c;
}SCSS
$treasured-teal: #52c1b3;
$treasured-teal-rgb: 82, 193, 179;
$treasured-teal-light: mix(#fff, $treasured-teal, 20%);
$treasured-teal-dark: mix(#000, $treasured-teal, 20%);
.element {
color: $treasured-teal;
box-shadow: 0 0 0 2px rgba($treasured-teal, 0.35);
}