Yiyan awọ ní HSL rọrùn, ṣùgbọ́n stylesheets, fifa design lọ sílẹ̀ àti ìwé ìtọ́nisọ́nà ami-ọwọ ṣi nlo HEX. Ẹrọ iyipada yìí ti pa ìyàtọ̀ yẹn mọ́ra kí ó sì fún ọ ní koodu mẹ́fà fún ẹnikẹ́ni hue, saturation àti lightness.
Bá a ṣe ń yipada HSL sí HEX
- Yi saturation àti lightness pada sí ipin: 60% di 0.6.
- Ṣe ìṣirò chroma C = (1 − |2L − 1|) × S — ìyẹn ni bí awọ ṣe jìnnà sí grẹ́yì.
- Lo hue láti gbe chroma yẹn sí àwọn ikanni pupa, alawọ ewé àti búlùù, lẹ́yìn náà yí gbogbo mẹ́ta padà nipa L − C/2.
- Gún kọọkan ikanni pọ̀ sí 255, yíká rẹ, kí o si kọ ọ́ gẹ́gẹ́ bí awọn digi hexadecimal meji.
Àpẹẹrẹ tó ṣiṣẹ
A yíká lẹ́ẹ̀kan ṣoṣo, ní ìgbésẹ̀ ìkẹyìn, nígbà tí a ṣokùnfa kọọkan ikanni sí iye pipe 0–255. Abajade ni koodu HEX tó sunmọ jùlọ sí ìwọ HSL rẹ̀ àti nígbà míìrán jẹ́ gẹ́gẹ́ bí ohun tí ohun-ọṣọ àwòrán máa fihan.
HSL ati HEX ṣàlàyé
Kí ni HSL?
HSL pin awọ si hue (0–360° lori kẹkẹ awọ), saturation (bawo ni awọ, 0–100%) ati lightness (bawo ni didan, 0–100%). Nitori apakan kọọkan ba ọna ti eniyan ṣe n ṣapejuwe awọ mu, HSL jẹ ọna kika ti o rọọrun julọ fun kikọ tints, shades ati paleti to ni ibamu — pẹlu ọwọ tabi ninu koodu.
- Sínatìsí:
- hsl(H, S%, L%)
- Ibiti:
- 0–360°, 0–100%, 0–100%
- Tó dára jùlọ fún:
- awọn paleti, tints ati shades, theming
Kí ni HEX?
Koodu HEX jẹ nọmba hexadecimal mẹfa-ti-digit ti o tọju ikanni pupa, alawọ ati buluu ti awọ kan lẹhin # akọkọ. Awọn tọkọtaya kọọkan ti awọn digits bo ikanni kan, lati 00 (ko si) si FF (kikun), eyiti o funni ni awọn awọ 16.7 million kanna bi RGB ninu kikọ kukuru. HEX ni aiyipada ninu CSS, awọn irinṣẹ apẹrẹ ati awọn itọsọna ami.
- Sínatìsí:
- #RRGGBB
- Ibiti:
- 00–FF fun ikanni kọọkan
- Tó dára jùlọ fún:
- CSS, gbigbe apẹrẹ, awọn itọsọna ami
Tábìlì ìtọ́kasí HSL sí HEX
Àwọn awọ CSS tí ó wọ́pọ̀ jùlọ, tí a yí láti HSL sí HEX.
| Awọ | 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 |