D’athnuachan mé na grafaicí beoite ar mo shuíomh Gréasáin le déanaí le téama nua agus grúpa de charachtair ceannródaíocha, ag cur neart na dteicnící a roinn mé sa tsraith seo i bhfeidhm. Athraíonn roinnt de mo bheochan cuma nuair a idirghníomhaíonn duine leo nó ag amanna éagsúla den lá.
Athraíonn na dathanna sa ghrafaic ar bharr leathanaigh mo bhlag ó mhaidin go hoíche gach lá. Ansin, tá an modh sneachta ann, a chuireann dathanna fuara agus téama geimhridh leis, le caoinchead ciseal forleagan agus modh cumasc.
Agus mé ag obair air seo, thosaigh mé ag smaoineamh an bhféadfadh luachanna datha coibhneasta CSS níos mó smachta a thabhairt dom agus an próiseas á shimpliú ag an am céanna. Nóta: Sa rang teagaisc seo, díreoidh mé ar luachanna datha coibhneasta agus ar an spás datha OKLCH le haghaidh grafaic téamaí agus beochan. Más mian leat dul go domhain isteach i ndath choibhneasta, chruthaigh Ahmad Shadeed treoirleabhar idirghníomhach den scoth. Maidir le spásanna datha, gamuts, agus OKLCH, scríobh ár Geoff Graham féin fúthu.
Bhí sé ríthábhachtach eilimintí a úsáid arís agus arís eile. Athúsáideadh cúlraí nuair ab fhéidir, le súmáil isteach agus forleagain ag cuidiú le radhairc nua a chruthú ón saothar ealaíne céanna. Rugadh é de riachtanas, ach spreag sé freisin smaoineamh i dtéarmaí sraithe seachas radhairc aonair. An fhadhb Le Pailéid Dath a Nuashonrú de Láimh Rachaimid díreach chuig mo dhúshlán. I dTeidil Toon mar an gceann seo - bunaithe ar an gclár Yogi Bear Show 1959 “Lullabye-Bye Bear” - agus ar mo chuid oibre go ginearálta, tá na pailéid teoranta do roinnt dathanna roghnaithe.
Cruthaím dathanna agus tint as an rud a dtugaim mo dhath “fondúireacht” air chun an pailéad a leathnú gan níos mó dathanna a chur leis.
I Sceitseáil, oibrím sa spás datha HSL, mar sin is éard atá i gceist leis an bpróiseas seo ná méadú nó laghdú ar luach éadrom mo bhundath. Go hionraic, ní tasc deacair é - ach má roghnaíonn tú bundath difriúil ní mór sraith iomlán nua de shades agus tint a chruthú. É sin a dhéanamh de láimh, arís agus arís eile, go tapa a thiocfaidh chun bheith saothair.
Luaigh mé an HSL - H (lí), S (sáithiú), agus L (éadrom) - spás datha, ach níl ansin ach ceann amháin de roinnt bealaí chun cur síos a dhéanamh ar dhath. Is dócha gurb é RGB - R (dearg), G (glas), B (gorm) - an ceann is eolach, ar a laghad ina fhoirm Heics. Tá LAB - L (éadroime), A (glas-dearg), B (gorm-buí) - agus an tsamhail níos nuaí, ach a dtacaítear go forleathan leis anois, LCH - L (éadrom), C (chroma), H (lí) - ina fhoirm OKLCH. Le LCH - go sonrach OKLCH i CSS - is féidir liom luach éadrom mo bhundath a choigeartú.
Nó is féidir liom a chroma a athrú. Déanann cróma LCH agus sáithiúchán HSL araon cur síos ar dhéine nó ar shaibhreas datha, ach déanann siad amhlaidh ar bhealaí éagsúla. Tugann LCH raon níos leithne dom agus cumasc níos intuartha idir dathanna.
Is féidir liom an lí a athrú freisin chun pailéad dathanna a chruthú a roinneann na luachanna gile agus cróma céanna. I HSL agus LCH araon, tosaíonn an speictream lí ag dearg, bogann sé trí ghlas agus gorm, agus filleann sé ar dearg.
Cén Fáth ar athraigh OKLCH Mar a Smaoiním ar Dhath Tá tacaíocht brabhsálaithe don spás datha OKLCH forleathan anois, fiú mura bhfuil uirlisí deartha - lena n-áirítear Sceitse - tar éis teacht suas. Ar ámharaí an tsaoil, níor cheart go gcuirfeadh sé sin stad ort ó OKLCH a úsáid. Déanfaidh brabhsálaithe luachanna Heics, HSL, LAB, agus RGB a thiontú go OKLCH duitse. Is féidir leat airí saincheaptha CSS le bundath a shainiú in aon spás, lena n-áirítear Heics: /* Bundath */ --bunús: #5accd6;
Déanfar aon dathanna a dhíorthaítear uaidh a thiontú go OKLCH go huathoibríoch: --foundation-light: oklch(ó var(--foundation) [...]; } --foundation-mid: oklch(ó var(--foundation) [...]; } --foundation-dark: oklch(ó var(--foundation) [...]; }
Dath Coibhneasta Mar Chóras Deartha Smaoinigh ar dhath coibhneasta mar a rá: “Tóg an dath seo, tweak it, ansin tabhair an toradh dom.” Tá dhá bhealach ann chun dath a choigeartú: athruithe absalóideacha agus athruithe comhréireacha. Breathnaíonn siad cosúil le cód, ach iad féin a iompar an-difriúil nuair a thosaíonn tú ag malartú bundathanna. Is éard is ciall leis an difríocht sin a thuiscint ná an rud is féidir le dath coibhneasta a úsáid ina chóras. /* Bundath */ --bunús: #5accd6;
Mar shampla, is é 0.7837 luach éadrom mo dhath bunús, agus tá luach 0.5837 ag leagan níos dorcha. Leis an difríocht a ríomh, bainim an luach níos ísle ón gceann is airde agus cuirim an toradh i bhfeidhm ag baint úsáide as feidhm calc(): --bunús-dorcha: oklch(ó var(--fondúireacht) calc(l - 0.20) c h);
Chun dath níos éadroime a bhaint amach, cuirim an difríocht leis ina ionad sin: --fondúireacht-solas: oklch(ó var(--fondúireacht) calc(l + 0.10) c h);
Chromaleanann coigeartuithe an próiseas céanna. Chun déine dath mo bhunús a laghdú ó 0.1035 go 0.0035, bainim luach amháin ón gceann eile: oklch(ó var(--fondúireacht) l calc(c - 0.10) h);
Chun pailéad dathanna a chruthú, ríomhaim an difríocht idir luach lí mo bhundath (200) agus luach mo lí nua (260): oklch(ó var(--fondúireacht) l c calc(h + 60));
Tá na ríomhanna sin absalóideach. Nuair a dhealúim méid seasta, táim ag rá go héifeachtach, "Dealaigh é seo i gcónaí." Tá an rud céanna i gceist nuair a chuirtear luachanna seasta leis: calc(c - 0. 10) calc(c+0.10)
D'fhoghlaim mé teorainneacha an chur chuige seo ar an mbealach crua. Nuair a bhí mé ag brath ar luachanna seasta chroma a dhealú, thit dathanna i dtreo liath a luaithe a d'athraigh mé an bunús. Thit pailéad a d'oibrigh do dhath amháin as a chéile. Iompraíonn iompar difriúil. Nuair a iolraím croma, tá mé ag rá leis an mbrabhsálaí: “Laghdaigh déine an datha seo de réir comhréire.” Fanann an gaol idir dathanna slán, fiú nuair a athraíonn an bunús: calc(c*0.10)
Mo Bog é, Scála é, Rialacha Rothlaigh é
Bog éadrom (suim nó dealú), Scála chroma (méadaigh), Rothlaigh lí (céimeanna a shuimiú nó a dhealú).
Déanaim scála ar chroma toisc go dteastaíonn uaim go bhfanfadh athruithe déine i gcomhréir leis an mbundath. Tá caidrimh lí ina uainíocht, mar sin ní dhéanann sé aon chiall le lí a iolrú. Tá éadroime aireachtála agus iomlán - is minic a bhíonn torthaí aisteacha á n-iolrú.
Ó Dhath Amháin go Téama Iomlán Ligeann dath coibhneasta dom bundath a shainiú agus gach dath eile a theastaíonn uaim a ghiniúint – líonann, strócanna, stopann grádán, scáthanna – uaidh. Ag an bpointe sin, stopann dath a bheith ina pailéad agus tosaíonn a bheith ina chóras. Is gnách go n-úsáideann léaráidí SVG an cúpla dath céanna trasna líonadh, strócanna agus grádáin. Ligeann dath coibhneasta duit na caidrimh sin a shainiú uair amháin agus iad a athúsáid i ngach áit - cosúil le beochantóirí cúlraí athúsáidte chun radhairc nua a chruthú.
Athraigh dath an bhunsraithe uair amháin, agus nuashonraíonn gach dath díorthaithe go huathoibríoch, gan rud ar bith a athríomh de láimh. Lasmuigh de ghrafaic bheoite, d’fhéadfainn an cur chuige céanna seo a úsáid chun dathanna a shainiú do staid na n-eilimintí idirghníomhacha amhail cnaipí agus naisc. Is é an dath dúshraith a d’úsáid mé i mo Theideal Toon “Lullabye-Bye” ná cian-lorg. Is grádán gathacha é an cúlra idir mo bhunús agus leagan níos dorcha.
Chun leaganacha malartacha a chruthú a bhfuil giúmar iomlán difriúil acu, ní gá dom ach an bundath a athrú: --bunús: #5accd6; --grad-deireadh: var(--fondúireacht); --grad-start: oklch(ó var(--foundation) calc(l - 0.2357) calc(c * 0.833) h);
Chun na hairíonna saincheaptha sin a cheangal le mo ghrádán SVG gan luachanna datha a dhúbailt, chuir mé stíleanna inlíne in ionad luachanna datha stopchód códaithe:
Ansin, b'éigean dom a chinntiú go mbíonn codarsnacht idir mo Théacs Toon i gcónaí agus cibé bundath a roghnaíonn mé. Cruthaíonn rothlú lí 180 céim dath comhlántach a thagann chun solais go cinnte - ach is féidir a chreathadh go míchompordach:
.téacs-solas {
líonadh: oklch (ó var (--foundation)
l c calc(h + 180));
} Cruthaíonn aistriú 90° dath tánaisteach beoga gan a bheith comhlántach go hiomlán:
.téacs-solas {
líonadh: oklch (ó var (--foundation)
l c calc(h - 90));
} Úsáideann mo chaitheamh aimsire de Quick Draw McGraw’s 1959 Toon Title “El Kabong” na teicníochtaí céanna ach le pailéad níos éagsúla. Mar shampla, tá grádán gathacha eile idir dath an bhunsraithe agus scáth níos dorcha. Is dathanna difriúla iad an foirgneamh agus an crann sa chúlra ar an mbundath céanna. Maidir leis na cosáin sin, bhí dhá dhath líonta breise ag teastáil uaim:
.bg-lár {
líonadh: oklch (ó var (--foundation)
calc(l - 0.04) calc(c * 0.91) h);
} .bg-dorcha {
líonadh: oklch (ó var (--foundation)
calc(l - 0.12) calc(c * 0.64) h);
} Nuair a Thosnaíonn na Bunsraitheanna ag Bogadh
Go dtí seo, tá gach rud a léirigh mé statach. Fiú nuair a úsáideann duine roghnóir dathanna chun an bundath a athrú, tarlaíonn an t-athrú sin láithreach. Ach is annamh a sheasann grafaic bheoite gan staonadh - tá an leid san ainm. Mar sin, má tá dath mar chuid den chóras, níl aon chúis ann nach féidir é a bheochan freisin.
Chun an bundath a bheochan, ní mór dom ar dtús é a roinnt ina bhealaí OKLCH— gile, croma, agus lí. Ach tá céim bhreise thábhachtach ann: ní mór dom na luachanna sin a chlárú mar airíonna saincheaptha clóscríofa. Ach cad a chiallaíonn sé sin?
De réir réamhshocraithe, ní bhíonn a fhios ag brabhsálaí cé acu an ionann luach maoine saincheaptha CSS agus dath, fad, uimhir nó rud éigin eile go hiomlán. Ciallaíonn sé sin go minic nach féidir iad a idirshuíomh go réidh le linn beochana, agus léim ó luach amháin go luach eile.
Insíonn clárú airí saincheaptha don bhrabhsálaí an cineál luacha a léiríonn sé agus conas ba cheart é a iompar le himeacht ama. Sa chás seo, ba mhaith liom go gcaithfeadh an brabhsálaí mo chainéil datha mar uimhreacha ionas gur féidir iad a bheochan go réidh.
@maoin --f-l {
comhréir: " @maoin --f-c {
comhréir: " @maoin --f-h {
comhréir: " Nuair a bheidh siad cláraithe, iompraíonn na hairíonna saincheaptha seo iad féin cosúil le CSS dúchais. Is féidir leis an mbrabhsálaí iad a idirshuí fráma-ar-fhráma. Déanaim dath an bhunsraithe a atógáil ansin ó na bealaí sin:
--fondúireacht: oklch(var(--f-l) var(--f-c) var(--f-h)); Déanann sé seo dath an dúshraith a bheith beomhar, díreach mar aon luach uimhriúil eile. Seo beochan simplí “análú” a aistríonn éadrom go réidh le himeacht ama:
@keyframes breathe {
0%, 100% { --f-l: 0.36; }
50% { --f-l: 0.46; }
} .toon-teideal {
beochan: breathe 10s éasca-i-amach gan teorainn;
} Toisc go ndíorthaítear gach dath eile i líonadh, grádáin agus strócanna ó --foundation, beochann siad go léir le chéile, agus ní gá aon rud a nuashonrú de láimh.
Dath Beoite amháin, Go leor Éifeacht
Ag tús an phróisis seo, bhí mé ag smaoineamh an bhféadfadh luachanna datha coibhneasta CSS níos mó féidearthachtaí a thairiscint agus iad a dhéanamh níos simplí le cur i bhfeidhm. Chuir mé cúlra mianach óir nua le leathanach teagmhála mo shuíomh Gréasáin le déanaí, agus chuimsigh an chéad atriall lampaí ola a lasann agus a luascann. Theastaigh uaim iniúchadh a dhéanamh ar an gcaoi a bhféadfadh dathanna coibhneasta CSS an taobh istigh den mhianach a dhéanamh níos réadúla trí é a dhathú le dathanna ó na lampaí. Theastaigh uaim go gcuirfeadh siad isteach ar an domhan thart timpeall orthu, mar a dhéanann solas fíor. Mar sin, seachas ildathanna a bheochan, thóg mé córas soilsithe beag bídeach a bheochan ach dath amháin. Ba é an chéad tasc a bhí agam ná ciseal forleagan a shliotán idir an cúlra agus mo lampaí:
< cosán
id="forleagan"
fill="var(--overlay-tint)"
[...]
style="mix-cumasc-mód: dath"
/> Bhain mé úsáid as modh meascáin: dath toisc go n-athraíonn sé sin a bhfuil thíos leis agus an bunsoilse á chaomhnú. Toisc nach dteastaíonn uaim ach go mbeadh an forleagan le feiceáil nuair a chuirtear beochan ar siúl, rinne mé rogha an diúltaithe forleagan:
.svg-mine #forleagan {
taispeáint: none;
} @media (is fearr-laghdaithe-tairiscint: gan rogha) {
.svg-mine[data-animations=ar] #forleagan {
taispeáint: bloc;
teimhneacht: 0.5;
}
} Bhí an forleagan i bhfeidhm, ach ní raibh sé ceangailte leis na lampaí fós. Bhí foinse solais de dhíth orm. Tá mo lampaí simplí, agus tá eilimint ciorcail i ngach ceann acu a doiléir mé le scagaire. Táirgeann an scagaire doiléir an-bhog thar an gciorcal ar fad. In ionad an forleagan agus na lampaí a bheochan ar leithligh, beocht mé comhartha datha “lasair” amháin agus díorthaíonn gach rud eile uaidh sin. Ar dtús, cláraím trí airí saincheaptha clóscríofa do chainéil OKLCH:
@maoin --fl-l {
comhréir: " Rinne mé beocht ar na cainéil sin, ag brú cúpla fráma i dtreo oráiste d’aon ghnó ionas go léann an caochaíl go soiléir mar sholas tine: @keyframes lasair {
0%, 100% { --fl-l: 0.86; --fl-c: 0.12; --fl-h: 95; }
6% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 92; }
12% { --fl-l: 0.83; --fl-c: 0.14; --fl-h: 100; }
18% { --fl-l: 0.88; --fl-c: 0.11; --fl-h: 94; }
24% { --fl-l: 0.82; --fl-c: 0.16; --fl-h: 82; }
30% { --fl-l: 0.90; --fl-c: 0.12; --fl-h: 90; }
36% { --fl-l: 0.79; --fl-c: 0.17; --fl-h: 76; }
44% { --fl-l: 0.87; --fl-c: 0.12; --fl-h: 96; }
52% { --fl-l: 0.81; --fl-c: 0.15; --fl-h: 102; }
60% { --fl-l: 0.89; --fl-c: 0.11; --fl-h: 93; }
68% { --fl-l: 0.83; --fl-c: 0.16; --fl-h: 85; }
76% { --fl-l: 0.91; --fl-c: 0.10; --fl-h: 91; }
84% { --fl-l: 0.85; --fl-c: 0.14; --fl-h: 98; }
92% {--fl-l: 0.80; --fl-c: 0.17; --fl-h: 74; }
} Ansin scóip mé an beochan sin chuig an SVG, ionas go mbeidh na hathróga comhroinnte ar fáil do na lampaí agus do mo fhorleagan: @media (is fearr-laghdaithe-tairiscint: gan rogha) {
.svg-mine[data-animations=ar] {
beochan: lasair 3.6s gan teorainn líneach;
leithlisiú: leithlisiú; /* Tóg dath lasrach ó chainéil bheoite */
--lasair: oklch(var(--fl-l) var(--fl-c) var(--fl-h)); /* Dath lampa díorthaithe ó lasair */
--lamp-core: oklch (ó var(--flame) calc(l + 0.05) calc(c * 0.70) h); /* Tint forleagan díorthaithe ón lasair chéanna */
--overlay-tint: oklch(ó var(--lasair)
calc(l + 0.06) calc(c * 0.65) calc(h - 10));
}
} Ar deireadh, chuir mé na dathanna díorthaithe sin i bhfeidhm ar na lampaí geala agus ar an bhforleagan a mbíonn tionchar acu orthu:
@media (is fearr-laghdaithe-tairiscint: gan rogha) {
.svg-mine[data-animations=ar] #mine-lamp-1 > ciorcal,
.svg-mine[data-animations=ar] #mine-lamp-2 > ciorcal {
líonadh: var (--lampa-core);
} .svg-mine[data-animations=ar] #forleagan {
taispeáint: bloc;
líonadh: var (--overlay-tint);
teimhneacht: 0.5;
}
} Nuair a aistríonn an lasair i dtreo oráiste, téann na lampaí suas, agus téann an radharc leo. Nuair a fhuaraíonn an lasair, socraíonn gach rud le chéile. Is é an chuid is fearr ná nach bhfuil aon rud scríofa de láimh. Má athraím dath an dúshraith nó má thweak mé na raonta beochana lasair, nuashonraíonn an córas soilsithe iomlán ag an am céanna.
Is féidir leat an toradh deiridh a fheiceáil ar mo shuíomh Gréasáin.
Athúsáid, Athúsáid, Athchuairt
Cuireadh iallach ar na beochantóirí Hanna-Barbera eilimintí a athúsáid as riachtanas, ach athúsáidim dathanna mar go ndéanann sé mo chuid oibre níos comhsheasmhaí agus níos éasca le cothabháil. Ligeann luachanna datha coibhneasta CSS dom: Sainmhínigh bundath amháin,
Déan cur síos ar conas a bhaineann dathanna eile leis,
Na caidrimh sin a athúsáid i ngach áit, agus
Beoigh an córas trí luach amháin a athrú. Ní hamháin go ndéanann dath coibhneasta téamaí níos éasca. Spreagann sé bealach smaointeoireachta ina mbíonn dath, cosúil le gluaisne, d’aon ghnó — agus nuair is féidir radharc iomlán a athrú ó athrú ar luach amháin gan an saothar faoina bhun a athscríobh.
