HSL rau HEX converter

Hloov txhua HSL xim rau HEX — tam sim thiab dawb

#3398DB

Nqa ib qho xim txiaj — peb pom tus qauv rau koj.

H
S
L
Kev tshwm sim HEX

Tus xim no hauv txhua hom

Tus qauv CMYK: Coated FOGRA39 (Photoshop qhov kev teeb tsa ib txwm rau Tebchaws Europe)

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

  1. Siv saturation thiab lightness ua cov nqi faib: 60% yuav yog 0.6.
  2. Xam chroma C = (1 − |2L − 1|) × S — qhov ntawd yog qhov deb ntawm xim los ntawm grey.
  3. Siv hue los tso chroma rau cov channel liab, ntsuab thiab xiav, ces txav peb qho los ntawm L − C/2.
  4. Ntxiv txhua channel nrog 255, puav pheej nws, thiab sau nws ua ob tus lej hexadecimal.

Qhia ua piv txwv

HSL hsl(204, 70%, 53%)=HEX #3398DB

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.

XimHSLHEX
blackhsl(0, 0%, 0%)#000000
whitehsl(0, 0%, 100%)#FFFFFF
redhsl(0, 100%, 50%)#FF0000
limehsl(120, 100%, 50%)#00FF00
bluehsl(240, 100%, 50%)#0000FF
yellowhsl(60, 100%, 50%)#FFFF00
orangehsl(39, 100%, 50%)#FFA600
tealhsl(180, 100%, 25%)#007F80
purplehsl(300, 100%, 25%)#80007F
grayhsl(0, 0%, 50%)#808080

Cov lus nug feem ntau

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.

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.

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.

Tau. Qhov khawm swap uas nyob ze rau qhov input coj koj mus rau HEX mus HSL converter, uas ua haujlwm tib yam. Ob qho txhia txoj kev siv tib qho formula, tsuas yog siv qhov hloov rov qab.

Tsim palette hauv HSL, tom qab ntawd export HEX. Palette khaws nws cov lus — hue tib yam, lightness qib qib — thaum cov code xa mus kuj nyob hauv hom uas developers xav tau.