Learn Hue Saturation and Brightness (HSB) colour coding

Cyflwyniad

Rydym eisoes wedi cyflwyno'r model RGB i godio lliwiau ar gyfrifiadur. Yn y gweithgaredd hwnnw dywedais:

Gwerthoedd glas gwyrdd coch ar hyd y top, gyda'r lliw enfys barhaus

“Gallwn naill ai gynrychioli lliw mewn gwerthoedd o Goch, Gwyrdd a Glas (a elwir yn lliwiau RGB), neu'r pellter a deithiwyd ar hyd enfys o liw.“

Nawr byddwn yn canolbwyntio ar godio lliwiau drwy Arlliw, Dirlawnder a Disgleirdeb (Hue, Saturation and Brightness - HSB).

Pam ffordd arall i godio lliwiau?

Un ateb syml yw weithiau, mae un ffordd yn well na'r llall. Mewn rhai sefyllfaoedd efallai y bydd RGB yn haws i raglennydd ei ddefnyddio, ond mewn sefyllfaoedd eraill efallai y byddai'n well defnyddio'r model HSB, o'i gymharu â'r RGB neu eraill. O ganlyniad, mae'n dda deall gwahanol ddulliau codio.

Tip Defnyddiol
RGB = coch, gwyrdd, glas.
HSB - arlliw, dirlawnder a disgleirdeb.

Mewn gwirionedd, mae sawl ffordd o roi lliwiau ar gyfrifiadur. Yn ôl yn nyddiau cynnar cyfrifiaduron, yn y 1960au a'r 1970au, roedd arloeswyr cyfrifiadurol eisiau ffordd o gofnodi ac ailgynhyrchu lliw yn gyson. Roeddynt angen ffyrdd i godio lliw fel y gellid ei arddangos ar sgrin cyfrifiadur, ei drosglwyddo dros donnau awyr, ac yn y blaen, mewn ffordd gyson, hwylus a chywir. Gelwir HSB hefyd yn fodel Arlliw, Dirlawnder a Gwerth (Hue, Saturation and Value - HSV) ac fe'i dyfeisiwyd yn 1978 gan Alvy Ray Smith.

Codio yw ffordd arall o ddweud "gadewch i ni newid y ffenomen yn ffordd y gallwn ei storio a'i drin ar gyfrifiadur". O ganlyniad, mae angen newid lliwiau i rifau a llythrennau. Ar gyfrifiadur, gennym lawer o ddulliau i storio gwerthoedd: gallwn ddefnyddio gwerthoedd pwynt anwadal, canrannau (gwerthoedd yn amrywio o 0 i 100), neu werthoedd rhwng 0 ac 1, hyd yn oed cymysgedd o lythrennau a rhifau. Yn RGB rydym yn storio lliw yn ôl gwerthoedd (rhwng 0 a 255) ar gyfer pob un o'r lliwiau coch, gwyrdd a glas (e.e., RGB (125, 255, 25).

Mae yna ffyrdd gwahanol o godio lliwiau, ond hefyd ffyrdd gwahanol o ystyried lliwiau. Er enghraifft, gallwn ddeall lliw o gymysgu goleuadau, meddwl am donfeddi golau, sut mae paent yn cael ei gymysgu, sut rydym yn canfod lliwiau, neu hyd yn oed enwi lliwiau unigol. O ganlyniad, mae gwahanol ffyrdd o gynrychioli lliw. Nid yw'r un o'r ffordd o "feddwl am liw" yn well na'r llall; ond efallai eu bod yn well at ddibenion penodol.

Mae gwyddonwyr, fodd bynnag, angen ffyrdd o fynegi eu syniadau, a chreu modelau lliw sy'n disgrifio eu syniadau yn haniaethol, ac yn diffinio gofodau lliw i gyflwyno eu syniadau.

Modelau lliw yw cynrychioliadau haniaethol o liw. Fel arfer, maen nhw'n cynnwys disgrifiad manwl a hafaliad mathemategol i fynegi'r cysyniad o liw, a llun o'r model i'n helpu ni i ddychmygu'r syniad.

Mae'r gofod lliw yn caniatáu i ni ddeall un model o'i gymharu â'r llall. Efallai y gallwn ddod o hyd i ffordd o fapio'r model lliw yn system gydgysylltu dau ddimensiwn, neu ddarlun tri dimensiwn. Mae'r mannau hyn nid yn unig yn ein helpu i ddychmygu'r model lliw, ond yn ein helpu i gymharu un model yn erbyn y llall.

Throughout history many colour models have been invented. But they have been done for one purpose: to help people understand colour better. Much of our understanding of colour begins with Isaac Newton (1642-1726). Newton used a prism to split light into its colour spectrum. He named the colours red, orange, yellow, green, blue, indigo and violet (gweler lliwiau ac enfysau).

