Chwazi yon koulè nan HSL se konfòtab, men fichye stil yo, transfè konsepsyon ak dokiman mak toujou itilize HEX. Konvètè sa a fè pwogrè a epi bay kòd sis-chif la pou nenpòt konbinezon hue, saturasyon ak limyè.
Ki jan konvèsyon HSL an HEX mache
- Tounen saturasyon ak limyè an fraksyon: 60% vin 0.6.
- Kalkile chroma C = (1 − |2L − 1|) × S — sa montre ki distans koulè a soti nan gri.
- Sèvi ak hue la pou plase chroma sa sou chanèl wouj, vèt ak ble, epi deplase twa chanèl yo pa L − C/2.
- Miltipliye chak chanèl pa 255, awondi li, epi ekri li kòm de chif ekzak nan hexadecimal.
Egzanp ki mache
Awondisman fèt yon sèl fwa, nan dènye etap la, lè yo fikse chak chanèl nan yon valè antye 0–255. Rezilta a se kòd HEX ki pi pre antre HSL ou a epi nòmalman idantik ak sa yon zouti konsepsyon montre.
HSL ak HEX esplike
Kisa HSL ye?
HSL separe yon koulè an hue (0–360° sou wou koulè a), saturation (ki jan koulè a vivan, 0–100%) ak lightness (ki jan li klere, 0–100%). Paske chak pati matche ak fason moun dekri koulè, HSL se fòma ki pi fasil pou konstwi tints, shades ak palèt konsistan — manyèlman oswa nan kòd.
- Sentaks:
- hsl(H, S%, L%)
- Ranje:
- 0–360°, 0–100%, 0–100%
- Pi bon pou:
- palèt, tints ak shades, theming
Kisa HEX ye?
Yon kòd HEX se yon nimewo egzadesimal sis chif ki estoke chanèl wouj, vèt ak ble yon koulè devan yon # kòmanse. Chak pè chif reprezante yon chanèl, soti nan 00 (pa gen okenn) rive FF (konplè), sa ki bay menm 16.7 milyon koulè RGB yo nan yon notasyon pi kout. HEX se defo nan CSS, zouti konsepsyon ak gid mak.
- Sentaks:
- #RRGGBB
- Ranje:
- 00–FF pou chak chanèl
- Pi bon pou:
- CSS, remèt travay konsepsyon, gid mak
Tab referans HSL an HEX
Koulè CSS ki pi komen yo, konvèti soti nan HSL an HEX.
| Koulè | 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 |