HSL yog txoj kev nplij siab los xaiv xim, RGB yog qhov uas npo, canvas APIs thiab image code tiag tiag noj. Qhov converter no hloov txhua hue, saturation thiab lightness triple mus rau cov chai 0–255 ntsis raws nraim.
Yuav ua li cas HSL rau RGB hloov ua haujlwm
- Hloov S thiab L ua fractions thiab xam chroma C = (1 − |2L − 1|) × S.
- Faib hue los ntawm 60 kom nrhiav nws qhov segment ntawm lub xim log thiab xam tus nqi intermediate X = C × (1 − |(H/60 mod 2) − 1|).
- Faib C, X thiab 0 rau R, G thiab B slots raws li qhov segment ntawd.
- Ntxiv lub lightness offset L − C/2 rau peb lub channel thiab multiply los ntawm 255.
Qhia ua piv txwv
Thaj txiaj yog ntsis raug txog qhov kev nres kawg mus rau kev sib dhos tag nrho. Fractional hue lossis saturation values yog txhawb thiab tsuas yog nres rau ntawm cov RGB triple ze tshaj plaws.
HSL thiab RGB piav
Dab tsi yog HSL?
HSL faib xim ua hue (0–360° ntawm lub log xim), saturation (xim npaum li cas, 0–100%) thiab lightness (qhov ci npaum li cas, 0–100%). Vim txhua feem phim nrog txoj kev tib neeg piav xim, HSL yog qhov yooj yim tshaj rau tsim tints, shades thiab palettes sib xws — los ntawm tes lossis hauv code.
- Syntax:
- hsl(H, S%, L%)
- Range:
- 0–360°, 0–100%, 0–100%
- Zoo tshaj rau:
- palettes, tints and shades, theming
Dab tsi yog RGB?
RGB piav txog xim ua peb lub channel ntawm teeb — liab, ntsuab thiab xiav — txhua tus los ntawm 0 txog 255. Nws cia raws li cov zaub ua haujlwm tiag: tag nrho peb ntawm 255 yog dawb, tag nrho ntawm 0 yog dub. RGB yog qhov kev xaiv thaum twg koj xav xam nrog xim, thiab rgba() ntxiv kev pom qhov muag (transparency) ntxiv.
- Syntax:
- rgb(R, G, B)
- Range:
- 0–255 per channel
- Zoo tshaj rau:
- code, canvas, transparency with rgba()
HSL rau RGB daim ntawv reference
Cov xim CSS feem ntau, hloov los ntawm HSL rau RGB.
| Xim | 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) |