Creodd Newton ei olwyn liw ei hun i gynrychioli'r lliwiau hyn. Trefnodd y lliwiau yn nhrefn y sbectrwm. Ond creodd ysbeidiau anwastad yn seiliedig ar nodiadau cerddorol.

Ar gyfer y model HSB, rydym yn rhoi coch ar y brig, ac mae'r sbectrwm lliwiau o amgylch y cylch. Gadewch i ni nawr fynd drwy bob un o'r rhannau: Arlliw, Dirlawnder a Disgleirdeb.

Arlliw

Yn y model HSB, mae arlliw yn cael ei dynodi gan ongl o amgylch y cylch. Mae coch wedi'i osod ar y brig ar 0 °, melyn-gwyrdd ar 90 °, gwyrddlas ar 180 °, a phorffor ar 270 °. Drwy newid yr ongl, gallwn ddewis arlliw penodol.

Tip Defnyddiol
Ceisiwch gofio rhai o'r onglau. Coch ar 0 °, melyn ar 60 °, gwyrdd ar 120 °, gwyrddlas ar 180 °, a glas ar 240 °.

Pan fyddwch yn defnyddio gwahanol raglenni cyfrifiadurol (fel golygydd lluniau) efallai y bydd angen i chi ddewis lliwiau drwy dewisydd lliw. Mewn rhai dewisyddion lliw, mae'r olwyn yn cael ei gwastatau'n hirsgwar o liwiau. Ond mae'r arlliwiau yn dal i gael gwerthoedd rhwng 0 a 360.

Llinell liw arlliw

Os edrychwn ymhellach, gallwn weld egwyddorion cymysgu golau ar waith! Mae'r arlliwiau cynradd o goch, gwyrdd a glas wedi'u gwahanu'n gyfartal o amgylch y cylch: coch ar 0 °, gwyrdd ar 120 ° a glas ar 240 °.

Primary colour hues on the HSB circle — Lliwiau cynradd yn y fodel HSB

Mae'r arlliwiau eilaidd, gwyrddlas, magenta a melyn, yn cael eu gweld rhwng yr arlliwiau cynradd. Pan fyddwn yn cymysgu golau coch a gwyrdd rydym yn cael golau melyn, glas a gwyrdd yn cynhyrchu gwyrddlas, a golau coch a glas yn cynhyrchu magenta.

Tip Defnyddiol
Ceisiwch gofio safleoedd yr olwynion lliw ar gyfer y lliwiau cynradd ac eilaidd.

Primary and secondary colours in the HSB model — Lliwiau cynradd ac eilaidd yn y model HSB

Dirlawnder

Dirlawnder yw dwyster y lliw: cyfoeth y lliw. Ar sero nid oes lliw a dangosir gwyn, ac ar 100 y mae arlliw pur. Beth am ddewis gwerth arlliw o 240° i gael lliw dwfn-glas, gallwn wedyn newid y lefelau dirlawnder 10% gan ddechrau ar 0%.

Gallwn wneud yr un peth gyda gwerth oren. Gan ddechrau heb unrhyw liw a symud tuag at yr arlliw lliw llawn.

Disgleirdeb (neu werth)

Disgleirdeb yw disgleirdeb y lliw! Os nad yw'r lliw yn llachar yna mae gennym y fersiwn tywyllaf o'r lliw hwnnw (bydd yn edrych yn ddu). A phan fydd gennym y lliw disgleiriaf rydym yn cael yr arlliw ei hun ar ei ffurf buraf.

Showing dark-blue hue at 240˚ with change of brightness

Showing an orange hue at 40˚ with change of brightness

Model gofod HSB (HSV)

Gallwn feddwl am y model HSB mewn delweddu tri dimensiwn. Mewn 3D, mae'r model lliw yn edrych fel silindr, gyda'r lliw o gwmpas yr ochr, dirlawnder tuag at ganol y silindr a disgleirdeb o'r top i'r gwaelod.

Hue Saturation Brightness (HSB) colour space, represented by a cylinder. — Gofod lliw Arlliw Disgleirdeb Dirlawnder (HSB) a gynrychiolir gan silindr

Mae'r model yma yn ein helpu i ddeall sut y gallwn drin y gwerthoedd.

Drwy gynyddu'r gwerth arlliw, rydyn ni'n cylchdroi'n glocwedd o amgylch y cylch. Os ydyn ni'n lleihau'r arlliw, rydyn ni'n cylchdroi'n wrthglocwedd.
Os byddwn yn lleihau dirlawnder, rydym yn symud i ganol y silindr. Mae hyn yn arwain at fersiwn llai dirlawn o'r lliw hwnnw.
I leihau'r disgleirdeb (gan wneud y lliw yn dywyll) rydym yn symud i lawr y silindr. Symud tuag i fyny i gynyddu disgleirdeb.

