Kusarudza ruvara muHSL kunonyaradza, asi ma stylesheet, design handoffs uye magwaro ebrand achiri kushandisa HEX. Converter ino inodzvanya mukaha uye inokupa kodhi yemadhijiti matanhatu ye chero musanganiswa wehue, saturation uye lightness.
Maitiro ekuverenga HSL kuenda ku HEX
- Shandura saturation uye lightness kuita zvikamu: 60% inova 0.6.
- Verenga chroma C = (1 − |2L − 1|) × S — ndiyo kurehwa kwekuti ruvara rwakamira sei kubva pagrey.
- Shandisa hue kuisa iyo chroma pamachannel e red, green uye blue, wobva wadzorera zvitatu zvese ne L − C/2.
- Pamhanyisa chanel imwe neimwe ne255, tenderedza, woonyora semadhijiti maviri ehexadecimal.
Muenzaniso wakashanda
Kutadza-kudzidza kunoitika kamwechete, padanho rekupedzisira, apo chanel imwe neimwe inorongedzerwa ku0–255 izere. Mhedzisiro ndiyo kodhi yeHEX iri pedyo nepamusoro peHSL yako uye zvinowanzoenderana nezvinoratidzwa nechishandiso chedhizaini.
HSL and HEX explained
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
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
HSL to HEX reference table
Mavara eCSS anowanzo shandiswa, akashandurwa kubva kuHSL kuenda kuHEX.
| Ruvara | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |