Couleur nommée la plus proche · #50A4A3
#50A4A3
Couleur nommée la plus proche: Twilight Meadow
#50A4A3 (rgb(80 164 163), hsl(179 34% 48%), oklch(0.666 0.081 194.3)) est la plus proche de la couleur nommée Twilight Meadow. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#50A4A3
oklch(0.666 0.081 194.3)
Conversions de couleur
- 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%)
Teintes · Ombres · Tons
Teintes
- 64ADAC
- 76B6B5
- 88BFBE
- 9AC8C7
- ABD1D0
- BCDAD9
- CCE3E3
- DDEDEC
- EEF6F5
Ombres
- 448E8D
- 397978
- 2E6463
- 24504F
- 1A3D3C
- 102B2A
- 071A19
- 020A0A
- 000101
Tons
- 57A09F
- 5E9D9C
- 649998
- 699695
- 6D9291
- 728F8E
- 768B8A
- 798787
- 7D8483
Harmonies de couleurs
Complémentaire +180°
- 50A4A3
Twilight Meadow
- C17F85
≈ Old Rose
Analogue -30° +30°
- 50A4A3
Twilight Meadow
- 62A487
≈ Plumosa
- 589FBA
≈ Dupain
Triadique +120° +240°
- 50A4A3
Twilight Meadow
- A785B7
≈ Purple Statice
- B28D5A
≈ Breadstick
Complémentaire divisée +150° +210°
- 50A4A3
Twilight Meadow
- B880A0
≈ Opera Mauve
- BF846B
≈ Clay Ground
Tétradique +90° +180° +270°
- 50A4A3
Twilight Meadow
- 8E8EC5
≈ Carriage Ride
- C17F85
≈ Old Rose
- 9C975A
≈ Stem
Contraste et accessibilité
Ag
FailSur blanc
WCAG 2.92:1 · APCA Lc 55
Ag
AAASur noir
WCAG 7.18:1 · APCA Lc 46
Meilleure couleur de texte: #000000
WCAG 7.18:1 (AAA) · APCA Lc 46
Contrast pairs
Extraits de code
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);
}