HSB a rhyngwynebau lliw (dewisydd lliw)

Er bod y silindr yn ffordd ddefnyddiol o ddychmygu'r model lliw HSB, yn ymarferol nid yw'n hawdd iawn i drin lliw mewn 3D. Felly, mae dewisyddion lliw yn defnyddio llithryddion a botymau i reoli'r lliw.

Defnyddio tri llithrydd i reoli HSB.

Each slider therefore represents one of Hue, Saturation and Brightness (or value).

Sliders can be used to select HSB values — Gellir defnyddio llithryddion i ddewis gwerthoedd HSB. Yma rydym yn dangos lliw glas ar 256°, gyda'r dirlawnder a'r disgleirdeb uchafswm.

In this example we reduce the saturation and brightness to 50% with the same hue of 256˚ — Gellir defnyddio llithryddion i ddewis gwerthoedd HSB, yn yr enghraifft hon, rydym yn lleihau'r dirlawnder a'r disgleirdeb i 50% gyda'r un arlliw o 256°.

Plotio mewn dau ddimensiwn

Dull arall yw plotio dau ddimensiwn o'r lliw, a chynrychioli'r trydydd gyda llithrydd. Felly, er enghraifft, gallwn blotio dirlawnder yn erbyn disgleirdeb, a chael yr arlliw lliw ar lithrydd. Fel hyn gallwch ddewis yr "arlliw cyfredol". Yna caiff yr holl gysgodion eu mapio ar grid 2d, gyda dirlawnder ar yr echelin x a disgleirdeb ar echelin y. Mae gwyn wedi ei blotio ar yr ochr chwith uchaf a du ar hyd y gwaelod.

Colour picker in HSB space, with saturation and brightness plotted. — Dewisydd lliw mewn gofod HSB, gyda dirlawnder a disgleirdeb wedi'i blotio. Mae'r lliw a ddewiswyd yn dangos HSB (256 °, 50%, 50%)

Gweithgareddau

Yn y gweithgareddau yma byddwn yn defnyddio'r dewisydd lliw Google, a'r prif nod yw i chi ymarfer defnyddio'r model HSB.

Cam 1. Llwytho'r Dewisydd Lliw Google

I gael mynediad at yr offeryn hwn, ewch i ffenestr porwr, ac yn y porwr llwythwch bar chwilio, fel y bar chwilio Google, a theipiwch "google dewisydd lliw". Os ydych chi'n defnyddio'r peiriant chwilio Google, byddai "dewisydd lliw" yn ddigon da. Dylai hyn lwytho sawl canlyniad ar liw, a darlunio'r dewisydd lliw ar y brig. Gadewch i ni ddim ond canolbwyntio ar y rhyngwyneb dewisydd lliw.

Dewisydd lliw Google, gyda'r arlliw a ddewiswyd (256 °, 50%, 50%)

Nodyn. Mae Dewisydd lliw Google hefyd yn dangos y gwerthoedd lliw mewn tri model lliw arall. Mae'n dangos gwerthoedd yn RGB, CYMK, HSB a hefyd gofodau lliw HSL; ond gadewch i ni ganolbwyntio ar werthoedd HSB.

Cam 2. Lleoli'r lliwiau cynradd ac eilaidd

Nawr ceisiwch ddod o hyd i'r lliwiau cynradd ac eilaidd.

Canfod, y lliwiau cynradd: coch, gwyrdd a glas. Drwy symud y cylch, neu newid y gwerthoedd yn y meysydd testun, dewch o hyd i'r prif liwiau (coch, gwyrdd a glas). Bydd angen i chi osod y disgleirdeb a'r dirlawnder i'r uchafswm.
Canfod y lliwiau eilaidd: melyn, gwyrddlas a magenta. Ceisiwch gael yr union werthoedd o 60°, 180° a 300° yn y drefn honno.

Cam 3. Ymchwilio i frown

Dewch o hyd i frown lliw ar 33°, a gosod dirlawnder a disgleirdeb i 100%. Y syniad yw ymchwilio i sut mae'r lliwiau'n newid pan fyddwch chi'n newid dirlawnder a disgleirdeb.

Y dasg yw lleihau'r dirlawnder o werth 40 ac yna'r disgleirdeb o werth 40, ac yna gwneud grid o liwiau.

Dasg, i ymchwilio i wahanol ysgafnder a disgleirdeb brown.

Edrych ymhellach

Beth am wneud eich ymchwil eich hun ar liw.

Efallai cymerwch olwg ar wahanol fodelau lliw a lle cânt eu defnyddio.
Edrychwch ar dewisyddion lliwiau, a gweld sut maen nhw'n cael eu defnyddio.
Ceisiwch gofio rhai o'r gwerthoedd lliw a'u gwerthoedd yn y model lliw HSB.