Najbliższy nazwany kolor · #50A4A3
#50A4A3
Najbliższy nazwany kolor: Twilight Meadow
#50A4A3 (rgb(80 164 163), hsl(179 34% 48%), oklch(0.666 0.081 194.3)) jest najbliższy nazwanemu kolorowi Twilight Meadow. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#50A4A3
oklch(0.666 0.081 194.3)
Konwersje koloru
- HEX
- #50a4a3
- RGB
- rgb(80 164 163)
- HSL
- hsl(179 34% 48%)
- HWB
- hwb(179 31% 36%)
- OKLCH
- oklch(0.666 0.081 194.3)
- OKLab
- oklab(0.666 -0.079 -0.02)
- CIE Lab
- lab(62.18 -26.76 -7.74)
- LCH
- lch(62.18 27.85 196.1)
- CMYK
- cmyk(51% 0% 1% 36%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 64ADAC
- 76B6B5
- 88BFBE
- 9AC8C7
- ABD1D0
- BCDAD9
- CCE3E3
- DDEDEC
- EEF6F5
Odcienie ciemniejsze
- 448E8D
- 397978
- 2E6463
- 24504F
- 1A3D3C
- 102B2A
- 071A19
- 020A0A
- 000101
Tony
- 57A09F
- 5E9D9C
- 649998
- 699695
- 6D9291
- 728F8E
- 768B8A
- 798787
- 7D8483
Harmonie kolorów
Komplementarna +180°
- 50A4A3
Twilight Meadow
- C17F85
≈ Old Rose
Analogowa -30° +30°
- 50A4A3
Twilight Meadow
- 62A487
≈ Plumosa
- 589FBA
≈ Dupain
Triada +120° +240°
- 50A4A3
Twilight Meadow
- A785B7
≈ Purple Statice
- B28D5A
≈ Breadstick
Komplementarna rozszczepiona +150° +210°
- 50A4A3
Twilight Meadow
- B880A0
≈ Opera Mauve
- BF846B
≈ Clay Ground
Tetrada +90° +180° +270°
- 50A4A3
Twilight Meadow
- 8E8EC5
≈ Carriage Ride
- C17F85
≈ Old Rose
- 9C975A
≈ Stem
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.92:1 · APCA Lc 55
Ag
AAANa czerni
WCAG 7.18:1 · APCA Lc 46
Najlepszy kolor tekstu: #000000
WCAG 7.18:1 (AAA) · APCA Lc 46
Contrast pairs
Fragmenty kodu
CSS
:root {
--twilight-meadow: #50a4a3;
--twilight-meadow-rgb: 80 164 163;
--twilight-meadow-oklch: oklch(0.666 0.081 194.3);
}
.element {
color: var(--twilight-meadow);
background-color: hsl(179 34% 48%);
border-color: oklch(0.666 0.081 194.3);
}Tailwind CSS v4
@theme {
--color-twilight-meadow: #50a4a3;
--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: #50a4a3;
$twilight-meadow-rgb: 80, 164, 163;
$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);
}