Nazwany kolor · #51A5A4
Twilight Meadow
Twilight Meadow to #51A5A4: rgb(81 165 164), hsl(179 34% 48%), oklch(0.67 0.082 194.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Twilight Meadow color name →
#51A5A4
oklch(0.67 0.082 194.3)
Konwersje koloru
- HEX
- #51a5a4
- RGB
- rgb(81 165 164)
- HSL
- hsl(179 34% 48%)
- HWB
- hwb(179 32% 35%)
- OKLCH
- oklch(0.67 0.082 194.3)
- OKLab
- oklab(0.67 -0.079 -0.02)
- CIE Lab
- lab(62.55 -26.76 -7.75)
- LCH
- lch(62.55 27.86 196.1)
- CMYK
- cmyk(51% 0% 1% 35%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 65AEAD
- 77B7B6
- 89C0BF
- 9AC9C8
- ABD2D1
- BCDBDA
- CDE4E3
- DDEDEC
- EEF6F6
Odcienie ciemniejsze
- 458F8E
- 3A7979
- 2F6564
- 245150
- 1A3D3D
- 102B2B
- 071A1A
- 020A0A
- 000101
Tony
- 58A1A0
- 5F9E9D
- 649A99
- 699695
- 6E9392
- 728F8E
- 768B8B
- 7A8887
- 7D8484
Harmonie kolorów
Komplementarna +180°
- 51A5A4
Twilight Meadow
- C28086
≈ Old Rose
Analogowa -30° +30°
- 51A5A4
Twilight Meadow
- 63A588
≈ Plumosa
- 59A0BB
≈ Dupain
Triada +120° +240°
- 51A5A4
Twilight Meadow
- A886B8
≈ Purple Statice
- B38E5B
≈ Pirate Plunder
Komplementarna rozszczepiona +150° +210°
- 51A5A4
Twilight Meadow
- B981A1
≈ Opera Mauve
- C0856C
≈ Clay Ground
Tetrada +90° +180° +270°
- 51A5A4
Twilight Meadow
- 8F8EC6
≈ Adora
- C28086
≈ Old Rose
- 9D985B
≈ Stem
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.88:1 · APCA Lc 55
Ag
AAANa czerni
WCAG 7.26:1 · APCA Lc 47
Najlepszy kolor tekstu: #000000
WCAG 7.26:1 (AAA) · APCA Lc 47
Contrast pairs
Fragmenty kodu
CSS
:root {
--twilight-meadow: #51a5a4;
--twilight-meadow-rgb: 81 165 164;
--twilight-meadow-oklch: oklch(0.67 0.082 194.3);
}
.element {
color: var(--twilight-meadow);
background-color: hsl(179 34% 48%);
border-color: oklch(0.67 0.082 194.3);
}Tailwind CSS v4
@theme {
--color-twilight-meadow: #51a5a4;
--color-twilight-meadow-50: #dbfdfd;
--color-twilight-meadow-100: #c9f1f1;
--color-twilight-meadow-200: #ace0e0;
--color-twilight-meadow-300: #85c5c5;
--color-twilight-meadow-400: #60aead;
--color-twilight-meadow-500: #349796;
--color-twilight-meadow-600: #2e807f;
--color-twilight-meadow-700: #256666;
--color-twilight-meadow-800: #194b4a;
--color-twilight-meadow-900: #103433;
--color-twilight-meadow-950: #03201f;
}SCSS
$twilight-meadow: #51a5a4;
$twilight-meadow-rgb: 81, 165, 164;
$twilight-meadow-light: mix(#fff, $twilight-meadow, 20%);
$twilight-meadow-dark: mix(#000, $twilight-meadow, 20%);
.element {
color: $twilight-meadow;
box-shadow: 0 0 0 2px rgba($twilight-meadow, 0.35);
}