HSL se fason zanmitay pou chwazi koulè, RGB se sa ekran, APIs canvas ak kòd imaj aktyèlman itilize. Konvètè sa a vire nenpòt trip H, S ak L an chanèl egzak 0–255.
Ki jan konvèsyon HSL an RGB mache
- Konvèti S ak L an fraksyon epi kalkile kroma C = (1 − |2L − 1|) × S.
- Divize hue pa 60 pou jwenn segman li sou wou koulè a epi kalkile valè entèmedyè X = C × (1 − |(H/60 mod 2) − 1|).
- Asiyen C, X ak 0 nan plas R, G ak B selon segman sa a.
- Ajoute deske limyè L − C/2 sou twa chanèl yo epi miltipliye pa 255.
Egzanp ki mache
Rezilta a egzak jouk dènye awondi pou chanèl antye yo. Valè hue oswa saturation fractional yo sipòte e yo senpleman tonbe sou trip RGB ki pi pre a.
HSL ak RGB 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 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()
Tab referans HSL an RGB
Koulè CSS ki pi komen yo, konvèti soti nan HSL an RGB.
| Koulè | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |