HSL inotsanangura ruvara sezvo vanhu vachiruta: hue ipi, kuti rine ruvara rwepamusoro sei, uye kupenya kwakadii. Kushandura kodhi yeHEX kuenda kuHSL ndiyo nzira inokurumidza kuisa ruvara mufomu raunogona kuchinjisa — kuisa pamusoro, kuudzikisa, kana kuvaka chikero chose kubva mariri.
Maitiro ekuverenga HEX kuenda ku HSL
- Shandura kodhi yeHEX kuenda kuRGB wobva wagovana chanel imwe neimwe ne255, kuitira kuti zvitatu zvirambe zviri pakati pe0 ne1.
- Tsvaga kukuru uye kudiki pakati pezvitatu. Avhareji yacho ndiyo lightness L.
- Musiyano pakati pawo ndiwo unotyaira saturation S: ugoigovana ne (2 − max − min) kumaruva akajeka, kana ne (max + min) kune ane rima.
- Chaneli ine maximum ndiyo inosarudza hue H — red pa0°, green pa120°, blue pa240° — uye chaneli dzimwe mbiri dzinoisa hue mukati mechikamu ichocho.
Muenzaniso wakashanda
Masvomhu acho ari chaiwo, asi maHSL anowanzo tenderedzwa kuita madhigirii akazara uye muzana. Kudzokera zvakare kunogona kuisa RGB kure nechepakutanga nematanho angangoita rimwe kana maviri — zvisingaonekwe mukuita, asi zvakanaka kuziva kana uchidzokorora-kutenderera mavara kakawanda.
HEX and HSL explained
Chii chinonzi HEX?
A HEX code is a six-digit hexadecimal number that stores the red, green and blue channel of a color behind a leading #. Each pair of digits covers one channel, from 00 (none) to FF (full), which gives the same 16.7 million colors as RGB in a much shorter notation. HEX is the default in CSS, design tools and brand guidelines.
- Syntax:
- #RRGGBB
- Range:
- 00–FF per channel
- Yakanakira:
- CSS, design handoff, brand guidelines
Chii chinonzi HSL?
HSL inopatsanura ruvara kuva hue (0–360° pachatisi chemavara), saturation (kuti riine ruvara zvakadii, 0–100%) uye lightness (kuti rine kupenya kwakadii, 0–100%). Nekuti chimwe nechimwe chikamu chinoenderana nenzira vanhu vanotsanangura ruvara, HSL ndiyo fomati iri nyore pakuvaka tints, shades uye mapaleti anoenderana — nemaoko kana mukodhi.
- Syntax:
- hsl(H, S%, L%)
- Range:
- 0–360°, 0–100%, 0–100%
- Yakanakira:
- palettes, tints and shades, theming
HEX to HSL reference table
Mavara eCSS anowanzo shandiswa, akashandurwa kubva kuHEX kuenda kuHSL.
| Ruvara | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |