Xaiv xim hauv HSL xis dua, tab sis stylesheet, design handoffs thiab ntaub ntawv brand tseem siv HEX. Qhov converter no kaw qhov chaw ntawd thiab muab koj cov code rau rau-chav rau txhua hue, saturation thiab lightness miv.
Yuav ua li cas HSL rau HEX hloov ua haujlwm
- Siv saturation thiab lightness ua cov nqi faib: 60% yuav yog 0.6.
- Xam chroma C = (1 − |2L − 1|) × S — qhov ntawd yog qhov deb ntawm xim los ntawm grey.
- Siv hue los tso chroma rau cov channel liab, ntsuab thiab xiav, ces txav peb qho los ntawm L − C/2.
- Ntxiv txhua channel nrog 255, puav pheej nws, thiab sau nws ua ob tus lej hexadecimal.
Qhia ua piv txwv
Puav pheej tshwm sim ib zaug, hauv kauj ruam kawg, thaum txhua channel raug nplaum rau tus lej tag nrho 0–255. Qhov tshwm sim yog HEX code ze tshaj rau koj HSL input thiab feem ntau yog tib yam li yam uas design tool qhia.
HSL thiab HEX 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 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
HSL rau HEX daim ntawv reference
Cov xim CSS feem ntau, hloov los ntawm HSL rau HEX.
| Xim | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |