Ikkonverti kulur bejn RGB, HSL u eżadeċimali

Il-ħidma bil-kulur fuq il-web tinvolvi kontinwament juggling bejn diversi notazzjonijiet. Konvertitur tal-kulur jevita żbalji manwali u jippermettilek taqleb istantanjament minn format għal ieħor skont il-kuntest tal-użu. Kull format għandu s-saħħiet tiegħu, u li tkun taf liema waħda tuża hija waħda mir-riflessi tal-iżviluppatur front-end.

Hawn huma l-użi tipiċi li jimmotivaw konverżjoni tal-kulur:

• RGB huwa indiġenu fis-CSS u JavaScript, jinqara mill-bnedmin biex jifhmu dominanti (kanali aħmar, aħdar, blu fuq 0-255).
• HSL jagħmel it-tibdil ta' lewn trivjali: aġġusta biss is-saturazzjoni jew il-luminożità mingħajr ma terġa' tikkalkula kull kanal.
• HEX huwa l-format kanoniku għall-kopja u l-pejst: sitt karattri, kompatibbli kullimkien, ideali għal Figma, mudelli Sketch jew gwidi tal-istil.
• Il-konverżjonijietHEX għal RGB, RGB għal HEX, HEX għal HSLu r-reċiproki tagħhom huma l-aktar operazzjonijiet komuni f'CSS u JavaScript.

RGB u RGBA (Aħmar, Aħdar, Blu, Alpha)

Kull kanal huwa kkodifikat bħala numru sħiħ bejn 0 u 255, li jikkorrispondi għal byte wieħed għal kull komponent u jagħti 16,777,216 kulur possibbli. Il-kanal alfa ta' RGBA jvarja minn 0 (trasparenti) sa 1 (opak) u jikkontrolla t-trasparenza.

.button {
    kulur tal-isfond: rgb (20, 0, 182);
    kulur tal-fruntiera: rgba(20, 0, 182, 0.5);
}

HEX u HEX8 (notazzjoni eżadeċimali)

Format kompatt popolari ħafna: #RRGGBB fuq sitt karattri, fejn kull par jirrappreżenta kanal RGB fil-bażi 16. Il-varjant #RRGGBBAA fuq tmien karattri żżid il-kanal alfa b'eżadeċimali (00 trasparenti, FF opak). In-notazzjoni qasira #RGB teżisti wkoll: #F53 hija l-ekwivalenti ta' #FF5533.

.titolu { kulur: #1400B6; }
.dell { kulur: #1400B680; } /* alfa 50% */
.aċċent { kulur: #F53; } /* forma qasira */

HSL u HSLA (Lewn, Saturazzjoni, Ħeffa, Alpha)

HSL jiddeskrivi l-kulur b'mod perċettiv. Huehuwa angolu fuq ir-rota tal-kulur (0 sa 360 °),SaturazzjoniuĦeffahuma perċentwali. Dan huwa l-format preferut għall-ġenerazzjoni tal-varjazzjonijiet: tħaffef buttuna miġbuda fuq, desaturazzjoni ta 'stat diżattivat, ħolqien ta' paletta koerenti billi tvarja biss il-lewn.

$primarja: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* aktar ċar */
$primary-muted: hsl(247, 30%, 36%);    /* inqas saturat */

Formati eżistenti oħra

CMYK(Cyan, Magenta, Yellow, Key) jintuża fl-istampar: jiddeskrivi kulur bit-tnaqqis tal-linka u mhuwiex rilevanti fuq l-iskrin. OKLCHuLABhuma spazji perċettivament uniformi li dehru f'CSS Kulur Livell 4; dawn jippermettu kontroll aħjar tal-luminożità feltru. Din l-għodda tiffoka fuq konverżjonijiet RGB, HEX u HSL, li jkopru l-maġġoranza l-kbira tal-ħtiġijiet tal-web.

HEX għal RGB jammonta għal parsing tas-sekwenza f'pari ta 'karattri u interpretazzjoni ta' kull par bħala numru sħiħ bażi 16:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB għal HEXhuwa l-operazzjoni inversa: kull kanal huwa kkonvertit għal bażi 16, ikkuttunat għal żewġ karattri, imbagħad magħqud.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB għal HSLhuwa aktar algoritmiku. Aħna ninnormalizzaw il-kanali bejn 0 u 1, nikkalkulaw il-min u l-max biex niddeduċu l-luminożità, imbagħad is-saturazzjoni, imbagħad il-lewn skont il-kanal dominanti. Il-formula sħiħa hija dokumentata fl-ispeċifikazzjoni tal-Livell 3 tal-Modulu tal-Kulur CSS.

L-għodda taħdem fiż-żewġ direzzjonijiet bejn RGB, HEX u HSL. Biex twettaq konverżjoni:

1. Agħżel il-format tad-dħul: RGB, HEX jew HSL.
2. Daħħal il-valur (per eżempju #1400B6, rgb(20, 0, 182) jew hsl(247, 100%, 36%).
3. Ibda l-konverżjoni: l-ekwivalenti fiż-żewġ formati l-oħra jintwerew immedjatament.
4. Ikkopja r-riżultat mixtieq billi tuża l-buttuna apposta u waħħalha fil-folja tal-istil jew it-tqassim tiegħek.

Il-kalkolu jsir fuq in-naħa tal-browser, l-ebda data ma tintbagħat lil server.

• Disinn tal-web u CSS: irkupra HEX minn mockup u akkwista l-HSL ekwivalenti biex tiġġenera stat ta' hover jew attiv mingħajr ma tiddevja mil-lewn.
• Identità viżiva u paletta: irrifjuta kulur primarju f'diversi varjazzjonijiet (dawl, skur, siekta) billi tilgħab fuq il-luminożità jew is-saturazzjoni HSL.
• Illustrazzjoni u grafika: jittrasponi kulur tal-iskrin (RGB) f'kodiċi eżadeċimali biex jittrasmetti lil softwer jew klijent.
• Aċċessibbiltà: ikkonverti għal format RGB biex imbagħad tikkalkula proporzjon ta' kuntrast (WCAG AA teħtieġ 4.5:1 għal test normali) bil-kulur tal-isfond.
• Vjabbli CSS u Preproċessuri: Iddaħħal tokens tad-disinn f'fajl SASS jew tema Tailwind minn kulur ta' referenza wieħed.

Xi konverżjonijiet kompluti biex juru l-korrispondenza bejn it-tliet formati:

#1400B6 -> rgb(20, 0, 182) -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51) -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113) -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15) -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb (0, 0, 0) -> hsl (0, 0%, 0%)

Bil-kanal alfa:

#1400B680 -> rgba(20, 0, 182, 0.50) -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80) -> hsla(11, 100%, 60%, 0.80)

X'inhi d-differenza bejn HEX u HEX8?

Classic HEX jikkodifika tliet kanali RGB fuq sitt karattri (#RRGGBB). HEX8 iżid żewġ karattri għall-kanal alfa (#RRGGBBAA), li jgħin fil-ġestjoni tat-trasparenza f'sekwenza waħda. #1400B6FF u #1400B6 viżwalment jagħtu l-istess kulur, opak.

Għandna nippreferu HSL jew RGB f'CSS?

It-tnejn huma ekwivalenti fl-għoti. L-HSL hija aktar espressiva biex tiġġenera paletta koerenti jew varjanti tal-istat (hover, focus), għaliex aħna nimmodifikaw parametru perċettiv wieħed. L-RGB jibqa' prattiku meta taħdem b'dejta minn kanvas jew sensor.

Għaliex l-HEX tiegħi jagħti sfumatura differenti milli mistenni?

Tliet kawżi komuni: konfużjoni bejn #RGB qasir u #RRGGBB twil (il-karattri huma duplikati, mhux konkatenati), żball ta' kopja fuq karattru, jew wiri fuq skrin mhux ikkalibrat. Iċċekkja wkoll li s-CSS tiegħek ma jkoprix opaċità ġenitur li timmodifika l-għoti finali.

Għaliex jintuża l-kanal alfa ta' RGBA u HSLA?

Il-kanal alfa jikkontrolla l-opaċità tal-kulur, minn 0 (trasparenti għal kollox) għal 1 (opak għal kollox). Huwa utli għal overlays, dellijiet, stati b'diżabilità jew overlays ta 'immaġni. B'differenza mill-proprjetà CSS opacity, RGBA u HSLA jaffettwaw biss il-kulur immirat u mhux it-tfal tiegħu.

Nistgħu nikkonverti kulur mingħajr telf ta 'preċiżjoni?

Bejn RGB u HEX il-konverżjoni hija eżatta, iż-żewġ formati jikkodifikaw l-istess informazzjoni fuq 24 bit. Il-konverżjoni għal HSL tinvolvi arrotondament fuq lewn, saturazzjoni u luminożità; vjaġġ bir-ritorn RGB > HSL > RGB għalhekk jista 'jirritorna valur imċaqlaq b'unità waħda fuq ċerti kanali.

Għaliex tuża konvertitur onlajn aktar milli funzjoni interna?

Għal test ta 'darba, prototip ta' paletta jew iċċekkja malajr l-ekwivalenti HEX ta 'kulur HSL estratt minn mudell, konvertitur onlajn huwa immedjat. Għal ħtieġa programmatika rikorrenti, librerija bħal color, chroma-js jew tinycolor2 tibqa’ aktar xierqa.