Couleur nommée la plus proche · #57A4A2
#57A4A2
Couleur nommée la plus proche: Twilight Meadow
#57A4A2 (rgb(87 164 162), hsl(178 31% 49%), oklch(0.669 0.076 193.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.
#57A4A2
oklch(0.669 0.076 193.3)
Conversions de couleur
- HEX
- #57a4a2
- RGB
- rgb(87 164 162)
- HSL
- hsl(178 31% 49%)
- HWB
- hwb(178 34% 36%)
- OKLCH
- oklch(0.669 0.076 193.3)
- OKLab
- oklab(0.669 -0.074 -0.018)
- CIE Lab
- lab(62.44 -25.26 -6.76)
- LCH
- lch(62.44 26.15 195)
- CMYK
- cmyk(47% 0% 1% 36%)
Teintes · Ombres · Tons
Teintes
- 69ADAB
- 7BB6B4
- 8CBFBD
- 9DC8C6
- ADD1D0
- BDDAD9
- CEE3E2
- DEEDEC
- EFF6F5
Ombres
- 4B8E8C
- 3E7977
- 336463
- 27504F
- 1C3D3C
- 122B2A
- 081A19
- 030A0A
- 000101
Tons
- 5DA09F
- 629D9B
- 679998
- 6C9694
- 709291
- 748F8D
- 778B8A
- 7A8787
- 7D8483
Harmonies de couleurs
Complémentaire +180°
- 57A4A2
Twilight Meadow
- BF8287
≈ Baker Rose
Analogue -30° +30°
- 57A4A2
Twilight Meadow
- 67A488
≈ Sea Lettuce
- 5DA0B7
≈ Inuit
Triadique +120° +240°
- 57A4A2
Twilight Meadow
- A687B7
≈ Purple Statice
- B28E5F
≈ Pirate Plunder
Complémentaire divisée +150° +210°
- 57A4A2
Twilight Meadow
- B782A1
≈ Opera Mauve
- BD866F
≈ Clay Ground
Tétradique +90° +180° +270°
- 57A4A2
Twilight Meadow
- 8E8FC3
≈ Carriage Ride
- BF8287
≈ Baker Rose
- 9D975F
≈ Terran Khaki
Contraste et accessibilité
Ag
FailSur blanc
WCAG 2.90:1 · APCA Lc 55
Ag
AAASur noir
WCAG 7.23:1 · APCA Lc 47
Meilleure couleur de texte: #000000
WCAG 7.23:1 (AAA) · APCA Lc 47
Contrast pairs
Extraits de code
CSS
:root {
--twilight-meadow: #57a4a2;
--twilight-meadow-rgb: 87 164 162;
--twilight-meadow-oklch: oklch(0.669 0.076 193.3);
}
.element {
color: var(--twilight-meadow);
background-color: hsl(178 31% 49%);
border-color: oklch(0.669 0.076 193.3);
}Tailwind CSS v4
@theme {
--color-twilight-meadow: #57a4a2;
--color-twilight-meadow-50: #ddfdfc;
--color-twilight-meadow-100: #ccf0f0;
--color-twilight-meadow-200: #afdfde;
--color-twilight-meadow-300: #89c4c4;
--color-twilight-meadow-400: #65adab;
--color-twilight-meadow-500: #3d9694;
--color-twilight-meadow-600: #357f7d;
--color-twilight-meadow-700: #2b6664;
--color-twilight-meadow-800: #1d4b49;
--color-twilight-meadow-900: #133432;
--color-twilight-meadow-950: #051f1e;
}SCSS
$twilight-meadow: #57a4a2;
$twilight-meadow-rgb: 87, 164, 162;
$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);
}