Zaɓar launi a HSL yana da dadi, amma stylesheets, mika aikin zane da takardun brand suna aiki da HEX. Wannan mai canzawa yana rufe wannan gibin kuma yana ba ka lambar hex mai haruffa shida don kowace haɗin hue, saturation da lightness.
Yadda sauyin HSL zuwa HEX ke aiki
- Juya saturation da lightness zuwa rashin kaso: 60% zai zama 0.6.
- Lissafa chroma C = (1 − |2L − 1|) × S — wannan yana nuna nesa launi yake daga launin toka (grey).
- Yi amfani da hue don sanya wannan chroma a tashoshin ja, kore da shuɗi, sannan matsar da dukkansu da L − C/2.
- Ninka kowace tashar da 255, zagaya ta, ka rubuta ta azaman lambobi biyu na hexadecimal.
Misali da ya yi aiki
Ana zagayawa sau ɗaya, a mataki na ƙarshe, lokacin da ake daidaita kowace tashar zuwa cikakken ƙima 0–255. Sakamakon shine HEX mafi kusa da shigarwar HSL ɗinka kuma yawanci daidai yake da abin da kayan aikin zane ke nuna.
HSL da HEX an bayyana su
Menene HSL?
HSL yana raba launi zuwa hue (0–360° a kan ƙwallon launi), saturation (yadda yake da launi, 0–100%) da lightness (yadda yake haske, 0–100%). Saboda kowace ɓangare ta dace da yadda mutane ke bayyana launi, HSL shine tsarin da ya fi sauƙi don gina tints, shades da palet masu daidaito — da hannu ko a cikin lambar.
- Sintaks:
- hsl(H, S%, L%)
- Iyakance:
- 0–360°, 0–100%, 0–100%
- Mafi kyau don:
- palettes, tints da shades, theming
Menene HEX?
Lambar HEX tana da hexadecimal mai haruffa shida da ke adana tashoshin ja, kore da shuɗi na launi bayan #. Kowanne ma'aurata na lambobi yana wakiltar tashar guda, daga 00 (babu) zuwa FF (cikakke), wanda ke bada irin waɗannan launuka miliyan 16.7 kamar RGB amma a gajeren rubutu. HEX shine tsohuwar zabin a CSS, kayan aikin zane da ƙa'idodin alama.
- Sintaks:
- #RRGGBB
- Iyakance:
- 00–FF per channel
- Mafi kyau don:
- CSS, miƙa aikin zane, ƙa'idodin alama
teburin tunani na HSL zuwa HEX
Mafi yawan launukan CSS, an sauya daga HSL zuwa HEX.
| Launi | 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 |