RGB qhia screen saib yuav tso ntau npaum li cas lub teeb; HSL qhia koj xim zoo li cas tiag. Hloov peb channel mus hue, saturation thiab lightness ua rau xim yooj yim kho ntawm txhais tes.
Yuav ua li cas RGB rau HSL hloov ua haujlwm
- Fais R, G thiab B los ntawm 255 kom txhua tus nqi nyob nruab nrab 0 thiab 1.
- Tsa qhov loj tshaj thiab me tshaj ntawm peb tus — lawv nruab nrab yog lub teeb L.
- Yog tias qhov loj tshaj thiab me tshaj zoo ib yam, xim yog grey: hue thiab saturation ob leeg yog 0.
- Yog tsis yog, xam S los ntawm qhov faib ntawm qhov loj tshaj thiab me tshaj, thiab nyeem H los ntawm qhov channel twg yog qhov loj tshaj.
Qhia ua piv txwv
Yog tseeb hauv lub tswv yim. Vim H, S thiab L feem ntau tau qhia ua lej puav pheej, hloov rov qab tej zaum yuav txav ib channel ib los ob kauj ruam.
RGB thiab HSL piav
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()
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
RGB rau HSL daim ntawv reference
Cov xim CSS feem ntau, hloov los ntawm RGB rau HSL.
| Xim | 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%) |