Laipẹ Mo ti sọ awọn aworan ere idaraya tu lori oju opo wẹẹbu mi pẹlu akori tuntun ati ẹgbẹ kan ti awọn kikọ aṣaaju-ọna, ni fifi ọpọlọpọ awọn ilana ti Mo pin ninu jara yii ṣiṣẹ. Diẹ ninu awọn ohun idanilaraya mi yipada irisi nigbati ẹnikan ba ṣe ajọṣepọ pẹlu wọn tabi ni awọn akoko oriṣiriṣi ti ọjọ.
Awọn awọ ti o wa ninu ayaworan atop awọn oju-iwe bulọọgi mi yipada lati owurọ titi di alẹ ni gbogbo ọjọ. Lẹhinna, ipo yinyin wa, eyiti o ṣafikun awọn awọ tutu ati akori igba otutu kan, iteriba ti Layer apọju ati ipo idapọ.
Lakoko ti o n ṣiṣẹ lori eyi, Mo bẹrẹ lati ṣe iyalẹnu boya awọn iye awọ ibatan CSS le fun mi ni iṣakoso diẹ sii lakoko ti o tun jẹ irọrun ilana naa. Akiyesi: Ninu ikẹkọ yii, Emi yoo dojukọ awọn iye awọ ojulumo ati aaye awọ OKLCH fun awọn aworan akori ati awọn ohun idanilaraya. Ti o ba fẹ besomi jinlẹ sinu awọ ibatan, Ahmad Shadeed ṣẹda itọsọna ibaraenisepo to dara julọ. Bi fun awọn aaye awọ, gamuts, ati OKLCH, Geoff Graham tiwa kowe nipa wọn.
Lilo awọn eroja leralera jẹ bọtini. Awọn abẹlẹ ni a tun lo nigbakugba ti o ṣee ṣe, pẹlu awọn sisun ati awọn agbekọja ti n ṣe iranlọwọ lati kọ awọn iwoye tuntun lati iṣẹ ọna kanna. O ti a bi ti tianillati, sugbon o tun iwuri ero ni awọn ofin ti jara kuku ju olukuluku sile. Iṣoro naa Pẹlu Ṣiṣe imudojuiwọn Awọn paleti Awọ Afọwọṣe Jẹ ki a lọ taara si ipenija mi. Ninu Awọn akọle Toon bii eyi - ti o da lori iṣẹlẹ 1959 Yogi Bear Show “Lullabye-Bye Bear” - ati iṣẹ mi ni gbogbogbo, awọn paleti ni opin si awọn awọ diẹ ti o yan.
Mo ṣẹda awọn ojiji ati awọn tints lati ohun ti Mo pe ni awọ “ipilẹ” mi lati faagun paleti laisi fifi awọn awọ diẹ sii.
Ni Sketch, Mo ṣiṣẹ ni aaye awọ HSL, nitorina ilana yii pẹlu jijẹ tabi idinku iye ina ti awọ ipilẹ mi. Nitootọ, kii ṣe iṣẹ-ṣiṣe ti o nira - ṣugbọn yiyan awọ ipilẹ ti o yatọ nilo ṣiṣẹda gbogbo eto tuntun ti awọn ojiji ati awọn tints. Ṣiṣe iyẹn pẹlu ọwọ, lẹẹkansi ati lẹẹkansi, yarayara di alaapọn.
Mo mẹnuba HSL — H (hue), S (saturation), ati L (imọlẹ) - aaye awọ, ṣugbọn iyẹn jẹ ọkan ninu awọn ọna pupọ lati ṣe apejuwe awọ. RGB - R (pupa), G (alawọ ewe), B (bulu) - jẹ eyiti o mọ julọ, o kere ju ni fọọmu Hex rẹ. LAB tun wa - L (imọlẹ), A (alawọ ewe-pupa), B (bulu-ofeefee) - ati tuntun, ṣugbọn ni bayi ni atilẹyin LCH — L (imọlẹ), C (chroma), H (hue) - awoṣe ni fọọmu OKLCH rẹ. Pẹlu LCH - pataki OKLCH ni CSS - Mo le ṣatunṣe iye ina ti awọ ipilẹ mi.
Tabi Mo le paarọ chroma rẹ. LCH chroma ati saturation HSL mejeeji ṣe apejuwe kikankikan tabi ọrọ ti awọ kan, ṣugbọn wọn ṣe bẹ ni awọn ọna oriṣiriṣi. LCH fun mi ni ibiti o gbooro ati idapọmọra asọtẹlẹ diẹ sii laarin awọn awọ.
Mo tun le paarọ hue lati ṣẹda paleti ti awọn awọ ti o pin ina kanna ati awọn iye chroma. Ninu mejeeji HSL ati LCH, irisi hue bẹrẹ ni pupa, gbe nipasẹ alawọ ewe ati buluu, ati pada si pupa.
Kini idi ti OKLCH Yi pada Bawo ni MO ṣe Ronu Nipa Awọ Atilẹyin aṣawakiri fun aaye awọ OKLCH ti wa ni ibigbogbo, paapaa ti awọn irinṣẹ apẹrẹ - pẹlu Sketch — ko tii mu. O da, iyẹn ko yẹ ki o da ọ duro lati lo OKLCH. Awọn aṣawakiri yoo fi ayọ ṣe iyipada Hex, HSL, LAB, ati awọn iye RGB sinu OKLCH fun ọ. O le ṣalaye ohun-ini aṣa CSS kan pẹlu awọ ipilẹ ni aaye eyikeyi, pẹlu Hex: /* Awọ ipilẹ * / --ipilẹ: # 5acd6;
Eyikeyi awọn awọ ti o gba lati inu rẹ yoo yipada si OKLCH laifọwọyi: --ipilẹ-imọlẹ: oklch (lati var (--ipilẹ) [...]; } --ipilẹ-aarin: oklch (lati var (--ipile) [...]; } --ipilẹ-dudu: oklch (lati var (--ipile) [...]; }
Ojulumo Awọ Bi A Design System Ronu ti awọ ibatan bi sisọ: “Mu awọ yii, tweak, lẹhinna fun mi ni abajade.” Awọn ọna meji lo wa lati ṣatunṣe awọ: awọn iyipada pipe ati awọn iyipada iwọn. Wọn jọra ni koodu, ṣugbọn huwa ni iyatọ pupọ ni kete ti o bẹrẹ yiyipada awọn awọ ipilẹ. Loye iyatọ yẹn jẹ ohun ti o le yipada ni lilo awọ ibatan sinu eto kan. /* Awọ ipilẹ * / --ipilẹ: # 5acd6;
Fun apẹẹrẹ, iye ina ti awọ ipilẹ mi jẹ 0.7837, lakoko ti ẹya dudu ni iye ti 0.5837. Lati ṣe iṣiro iyatọ naa, Mo yọkuro iye kekere lati eyi ti o ga julọ ati lo abajade ni lilo iṣẹ calc (): --ipile-dudu: oklch (lati var (--ipile) calc (l - 0.20) c h;
Lati ṣaṣeyọri awọ fẹẹrẹ, Mo ṣafikun iyatọ dipo: --ipilẹ-imọlẹ: oklch (lati var (--ipile) calc (l + 0.10) c h;
ChromaAwọn atunṣe tẹle ilana kanna. Lati dinku kikankikan ti awọ ipilẹ mi lati 0.1035 si 0.0035, Mo yọkuro iye kan lati ekeji: oklch (lati var (--ipile) l calc (c - 0.10) h;
Lati ṣẹda paleti ti awọn hues, Mo ṣe iṣiro iyatọ laarin iye hue ti awọ ipilẹ mi (200) ati hue tuntun mi (260): oklch (lati var (--ipile) l c calc (h + 60));
Awọn iṣiro yẹn jẹ pipe. Nigbati mo ba yọkuro iye ti o wa titi, Mo n sọ ni imunadoko, “Yọ yọkuro pupọ nigbagbogbo.” Kanna kan nigba fifi awọn iye ti o wa titi kun: kalc (c - 0.10) kalc (c + 0.10)
Mo kọ awọn opin ti ọna yii ni ọna lile. Nigbati mo gbarale iyokuro awọn iye chroma ti o wa titi, awọn awọ ṣubu si grẹy ni kete ti Mo yi ipilẹ pada. Paleti ti o ṣiṣẹ fun awọ kan ṣubu yato si fun miiran. Isodipupo huwa otooto. Nigbati mo ba sọ chroma di pupọ, Mo n sọ fun ẹrọ aṣawakiri naa: “Din kikankikan awọ yii ku nipasẹ ipin.” Ibasepo laarin awọn awọ wa titi, paapaa nigbati ipilẹ ba yipada: kalc (c * 0.10)
Mi Gbe O, Iwọn Rẹ, Yiyi Ofin Ofin
Gbe ina (fikun tabi yọkuro), Kroma ti iwọn (pupo), Yi hue (fikun tabi yọkuro awọn iwọn).
Mo ṣe iwọn chroma nitori Mo fẹ awọn iyipada kikankikan lati duro ni ibamu si awọ ipilẹ. Awọn ibatan Hue jẹ iyipo, nitorinaa isodipupo hue ko ni oye. Imọlẹ jẹ oye ati pipe - isodipupo nigbagbogbo n ṣe awọn abajade aitọ.
Lati Awọ Kan Si Akori Gbogbo Awọ ibatan gba mi laaye lati ṣalaye awọ ipilẹ kan ati ṣe ina gbogbo awọ miiran ti Mo nilo - awọn kikun, awọn ikọlu, awọn iduro gradient, awọn ojiji - lati ọdọ rẹ. Ni aaye yẹn, awọ duro jijẹ paleti ati bẹrẹ jijẹ eto. Awọn apejuwe SVG ṣọ lati tun lo awọn awọ diẹ kanna kọja awọn kikun, awọn ikọlu, ati awọn gradients. Awọ ojulumo jẹ ki o ṣalaye awọn ibatan wọnyẹn ni ẹẹkan ki o tun lo wọn nibi gbogbo - pupọ bi awọn oṣere ti tun lo awọn ipilẹṣẹ lati ṣẹda awọn iwoye tuntun.
Yi awọ ipile pada ni ẹẹkan, ati gbogbo awọn imudojuiwọn awọ ti a mu ni aifọwọyi, laisi iṣiro ohunkohun pẹlu ọwọ. Ni ita awọn aworan ere idaraya, Mo le lo ọna kanna lati ṣalaye awọn awọ fun awọn ipinlẹ ti awọn eroja ibaraenisepo gẹgẹbi awọn bọtini ati awọn ọna asopọ. Awọ ipilẹ ti Mo lo ninu Akọle Toon “Lullabye-Bye Bear” mi jẹ buluu ti o n wo cyan. Isalẹ jẹ gradient radial laarin ipilẹ mi ati ẹya dudu.
Lati ṣẹda awọn ẹya omiiran pẹlu awọn iṣesi ti o yatọ patapata, Mo nilo nikan lati yi awọ ipilẹ pada: --ipilẹ: # 5acd6; --grad-opin: var (--ipile); --grad-ibẹrẹ: oklch (lati var (--ipile) calc (l - 0.2357) calc (c * 0.833) h);
Lati di awọn ohun-ini aṣa wọnyẹn mọ gradient SVG mi laisi pidánpidán awọn iye awọ, Mo rọpo awọn iye iduro awọ-lile pẹlu awọn aza inline:
Nigbamii, Mo nilo lati rii daju pe Ọrọ Toon mi nigbagbogbo ṣe iyatọ pẹlu eyikeyi awọ ipilẹ ti Mo yan. Yiyi hue 180deg ṣe agbejade awọ ibaramu kan ti o yọ jade dajudaju - ṣugbọn o le gbọn ni aibalẹ: .ọrọ-imọlẹ { kun: oklch (lati var (--ipile) l c calc (h + 180)); }
Iyipada 90° ṣe agbejade awọ keji ti o han kedere laisi ibaramu ni kikun: .ọrọ-imọlẹ { kun: oklch (lati var (--ipile) l c calc (h - 90)); }
Ere idaraya mi ti Akọle Toon Quick Draw McGraw's 1959 "El Kabong" nlo awọn ilana kanna ṣugbọn pẹlu paleti ti o yatọ diẹ sii. Fun apẹẹrẹ, gradient radial miiran wa laarin awọ ipilẹ ati iboji dudu.
Ile ati igi ti o wa ni abẹlẹ jẹ awọn ojiji oriṣiriṣi oriṣiriṣi ti awọ ipilẹ kanna. Fun awọn ọna yẹn, Mo nilo awọn awọ kikun meji: .bg-aarin { kun: oklch (lati var (--ipile) calc (l - 0.04) calc (c * 0.91) h); }
.bg-dudu { kun: oklch (lati var (--ipile) calc (l - 0.12) calc (c * 0.64) h); }
Nigbati Awọn ipilẹ bẹrẹ Lati Gbe
Titi di isisiyi, ohun gbogbo ti Mo ti fihan ti jẹ aimi. Paapaa nigbati ẹnikan ba lo oluyan awọ lati yi awọ ipilẹ pada, iyipada yẹn yoo ṣẹlẹ lẹsẹkẹsẹ. Ṣugbọn awọn aworan ere idaraya ṣọwọn duro jẹ - olobo wa ni orukọ. Nitorina, ti awọ ba jẹ apakan ti eto, ko si idi ti ko le ṣe igbesi aye, paapaa.
Lati ṣe ere awọ ipilẹ, Mo nilo akọkọ lati pin si awọn ikanni OKLCH rẹ- imole, chroma, ati hue. Ṣugbọn igbesẹ afikun pataki kan wa: Mo nilo lati forukọsilẹ awọn iye wọnyẹn bi awọn ohun-ini aṣa ti tẹ. Ṣugbọn kini iyẹn tumọ si?
Nipa aiyipada, ẹrọ aṣawakiri kan ko mọ boya iye ohun-ini aṣa aṣa CSS duro fun awọ, ipari, nọmba, tabi nkan miiran patapata. Iyẹn nigbagbogbo tumọ si pe wọn ko le ṣe interpolated laisiyonu lakoko ere idaraya, ati fo lati iye kan si ekeji.
Fiforukọṣilẹ ohun-ini aṣa sọ fun aṣawakiri iru iye ti o duro ati bii o ṣe yẹ ki o huwa lori akoko. Ni idi eyi, Mo fẹ ki ẹrọ aṣawakiri naa tọju awọn ikanni awọ mi bi awọn nọmba ki wọn le ṣe ere idaraya laisiyonu.
@property --f-l {
sintasi: "
@property --f-c {
sintasi: "
@ohun ini --f-h {
sintasi: "
Ni kete ti o forukọsilẹ, awọn ohun-ini aṣa wọnyi huwa bi CSS abinibi. Awọn kiri le interpolate wọn fireemu-nipasẹ-fireemu. Mo lẹhinna tun ṣe awọ ipilẹ lati awọn ikanni yẹn: --ipilẹ: oklch (var (-f-l) var (--f-c) var (--f-h));
Eyi jẹ ki awọ ipilẹ di iwara, gẹgẹ bi iye nomba eyikeyi miiran. Eyi ni ere idaraya “mimi” ti o rọrun ti o rọra yi imole lori akoko: @keyframes simi { 0%, 100% {-f-l: 0.36; } 50% {-f-l: 0.46; } }
.toon-akọle { iwara: simi 10s irorun-ni-jade ailopin; }
Nitoripe gbogbo awọ miiran ti o kun, awọn gradients, ati awọn ikọlu jẹ yo lati --ipilẹ, gbogbo wọn ṣe ere papọ, ko si si ohun ti o nilo lati ni imudojuiwọn pẹlu ọwọ. Awọ Idaraya Kan, Awọn ipa pupọ Ni ibẹrẹ ilana yii, Mo ṣe iyalẹnu boya awọn iye awọ ibatan CSS le funni ni awọn aye diẹ sii lakoko ti o tun jẹ ki wọn rọrun lati ṣe. Laipẹ Mo ṣafikun ipilẹ goolu mi tuntun kan si oju-iwe olubasọrọ oju opo wẹẹbu mi, ati aṣetunṣe akọkọ pẹlu awọn atupa epo ti o tan ati golifu.
Mo fẹ lati ṣawari bawo ni awọn awọ ibatan CSS ti ere idaraya ṣe le jẹ ki inu inu mi jẹ ojulowo diẹ sii nipa tinting pẹlu awọn awọ lati awọn atupa. Mo fẹ́ kí wọ́n nípa lórí ayé tó yí wọn ká, bí ìmọ́lẹ̀ tòótọ́ ṣe ń ṣe. Nitorinaa, dipo kiko awọn awọ lọpọlọpọ, Mo kọ eto ina kekere kan ti o mu awọ kan mu.
Iṣẹ́ àkọ́kọ́ mi ni láti sọ ìpele alábòójútó kan sáàárín abẹ́lẹ̀ àti àwọn atupa mi: <ọna id = "apoju" kún = "var (--overlay-tint)" [...] style="mix-parapo-mode: awọ" />
Mo ti lo ipo idapọ-ipo: awọ nitori pe awọn tints ohun ti o wa labẹ rẹ lakoko ti o tọju itanna ti o wa labẹ. Bi Mo ṣe fẹ ki agbekọja nikan han nigbati awọn ohun idanilaraya wa ni titan, Mo ṣe ijade agbekọja: .svg-mine #overlay { àpapọ: kò; }
@media (o fẹ-reduced-motion: no-preference) { .svg-mine[data-animations=lori] #overlay { àpapọ: Àkọsílẹ; òfo: 0.5; } }
Ikọja wa ni aaye, ṣugbọn ko ti sopọ si awọn atupa naa. Mo nilo orisun ina. Awọn atupa mi rọrun, ati pe ọkọọkan ni eroja iyika kan ti Mo ti bajẹ pẹlu àlẹmọ kan. Àlẹmọ ṣe agbejade blur rirọ pupọ lori gbogbo Circle.
Dipo ti iwara awọn agbekọja ati awọn atupa lọtọ, Mo ṣe ere ami ami awọ “ina” kan ṣoṣo ati gba ohun gbogbo miiran lati iyẹn. Ni akọkọ, Mo forukọsilẹ awọn ohun-ini aṣa ti tẹ mẹta fun awọn ikanni OKLCH:
@property --fl-l {
sintasi: "
Mo ṣe ere awọn ikanni wọnyẹn, ni imọọmọ titari awọn fireemu diẹ si ọna osan nitorinaa flicker ka ni kedere bi ina ina:
@keyframes ina { 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; } }
Lẹhinna Mo dopin iwara yẹn si SVG, nitorinaa awọn oniyipada pinpin wa si awọn atupa ati agbekọja mi:
@media (o fẹ-reduced-motion: no-preference) { .svg-mine[data-animations=lori] { iwara: ina 3.6s ailopin laini; ipinya: sọtọ;
/ * Kọ awọ ina lati awọn ikanni ere idaraya */ --iná: oklch (var (-fl-l) var (--fl-c) var (--fl-h));
/* Awọ atupa yo lati ọwọ ina */ --fitila-mojuto: oklch (lati var (--iná) calc (l + 0.05) calc (c * 0.70) h);
/* Tinti agbekọja ti o wa lati ina kanna */ --overlay-tint: oklch (lati var (--iná) calc (l + 0.06) calc (c * 0.65) calc (h - 10)); } }
Nikẹhin, Mo lo awọn awọ ti o yọ si awọn atupa didan ati apọju ti wọn kan: @media (o fẹ-reduced-motion: no-preference) { .svg-mine[data-animations=lori] #mine-lamp-1> Circle, .svg-mine[data-animations=lori] #mine-lamp-2 > Circle { kun: var (--fitila-mojuto); }
.svg-mine[data-animations=lori] #overlay { àpapọ: Àkọsílẹ; kun: var (--overlay-tint); òfo: 0.5; } }
Nigbati ina ba yipada si ọna osan, awọn atupa naa gbona, ati aaye naa gbona pẹlu wọn. Nigbati ina ba tutu, ohun gbogbo yoo wa papọ. Apakan ti o dara julọ ni pe ko si nkan ti a kọ pẹlu ọwọ. Ti MO ba yi awọ ipilẹ pada tabi tweak awọn sakani ere idaraya ina, gbogbo eto ina ṣe imudojuiwọn ni nigbakannaa. O le wo abajade ikẹhin lori oju opo wẹẹbu mi. Atunlo, Tunda, Atunwo Awọn oṣere Hanna-Barbera wọnyẹn ni a fi agbara mu lati tun awọn eroja pada nitori iwulo, ṣugbọn Mo tun lo awọn awọ nitori pe o jẹ ki iṣẹ mi ni ibamu ati rọrun lati ṣetọju. Awọn iye awọ ojulumo CSS gba mi laaye lati:
Ṣe alaye awọ ipilẹ kan, Ṣe apejuwe bi awọn awọ miiran ṣe jọmọ rẹ, Tun lo awon ibasepo nibi gbogbo, ati Animate awọn eto nipa yiyipada ọkan iye.
Awọ ibatan ko kan jẹ ki akori rọrun. O ṣe iwuri fun ọna ti ironu nibiti awọ, bii iṣipopada, jẹ aniyan - ati nibiti iyipada iye kan le yi gbogbo iṣẹlẹ pada laisi atunkọ iṣẹ ti o wa labẹ rẹ.
