RGB di yon ekran konbyen limyè pou emèt; HSL di w kisa koulè a vrèman sanble. Konvèti twa chanèl yo an hue, saturasyon ak limyè fè koulè a fasil pou ajiste manyèlman.
Ki jan konvèsyon RGB an HSL mache
- Divize R, G ak B pa 255 pou chak valè chita ant 0 ak 1.
- Pran maksimòm ak minimòm nan twa yo — mwayèn yo se limyè L.
- Si maksimòm ak minimòm egal, koulè a se gri: hue ak saturasyon toude se 0.
- Sinon derive S soti nan diferans ant maksimòm ak minimòm, epi li H nan chanèl ki maximal la.
Egzanp ki mache
Egzak an prensip. Paske H, S ak L nòmalman afiche kòm nimewo antye awondi, konvèsyon retou ka deplase yon chanèl pa youn oswa de etap.
RGB ak HSL esplike
Kisa RGB ye?
RGB dekri yon koulè kòm twa chanèl limyè — wouj, vèt ak ble — chak soti 0 rive 255. Li reflete kijan ekran yo vrèman fonksyone: tout twa a 255 bay blan, tout a 0 bay nwa. RGB se chwa ki bon lè ou bezwen fè kalkil ak yon koulè, epi rgba() ajoute transparans anplis.
- Sentaks:
- rgb(R, G, B)
- Ranje:
- 0–255 pou chak chanèl
- Pi bon pou:
- kòd, canvas, transparans ak rgba()
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
Tab referans RGB an HSL
Koulè CSS ki pi komen yo, konvèti soti nan RGB an HSL.
| Koulè | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |