HEX na RGB kleuromskakelaar

HEX en RGB: twee maniere om dieselfde kleur te skryf

Elke kleur wat jy op 'n skerm sien, word gemeng uit drie ligte: rooi, groen en blou. Draai al drie op en jy kry wit; skakel almal af en jy kry swart. HEX en RGB is bloot twee notasies om te beskryf hoe helder elk van daardie drie kanale moet wees. Hulle dui na presies dieselfde kleur, sodat 'n goeie omskakelaar bloot tussen die twee skryfstelsels vertaal sonder om ooit die werklike tint te verander. Dit is wat hierdie instrument doen, heeltemal binne jou blaaier, terwyl dit jou 'n lewendige kleurstaal wys sodat jy die resultaat met jou eie oë kan bevestig.

Hoe om 'n heks-kode te lees

'n Heks-kleur lyk soos #1E90FF. Die hekiesimbool merk net die begin; die ses karakters daarna is drie pare, geskryf in die #RRGGBB-patroon. Die eerste paar is rooi, die tweede is groen, die derde is blou. Elke paar is 'n getal geskryf in heksadesimaal, wat basis 16 beteken, waar die syfers 0-9 loop en dan A, B, C, D, E, F staan vir 10 tot 15. Een paar kan waardes hou van 00 (die kanaal heeltemal af) tot FF (heeltemal aan). In gewone desimaal is daardie omvang presies 0 tot 255, dieselfde skaal wat RGB gebruik. Met 256 moontlike vlakke per kanaal kan die ses-syfer-vorm 16 777 216 verskillende kleure beskryf.

Omskakeling in albei rigtings, met 'n uitgewerkte voorbeeld

Om van HEX na RGB te gaan, verdeel die kode in sy drie pare en skakel elkeen om van basis 16 na gewone desimaal. Neem #1E90FF. Die rooi-paar is 1E: dit is 1 vermenigvuldig met 16, plus 14 (E), wat gelyk is aan 30. Die groen-paar 90 is 9 vermenigvuldig met 16, plus 0, wat gelyk is aan 144. Die blou-paar FF is 15 vermenigvuldig met 16, plus 15, wat gelyk is aan 255. So word #1E90FF rgb(30, 144, 255) — die bekende dodger-blou.

Om die ander kant toe te gaan, is dieselfde proses omgekeer. Neem elke RGB-getal en skryf dit as twee heks-syfers. Suiwer rooi, rgb(255, 0, 0), gee FF, 00 en 00, wat saamsluit tot #FF0000. Een ding werd om te onthou: as 'n waarde onder 16 is, het jy steeds albei syfers nodig, sodat 5 as 05 geskryf word en nie net 5 nie. Die omskakelaar hanteer daardie opvulling vir jou, maar dit laat mense struikel wanneer hulle dit met die hand doen.

Waar elke formaat gebruik word

HEX is die alledaagse taal van die web. CSS, HTML en die meeste kode wat jy skryf, gryp na heks-kodes omdat hulle kompak en maklik om te kopieer is. RGB kom eerder na vore binne ontwerp- en beeldinstrumente — Figma, Photoshop, Sketch en Illustrator wys gewoonlik skuiwers of velde in die 0-255-omvang, en skermopname- of video-toepassings verwag ook dikwels RGB. So gryp jy gereeld 'n heks-kode uit 'n stylblad en het jy sy RGB-vorm nodig om in 'n ontwerppaneel te tik, of andersom. Daardie retoerreis is die hele rede waarom 'n omskakelaar handig is. As jy 'n hele stel bypassende tinte moet bou eerder as om een te vertaal, is ons kleurpalet-generator die beter beginpunt, en jy sal meer nutsmiddels soos hierdie onder ontwikkelaarinstrumente vind.

Alfa, dekkrag en HSL

Albei notasies het 'n uitgebreide vorm wat deursigtigheid byvoeg. RGB word rgba(30, 144, 255, 0.5), waar die vierde waarde alfa is — 0 is heeltemal deursigtig en 1 is heeltemal solied. HEX voeg 'n vierde paar vir dieselfde doel by, wat 'n agt-syfer #RRGGBBAA-kode gee; 80, byvoorbeeld, is ongeveer 50 persent dekkrag. 'n Paar omskakelaars bied ook HSL (tint, versadiging, ligtheid), wat kleur beskryf soos 'n mens dit sou doen — kies 'n tint op die wiel, en draai dan sy lewendigheid en helderheid. HSL is 'n ander denkraamwerk eerder as 'n ander palet, sodat dit meer intuïtief kan wees wanneer jy 'n kleur ligter of gedempter wil maak sonder om drie aparte getalle te jongleer.

Gereelde vrae