Nazwany kolor · #55AAAA
Emerald Succulent
Emerald Succulent to #55AAAA: rgb(85 170 170), hsl(180 33% 50%), oklch(0.685 0.082 195.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Emerald Succulent color name →
#55AAAA
oklch(0.685 0.082 195.4)
Konwersje koloru
- HEX
- #55aaaa
- RGB
- rgb(85 170 170)
- HSL
- hsl(180 33% 50%)
- HWB
- hwb(180 33% 33%)
- OKLCH
- oklch(0.685 0.082 195.4)
- OKLab
- oklab(0.685 -0.079 -0.022)
- CIE Lab
- lab(64.38 -26.83 -8.37)
- LCH
- lch(64.38 28.11 197.3)
- CMYK
- cmyk(50% 0% 0% 33%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 68B2B2
- 7ABBBB
- 8CC3C3
- 9DCCCB
- ADD4D4
- BEDDDC
- CEE5E5
- DEEEEE
- EFF6F6
Odcienie ciemniejsze
- 499393
- 3D7D7D
- 316868
- 265353
- 1C3F3F
- 112D2D
- 081B1B
- 020B0B
- 000101
Tony
- 5CA6A6
- 62A2A1
- 679E9D
- 6C9999
- 709595
- 749191
- 778D8C
- 7A8988
- 7D8484
Harmonie kolorów
Komplementarna +180°
- 55AAAA
Emerald Succulent
- C88589
≈ All’s Ace
Analogowa -30° +30°
- 55AAAA
Emerald Succulent
- 66AA8E
≈ Artemesia Green
- 5EA5C1
≈ Surgical
Triada +120° +240°
- 55AAAA
Emerald Succulent
- AE8BBD
≈ East Side
- B8935F
≈ Barley Corn
Komplementarna rozszczepiona +150° +210°
- 55AAAA
Emerald Succulent
- BF85A5
≈ Rosy
- C58A6F
≈ Secluded Canyon
Tetrada +90° +180° +270°
- 55AAAA
Emerald Succulent
- 9593CB
≈ Litmus
- C88589
≈ All’s Ace
- A19D60
≈ Zandri Dust
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.72:1 · APCA Lc 53
Ag
AAANa czerni
WCAG 7.71:1 · APCA Lc 49
Najlepszy kolor tekstu: #000000
WCAG 7.71:1 (AAA) · APCA Lc 49
Contrast pairs
Fragmenty kodu
CSS
:root {
--emerald-succulent: #55aaaa;
--emerald-succulent-rgb: 85 170 170;
--emerald-succulent-oklch: oklch(0.685 0.082 195.4);
}
.element {
color: var(--emerald-succulent);
background-color: hsl(180 33% 50%);
border-color: oklch(0.685 0.082 195.4);
}Tailwind CSS v4
@theme {
--color-emerald-succulent: #55aaaa;
--color-emerald-succulent-50: #dbfdfd;
--color-emerald-succulent-100: #c9f1f1;
--color-emerald-succulent-200: #ace0e0;
--color-emerald-succulent-300: #84c5c6;
--color-emerald-succulent-400: #5faeae;
--color-emerald-succulent-500: #329797;
--color-emerald-succulent-600: #2d8080;
--color-emerald-succulent-700: #246666;
--color-emerald-succulent-800: #184b4a;
--color-emerald-succulent-900: #103434;
--color-emerald-succulent-950: #02201f;
}SCSS
$emerald-succulent: #55aaaa;
$emerald-succulent-rgb: 85, 170, 170;
$emerald-succulent-light: mix(#fff, $emerald-succulent, 20%);
$emerald-succulent-dark: mix(#000, $emerald-succulent, 20%);
.element {
color: $emerald-succulent;
box-shadow: 0 0 0 2px rgba($emerald-succulent, 0.35);
}