Nazwany kolor · #A8E3CC
Turquoise Tower
Turquoise Tower to #A8E3CC: rgb(168 227 204), hsl(157 51% 77%), oklch(0.869 0.068 168.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Turquoise Tower color name →
#A8E3CC
oklch(0.869 0.068 168.7)
Konwersje koloru
- HEX
- #a8e3cc
- RGB
- rgb(168 227 204)
- HSL
- hsl(157 51% 77%)
- HWB
- hwb(157 66% 11%)
- OKLCH
- oklch(0.869 0.068 168.7)
- OKLab
- oklab(0.869 -0.067 0.013)
- CIE Lab
- lab(85.73 -23.07 4.89)
- LCH
- lch(85.73 23.58 168)
- CMYK
- cmyk(26% 0% 10% 11%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B1E6D1
- BAE9D6
- C3ECDB
- CCEEE0
- D4F1E5
- DDF4EA
- E6F7F0
- EEFAF5
- F7FCFA
Odcienie ciemniejsze
- 92C5B1
- 7CA897
- 678C7E
- 527165
- 3F574E
- 2C3F37
- 1A2722
- 0A120F
- 010302
Tony
- A4D9C4
- A1CFBC
- 9DC4B5
- 99BAAD
- 95B0A5
- 91A79E
- 8D9D96
- 89938F
- 848987
Harmonie kolorów
Komplementarna +180°
- A8E3CC
Turquoise Tower
- F7C2DB
≈ Miami Pink
Analogowa -30° +30°
- A8E3CC
Turquoise Tower
- BEDFB4
≈ Graceful Flower
- 9EE2E5
≈ Everest
Triada +120° +240°
- A8E3CC
Turquoise Tower
- D2CDFF
≈ Lavender Blue
- FAC7AD
≈ Coral Bisque
Komplementarna rozszczepiona +150° +210°
- A8E3CC
Turquoise Tower
- E8C6F1
≈ Purple’s Baby Sister
- FEC3C3
≈ Crystal Rose
Tetrada +90° +180° +270°
- A8E3CC
Turquoise Tower
- BBD6FF
≈ Oh Boy!
- F7C2DB
≈ Miami Pink
- EDCFA2
≈ Suffragette Yellow
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.44:1 · APCA Lc 21
Ag
AAANa czerni
WCAG 14.52:1 · APCA Lc 82
Najlepszy kolor tekstu: #000000
WCAG 14.52:1 (AAA) · APCA Lc 82
Contrast pairs
Fragmenty kodu
CSS
:root {
--turquoise-tower: #a8e3cc;
--turquoise-tower-rgb: 168 227 204;
--turquoise-tower-oklch: oklch(0.869 0.068 168.7);
}
.element {
color: var(--turquoise-tower);
background-color: hsl(157 51% 77%);
border-color: oklch(0.869 0.068 168.7);
}Tailwind CSS v4
@theme {
--color-turquoise-tower: #a8e3cc;
--color-turquoise-tower-50: #e3fcf2;
--color-turquoise-tower-100: #d2f0e5;
--color-turquoise-tower-200: #b8ded0;
--color-turquoise-tower-300: #95c3b2;
--color-turquoise-tower-400: #76ac97;
--color-turquoise-tower-500: #55957e;
--color-turquoise-tower-600: #497e6b;
--color-turquoise-tower-700: #3a6555;
--color-turquoise-tower-800: #2a4a3d;
--color-turquoise-tower-900: #1c332a;
--color-turquoise-tower-950: #0c1f18;
}SCSS
$turquoise-tower: #a8e3cc;
$turquoise-tower-rgb: 168, 227, 204;
$turquoise-tower-light: mix(#fff, $turquoise-tower, 20%);
$turquoise-tower-dark: mix(#000, $turquoise-tower, 20%);
.element {
color: $turquoise-tower;
box-shadow: 0 0 0 2px rgba($turquoise-tower, 0.35);
}