HSL piav ib xim li tib neeg hais txog nws: hue twg, xim zog ntau npaum li cas, thiab ci ntsa iab li cas. Hloov ib qho HEX code mus HSL yog txoj kev ceev tshaj plaws kom xim mus rau hauv daim foos uas koj tuaj yeem kho tau — ua kom ci dua, ua nruj dua, lossis tsim ib qib tag nrho los ntawm nws.
Yuav ua li cas HEX rau HSL hloov ua haujlwm
- Hloov HEX code mus RGB thiab faib txhua channel rau 255, kom txhua peb tus nyob nruab nrab 0 thiab 1.
- Nrhiav qhov loj tshaj thiab qhov me tshaj ntawm peb tus nqi. Lawv nruab nrab yog lub teeb L (lightness).
- Tus faib tawm ntawm lawv tsav qhov saturation S: faib nws los ntawm (2 − max − min) rau xim ci, lossis los ntawm (max + min) rau xim tsaus.
- Channel uas muaj qhov loj tshaj txiav txim siab hue H — liab yog 0°, ntsuab 120°, xiav 240° — thiab ob lub channel tshuav ua kom hue nyob hauv qhov segment ntawd.
Qhia ua piv txwv
Cov lej suav yog tseeb, tab sis HSL cov nqi feem ntau raug puav pheej ua degrees thiab feem pua. Hloov dua rov qab yuav ua rau koj tau tsiv ib lossis ob kauj ruam RGB ntawm thawj — pom tsis pom hauv kev siv, tab sis yuav tsum paub yog tias koj hloov zaum kawg ntau zaus.
HEX thiab HSL piav
Dab tsi yog HEX?
A HEX code is a six-digit hexadecimal number that stores the red, green and blue channel of a color behind a leading #. Each pair of digits covers one channel, from 00 (none) to FF (full), which gives the same 16.7 million colors as RGB in a much shorter notation. HEX is the default in CSS, design tools and brand guidelines.
- Syntax:
- #RRGGBB
- Range:
- 00–FF per channel
- Zoo tshaj rau:
- CSS, design handoff, brand guidelines
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
HEX rau HSL daim ntawv reference
Cov xim CSS feem ntau, hloov los ntawm HEX rau HSL.
| Xim | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |