Nazwany kolor · #87DCCE
Tantalising Teal
Tantalising Teal to #87DCCE: rgb(135 220 206), hsl(170 55% 70%), oklch(0.836 0.085 182.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Tantalising Teal color name →
#87DCCE
oklch(0.836 0.085 182.5)
Konwersje koloru
- HEX
- #87dcce
- RGB
- rgb(135 220 206)
- HSL
- hsl(170 55% 70%)
- HWB
- hwb(170 53% 14%)
- OKLCH
- oklch(0.836 0.085 182.5)
- OKLab
- oklab(0.836 -0.085 -0.004)
- CIE Lab
- lab(82.08 -29.36 -1.67)
- LCH
- lch(82.08 29.41 183.3)
- CMYK
- cmyk(39% 0% 6% 14%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 94E0D3
- A1E3D8
- AEE7DC
- BAEAE1
- C6EEE6
- D2F1EB
- DDF5F0
- E8F8F5
- F4FCFA
Odcienie ciemniejsze
- 75BFB3
- 63A398
- 51887F
- 416E66
- 31544E
- 213C38
- 132623
- 06110F
- 010202
Tony
- 88D3C6
- 88C9BE
- 88C0B6
- 88B6AE
- 87ADA6
- 86A49E
- 859B97
- 84928F
- 828987
Harmonie kolorów
Komplementarna +180°
- 87DCCE
Tantalising Teal
- F9B2C4
≈ Love Spell
Analogowa -30° +30°
- 87DCCE
Tantalising Teal
- 9FDAAF
≈ Frugal
- 84D9EA
≈ Medium Sky Blue
Triada +120° +240°
- 87DCCE
Tantalising Teal
- D4BDF8
≈ Pink Illusion
- F2BE90
≈ Peachy-Kini
Komplementarna rozszczepiona +150° +210°
- 87DCCE
Tantalising Teal
- EBB5E2
≈ Pink Drink
- FCB5A6
≈ Just Blush
Tetrada +90° +180° +270°
- 87DCCE
Tantalising Teal
- B7C7FF
≈ Light Periwinkle
- F9B2C4
≈ Love Spell
- DDC889
≈ 24 Karat
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.59:1 · APCA Lc 27
Ag
AAANa czerni
WCAG 13.15:1 · APCA Lc 76
Najlepszy kolor tekstu: #000000
WCAG 13.15:1 (AAA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
CSS
:root {
--tantalising-teal: #87dcce;
--tantalising-teal-rgb: 135 220 206;
--tantalising-teal-oklch: oklch(0.836 0.085 182.5);
}
.element {
color: var(--tantalising-teal);
background-color: hsl(170 55% 70%);
border-color: oklch(0.836 0.085 182.5);
}Tailwind CSS v4
@theme {
--color-tantalising-teal: #87dcce;
--color-tantalising-teal-50: #dbfef8;
--color-tantalising-teal-100: #c9f2eb;
--color-tantalising-teal-200: #ace1d9;
--color-tantalising-teal-300: #84c6bd;
--color-tantalising-teal-400: #60afa3;
--color-tantalising-teal-500: #34988b;
--color-tantalising-teal-600: #2e8176;
--color-tantalising-teal-700: #25675e;
--color-tantalising-teal-800: #1a4c44;
--color-tantalising-teal-900: #11352f;
--color-tantalising-teal-950: #03201b;
}SCSS
$tantalising-teal: #87dcce;
$tantalising-teal-rgb: 135, 220, 206;
$tantalising-teal-light: mix(#fff, $tantalising-teal, 20%);
$tantalising-teal-dark: mix(#000, $tantalising-teal, 20%);
.element {
color: $tantalising-teal;
box-shadow: 0 0 0 2px rgba($tantalising-teal, 0.35);
}