Nnansa yi ara na mede asɛmti foforo ne akwampaefo nnipa kuw bi ayɛ mfonini ahorow a wɔde mfonini a ɛyɛ anigye ayɛ no foforo, na mede akwan pii a mekaa ho wɔ saa nsɛm a ɛtoatoa so yi mu no adi dwuma. Me animations kakraa bi sesa sɛnea ɛte bere a obi ne wɔn di nkitaho anaasɛ wɔ da no mu mmere ahorow mu no.
Kɔla ahorow a ɛwɔ mfonini a ɛwɔ me blog nkratafa atifi no sesa fi anɔpa kosi anadwo da biara. Afei, sukyerɛmma mode nso wɔ hɔ, a ɛde kɔla a ɛyɛ nwini ne awɔw bere mu asɛmti ka ho, a wɔde overlay layer ne blending mode ma.
Bere a mereyɛ eyi ho adwuma no, mifii ase susuw ho sɛ ebia CSS relative color values betumi ama manya tumi kɛse bere a ɛsan nso ma adeyɛ no yɛ mmerɛw. Hyɛ no nsow: Wɔ saa nkyerɛkyerɛ yi mu no, m’adwene besi kɔla botae ahorow a ɛfa ho ne OKLCH kɔla atenae a wɔde bɛyɛ asɛmti mfonini ne mfonini ahorow so. Sɛ wopɛ sɛ wode wo ho hyɛ kɔla a ɛfa ho mu kɔ akyiri a, Ahmad Shadeed yɛɛ akwankyerɛ a ɛyɛ nwonwa a ɛma wotumi ne afoforo di nkitaho. Ɛdefa kɔla ahorow, gamuts, ne OKLCH ho no, yɛn ankasa Geoff Graham kyerɛw ho asɛm.
Ná element ahorow a wɔde di dwuma mpɛn pii no yɛ ade titiriw. Wɔsan de akyi mfonini ahorow dii dwuma bere biara a ɛbɛyɛ yiye, na na nneɛma a wɔde yɛ nneɛma akɛse ne nea wɔde kata so boa ma wɔyɛɛ mfonini foforo a efi adwinni koro no ara mu. Wɔwoo no wɔ hia a ɛho hia mu, nanso ɛhyɛɛ nsusuwii a ɛfa nneɛma a ɛtoatoa so ho nso ho nkuran sen sɛ wɔbɛfa ankorankoro mfonini ahorow. Ɔhaw a Ɛwɔ Manually Updating Color Palettes ho Momma yɛnkɔ m’asɛnnennen no so tẽẽ. Wɔ Toon Titles te sɛ eyi mu — a egyina 1959 Yogi Bear Show episode “Lullabye-Bye Bear” — ne m’adwuma wɔ ɔkwan a ɛkɔ akyiri so no, palettes yɛ kɔla kakraa bi a wɔapaw nkutoo.
Meyɛ shades ne tints fi nea mefrɛ no me “fapem” kɔla mu de trɛw palette no mu a memfa hues pii nka ho.
Wɔ Sketch mu no, meyɛ adwuma wɔ HSL kɔla ahunmu, enti saa adeyɛ yi hwehwɛ sɛ mɛma me fapem kɔla no bo a ɛyɛ hare no akɔ soro anaasɛ ɛbɛtew so. Nokwarem no, ɛnyɛ adwuma a ɛyɛ den — nanso sɛ wobɛpaw fapem kɔla soronko a, ɛhwehwɛ sɛ wobɔ shades ne tints foforo koraa. Sɛ wode nsa yɛ saa, mpɛn pii no, ɛbɛyɛ adwumaden ntɛmntɛm.
Mekaa HSL — H (hue), S (saturation), ne L (lightness) — kɔla ahunmu, nanso ɛno yɛ akwan pii a wɔfa so kyerɛkyerɛ kɔla mu no mu biako pɛ. RGB — R (kɔkɔɔ), G (ahabammono), B (blue) — yɛ ebia nea wonim no yiye, anyɛ yiye koraa no wɔ ne Hex kwan so. There’s also LAB — L (hann), A (ahabammono–kɔkɔɔ), B (blue–kɔla) — ne foforo, nanso mprempren wɔtaa akyi kɛse LCH — L (hare), C (chroma), H (hue) — nhwɛsode wɔ ne OKLCH kwan so. LCH — titiriw OKLCH wɔ CSS — metumi asiesie me fapem kɔla no bo a ɛyɛ hare.
Anaasɛ metumi asesa ne chroma. LCH chroma ne HSL saturation nyinaa kyerɛkyerɛ sɛnea kɔla bi mu yɛ den anaasɛ ɛdɔɔso, nanso ɛsono sɛnea wɔyɛ saa. LCH ma me kɔla ahorow ntam afrafra a ɛtrɛw na wotumi hyɛ ho nkɔm.
Metumi nso asesa hue no de ayɛ palette a ɛwɔ kɔla ahorow a ɛwɔ lightness ne chroma values koro. Wɔ HSL ne LCH nyinaa mu no, hue spectrum no fi ase wɔ kɔkɔɔ so, fa ahabammono ne bruu mu, na ɛsan kɔ kɔkɔɔ mu.
Nea Enti a OKLCH Sesaa Sɛnea Misusuw Kɔla Ho Browser mmoa a wɔde ma OKLCH kɔla atenae no atrɛw mprempren, sɛ mpo adwini nnwinnade — a Sketch ka ho — ntumi nnyee a. Nea eye ne sɛ, ɛnsɛ sɛ ɛno siw wo kwan sɛ wode OKLCH bedi dwuma. Browser ahorow de anigye bɛdan Hex, HSL, LAB, ne RGB botae ahorow no akɔ OKLCH mu ama wo. Wubetumi akyerɛkyerɛ CSS amanne kwan so agyapade a fapem kɔla wɔ ahunmu biara mu, a Hex ka ho: /* Fapem kɔla */ --fapem: #5accd6;
Kɔla biara a wobenya afi mu no, wɔbɛdan akɔ OKLCH mu ara kwa: --fapem-hann: oklch (efi var (--fapem) [...]; } --fapem-mfinimfini: oklch (efi var (--fapem) [...]; } --fapem-sum: oklch (efi var (--fapem) [...]; }
Kɔla a Ɛfa Ho Sɛ Nsusuwii Nhyehyɛe Susuw kɔla a ɛfa ho ho sɛ ɛka sɛ: “Fa kɔla yi, tweak no, afei ma me nea efi mu ba no.” Akwan abien na ɛwɔ hɔ a wɔfa so siesie kɔla bi: nsakrae a edi mũ ne nsakrae a ɛne ne ho hyia. Wɔn ho yɛ pɛ wɔ koodu mu, nanso ɛsono wɔn nneyɛe koraa bere a woafi ase sesa fapem kɔla ahorow no. Saa nsonsonoe no ntease ne nea ebetumi adan kɔla a ɛfa ho a wɔde di dwuma no adan nhyehyɛe. /* Fapem kɔla */ --fapem: #5accd6;
Sɛ nhwɛso no, me fapem kɔla no hann bo yɛ 0.7837, bere a nea ɛyɛ tuntum no bo yɛ 0.5837. Sɛ mɛbu nsonsonoeɛ no a, meyi boɔ a ɛba fam no firi deɛ ɛkorɔn no mu na mede nea ɛfiri mu ba no di dwuma denam calc() dwumadie so: --fapem-sum: . oklch(efi var(--fapem) calc (l - 0.20) c h);
Sɛnea ɛbɛyɛ a menya kɔla a ɛyɛ hare no, mede nsonsonoe no ka ho mmom: --fapem-hann: . oklch(efi var(--fapem) calc (l + 0.10) c h);
Chroma a wɔfrɛ no Chromansakrae ahorow di adeyɛ koro no ara akyi. Sɛnea ɛbɛyɛ a mɛtew me fapem kɔla no mu den so afi 0.1035 akodu 0.0035 no, miyi bo biako fi foforo no so: oklch(efi var(--fapem) l calc (c - 0.10) h);
Sɛnea ɛbɛyɛ a mɛyɛ palette of hues no, mibu nsonsonoe a ɛda hue bo a ɛwɔ me fapem kɔla (200) ne me hue foforo (260) ntam: oklch(efi var(--fapem) l c calc (h + 60));
Saa akontaabu ahorow no yɛ nea edi mũ. Sɛ miyi sika pɔtee bi fi mu a, na mereka wɔ ɔkwan a etu mpɔn so sɛ, “Yi saa dodow yi fi mu bere nyinaa.” Saa ara na ɛte bere a wode gyinapɛn ahorow a wɔahyɛ da ahyɛ mu ka ho no: calc (c - 0.10) na ɛyɛ adwuma. calc (c + 0.10) na ɛwɔ hɔ.
Misuaa anohyeto ahorow a ɛwɔ saa kwan yi so wɔ ɔkwan a ɛyɛ den so. Bere a mede me ho too chroma gyinapɛn ahorow a wɔahyɛ da ayɛ a mɛyi afi mu so no, kɔla ahorow no bubui kɔɔ fitaa bere a mesesaa fapem no ara pɛ. Palette bi a na ɛyɛ adwuma ma kɔla biako no bubui maa foforo. Ɛsono sɛnea dodow a wɔdɔɔso yɛ wɔn ade. Sɛ mebɔ chroma dɔɔso a, na mereka akyerɛ browser no sɛ: “Tew kɔla yi ahoɔden so kakra.” Abusuabɔ a ɛda kɔla ahorow ntam no da so ara yɛ nea ɛte saa, bere mpo a fapem no sesa no: calc (c * 0.10) na ɛwɔ hɔ.
Me Tu No, Scale No, Rotate No Mmara
Move lightness (fa ka ho anaa yi fi mu), . Scale chroma (a ɛdɔɔso), . Di akɔneaba hue (fa digrii ka ho anaa yi fi mu).
Me scale chroma ɛfiri sɛ mepɛ sɛ intensity nsakraeɛ kɔ so ne base colour no hyia. Hue abusuabɔ yɛ nea ɛkyinkyini, enti ntease biara nni mu sɛ wobɛma hue adɔɔso. Hare yɛ nkate ne nea ɛyɛ pɛpɛɛpɛ — sɛ wɔdɔɔso a, ɛtaa de nea ɛyɛ nwonwa ba.
Efi Kɔla Baako So Kosi Asɛmti Biara So Relative kɔla ma me kwan ma mekyerɛkyerɛ fapem kɔla bi mu na mebɔ kɔla foforo biara a mihia — fills, strokes, gradient stops, shadows — fi mu. Saa bere no, kɔla gyae sɛ ɛbɛyɛ palette na efi ase yɛ nhyehyɛe. SVG mfonini ahorow taa san de kɔla kakraa bi koro no ara di dwuma wɔ fills, strokes, ne gradients so. Relative color ma wo kyerɛkyerɛ saa abusuabɔ ahorow no mu pɛnkoro na wosan de di dwuma wɔ baabiara — te sɛ nea animators san de akyi mfonini ahorow dii dwuma de yɛɛ scenes foforo.
Sesa fapem kɔla no pɛnkoro, na kɔla biara a wonya fi mu no yɛ foforo ankasa, a womfa nsa nsan mmu biribiara bio. Wɔ mfonini a ɛyɛ anigye akyi no, na metumi de saa kwan koro yi ara adi dwuma de akyerɛkyerɛ kɔla ahorow mu ama nkitahodi nneɛma te sɛ bɔton ne nkitahodi tebea horow. Fapem kɔla a mede dii dwuma wɔ me “Lullabye-Bye Bear” Toon Title mu no yɛ bruu a ɛte sɛ cyan. Akyi no yɛ radial gradient a ɛda me fapem ne nea ɛyɛ sum ntam.
Sɛ mɛyɛ nkyerɛase foforo a ɛsono adwene koraa a, nea ehia ara ne sɛ mɛsesa fapem no kɔla: --fapem: #5accd6; --grad-awiei: var (--fapem); --grad-fiase: oklch (efi var (--fapem) . calc (l - 0.2357) calc (c * 0.833) h);
Sɛnea ɛbɛyɛ a mɛkyekyere saa amanne kwan so agyapade no akɔ me SVG gradient no so a merenyɛ kɔla botae ahorow no abien no, mede inline styles sesaa hard-coded stop-color values:
Afei, na ɛsɛ sɛ mehwɛ hu sɛ me Toon Text no ne fapem kɔla biara a mɛpaw no bɔ abira bere nyinaa. A 180deg hue rotation ma complementary kɔla a akyinnye biara nni ho sɛ pops — nanso ebetumi wosow a ɛnyɛ dɛ: .nkyerɛwee-hann { . hyɛ: oklch(efi var(--fapem) . l c calc (h + 180)); } .
90° nsakrae ma kɔla a ɛto so abien a emu da hɔ a ɛnyɛ nea ɛka bom koraa: .nkyerɛwee-hann { . hyɛ: oklch(efi var(--fapem) . l c calc (h - 90)); } .
M’anigyede a ɛfa Quick Draw McGraw’s 1959 Toon Title “El Kabong“ ho no de akwan koro no ara di dwuma nanso ɛwɔ palette a egu ahorow kɛse. Sɛ nhwɛso no, radial gradient foforo bi wɔ fapem kɔla ne sunsuma a ɛyɛ tuntum ntam.
Ɔdan ne dua a ɛwɔ akyi no yɛ fapem kɔla koro no ara a ɛsono emu biara kɛkɛ. Wɔ saa akwan no ho no, na mihia kɔla abien foforo a wɔde hyɛ mu ma: .bg-mfinimfini { . hyɛ: oklch(efi var(--fapem) . calc (l - 0.04) calc (c * 0.91) h); } .
.bg-sum { . hyɛ: oklch(efi var(--fapem) . calc (l - 0.12) calc (c * 0.64) h); } .
Bere a Fapem No Fi Ase Tu
Ɛde besi ha no, biribiara a makyerɛ no ayɛ nea ɛyɛ static. Sɛ obi de kɔla paw di dwuma de sesa fapem kɔla mpo a, saa nsakrae no ba amonom hɔ ara. Nanso animated graphics ntaa nnyina hɔ — clue no wɔ din no mu. Enti, sɛ kɔla yɛ nhyehyɛe no fã a, biribiara nni hɔ a enti entumi nyɛ nkwa, nso.
Sɛ mɛma fapem kɔla no ayɛ nkwa a, ɛsɛ sɛ midi kan kyekyɛ mu yɛ no ne OKLCH akwan no— a ɛyɛ hare, chroma, ne hue. Nanso there’s an important extra step: Ɛsɛ sɛ mekyerɛw saa values no sɛ typed custom properties. Nanso dɛn na ɛno kyerɛ?
Sɛnea wɔahyɛ no, browser nnim sɛ ebia CSS amanne kwan so agyapade bo gyina hɔ ma kɔla, tenten, nɔma, anaa biribi foforo koraa. Ɛno taa kyerɛ sɛ wontumi mfa wɔn ho nhyɛ mu yiye wɔ animation bere mu, na wohuruw mfi botae biako so kɔ foforo so.
Sɛ wokyerɛw custom property bi din a, ɛkyerɛ browser no bo ko a egyina hɔ ma ne sɛnea ɛsɛ sɛ ɛyɛ n’ade bere tenten. Wɔ saa tebea yi mu no, mepɛ sɛ browser no di me kɔla akwan no sɛ nɔma sɛnea ɛbɛyɛ a wobetumi ayɛ wɔn anigyede yiye.
@agyapadeɛ --f-l { .
syntax: "
@agyapadeɛ --f-c { .
syntax: "
@agyapadeɛ --f-h { .
syntax: "
Sɛ wɔkyerɛw wo din wie a, saa amanne kwan so agyapade yi yɛ wɔn ade te sɛ CSS ankasa. Browser no betumi de wɔn ahyɛ mu wɔ frame biara mu. Afei mesan kyekye fapem kɔla no fi saa akwan no so: --fapem: oklch (var (--f-l) var (--f-c) var (--f-h));
Eyi ma fapem kɔla no yɛ nea wotumi de yɛ nkwa, te sɛ akontaabu bo foforo biara. Here’s a simple “breathing” animation a ɛsakra hare brɛoo bere a bere kɔ so no: @keyframes home { . 0%, 100% { --f-l: 0.36; } . 50% { --f-l: 0.46 na ɛwɔ hɔ; } . } .
.toon-asɛmti { . animation: home 10s mmerɛw-wɔ-fi nea enni ano; } .
Esiane sɛ kɔla foforo biara a ɛwɔ fills, gradients, ne strokes mu no fi --foundation mu nti, wɔn nyinaa bom yɛ nkwa, na enhia sɛ wɔde nsa yɛ biribiara foforo. Kɔla Baako a Ɛyɛ Anim, Nkɛntɛnso Pii Wɔ saa adeyɛ yi mfiase no, misusuwii sɛ ebia CSS relative color values betumi ama pii a ebetumi aba bere a ɛsan nso ma ɛyɛ mmerɛw sɛ wɔde bedi dwuma. Nnansa yi ara mede sika kɔkɔɔ a wotu no akyi foforo kaa me website’s contact page ho, na nea edi kan a wɔsan yɛe no kaa ngo akanea a ɛhyerɛn na ɛwosow ho.
Na mepɛ sɛ mehwehwɛ sɛnea CSS abusuafo kɔla ahorow a ɛma nkwa betumi ama ɔtopae no mu ayɛ nea ɛyɛ nokware denam kɔla ahorow a efi akanea no mu a wɔde bɛhyɛ mu no mu. Ná mepɛ sɛ wonya wiase a atwa wɔn ho ahyia no so nkɛntɛnso, sɛnea hann ankasa nya no. Enti, sɛ́ anka mɛma kɔla ahorow pii ayɛ nkwa no, meyɛɛ kanea nhyehyɛe ketewaa bi a ɛma kɔla biako pɛ yɛ nkwa.
Adwuma a edi kan a meyɛe ne sɛ mɛhyehyɛ ade a wɔde kata so wɔ akyi ne me akanea no ntam:
Mede mix-blend-mode dii dwuma: kɔla efisɛ ɛno tints what’s beneath bere a ɛkora hann a ɛwɔ ase no so. Sɛnea mepɛ sɛ overlay no da adi bere a wɔadan animations nkutoo no, meyɛɛ overlay no opt-in: .svg-mine #a wɔde kata so { . ɔyɛkyerɛ: obiara nni hɔ; } .
@media (ɔpɛ-wɔatew-kankyee: ɔmpɛ biara) { .svg-mine [data-animations=wɔ] #ɔkata so { . ɔyɛkyerɛ: block; opacity a ɛyɛ mmerɛw: 0.5; } . } .
Ná nea wɔde akata so no wɔ nea ɛwɔ hɔ, nanso na ennya nnyaa akanea no. Ná mihia hann fibea bi. Me akanea no yɛ mmerɛw, na emu biara wɔ kurukuruwa bi a mede afiri a wɔde yiyi nneɛma mu yɛɛ no kurukuruwa. Filter no ma blur a ɛyɛ brɛoo yiye ba kurukuruwa no nyinaa so.
Sɛ́ anka mɛma nkataso ne akanea no ayɛ anigye wɔ ɔkwan soronko so no, mema “ogyaframa” kɔla token biako yɛ anigye na minya biribiara a aka no fi mu. Nea edi kan no, mekyerɛw amanne kwan so agyapade abiɛsa a wɔakyerɛw ama OKLCH akwan:
@agyapadeɛ --fl-l { .
syntax: "
Meyɛɛ saa akwan no mu anigye, na mehyɛɛ da piaa nnua kakraa bi kɔɔ borɔdɔma so sɛnea ɛbɛyɛ a flicker no kenkan pefee sɛ ogya hann:
@keyframes ogyaframa { 0%, 100% { --fl-l: 0.86; --fl-c: 0.12 na ɛwɔ hɔ; --fl-h: 95 na ɛwɔ hɔ; } . 6% { --fl-l: 0.91 na ɛwɔ hɔ; --fl-c: 0.10 na ɛwɔ hɔ; --fl-h: 92 na ɛwɔ hɔ; } . 12% { --fl-l: 0.83 na ɛwɔ hɔ; --fl-c: 0.14 na ɛwɔ hɔ; --fl-h: 100 na ɛwɔ hɔ; } . 18% { --fl-l: 0.88 na ɛwɔ hɔ; --fl-c: 0.11 na ɛwɔ hɔ; --fl-h: 94 na ɛwɔ hɔ; } . 24% { --fl-l: 0.82 na ɛwɔ hɔ; --fl-c: 0.16 na ɛwɔ hɔ; --fl-h: 82 na ɛwɔ hɔ; } . 30% { --fl-l: 0.90 na ɛwɔ hɔ; --fl-c: 0.12 na ɛwɔ hɔ; --fl-h: 90 na ɛwɔ hɔ; } . 36% { --fl-l: 0.79 na ɛwɔ hɔ; --fl-c: 0.17 na ɛwɔ hɔ; --fl-h: 76 na ɛwɔ hɔ; } . 44% { --fl-l: 0.87 na ɛwɔ hɔ; --fl-c: 0.12 na ɛwɔ hɔ; --fl-h: 96 na ɛwɔ hɔ; } . 52% { --fl-l: 0.81 na ɛwɔ hɔ; --fl-c: 0.15 na ɛwɔ hɔ; --fl-h: 102 na ɛwɔ hɔ; } . 60% { --fl-l: 0.89 na ɛwɔ hɔ; --fl-c: 0.11 na ɛwɔ hɔ; --fl-h: 93 na ɛwɔ hɔ; } . 68% { --fl-l: 0.83 na ɛwɔ hɔ; --fl-c: 0.16 na ɛwɔ hɔ; --fl-h: 85 na ɛwɔ hɔ; } . 76% { --fl-l: 0.91 na ɛwɔ hɔ; --fl-c: 0.10 na ɛwɔ hɔ; --fl-h: 91 na ɛwɔ hɔ; } . 84% { --fl-l: 0.85 na ɛwɔ hɔ; --fl-c: 0.14 na ɛwɔ hɔ; --fl-h: 98 na ɛwɔ hɔ; } . 92% { .--fl-l: 0.80 na ɛwɔ hɔ; --fl-c: 0.17 na ɛwɔ hɔ; --fl-h: 74 na ɛwɔ hɔ; } . } .
Afei me scoped saa animation no kɔɔ SVG no so, enti shared variables no wɔ hɔ ma kanea no ne me overlay no nyinaa:
@media (ɔpɛ-wɔatew-kankyee: ɔmpɛ biara) { .svg-mine [data-animation = so] { . animation: ogyaframa 3.6s a enni ano linear; tew a obi tew ne ho: tew ne ho;
/* Yɛ ogyaframa kɔla fi animated channels */ -- ogyaframa: oklch (var (--fl-l) var (--fl-c) var (--fl-h));
/* Kanea kɔla a wonya fi ogyaframa mu */ -- kanea-core: oklch (efi var (--ogya) calc (l + 0.05) calc (c * 0.70) h);
/* Overlay tint a wonya fi ogyaframa koro no ara mu */ --overlay-tint: oklch (efi var (--ogyaframa) . calc (l + 0.06) calc (c * 0.65) calc (h - 10)); } . } .
Awiei koraa no, mede saa kɔla ahorow a wonya fii mu no guu akanea a ɛhyerɛn ne nea ɛkata so no so: @media (ɔpɛ-wɔatew-kankyee: ɔmpɛ biara) { .svg-mine[data-animations=on] #mine-kanea-1 > kurukuruwa, . .svg-mine [data-animations = so] # mine-kanea-2 > kurukuruwa { . hyɛ: var (--kanea-core); } .
.svg-mine [data-animations=wɔ] #ɔkata so { . ɔyɛkyerɛ: block; hyɛ: var (--kata-tint); opacity a ɛyɛ mmerɛw: 0.5; } . } .
Sɛ ogyaframa no dan kɔ borɔdɔma so a, akanea no mu yɛ hyew, na nea ɛwɔ hɔ no yɛ hyew. Sɛ ogyaframa no dwo a, biribiara bom si hɔ. Nea eye sen biara ne sɛ wɔmfa nsa nkyerɛw biribiara. Sɛ mesesa fapem no kɔla anaasɛ me tweak ogyaframa animation ranges no a, kanea nhyehyɛe no nyinaa yɛ foforo bere koro mu. Wubetumi ahu nea etwa to a efii mu bae wɔ me wɛbsaet no so. San Fa Di Dwuma, San De Di Dwuma, San Kɔhwɛ Wɔhyɛɛ saa Hanna-Barbera animators no ma wɔsan de element ahorow no yɛɛ atirimpɔw esiane hia a ɛho hia nti, nanso mesan de kɔla ahorow di dwuma efisɛ ɛma m’adwuma no yɛ nea ɛkɔ so daa na ɛnyɛ den sɛ mɛhwɛ so. CSS relative color values ma me kwan ma:
Kyerɛkyerɛ fapem kɔla biako mu, . Kyerɛkyerɛ sɛnea kɔla afoforo fa ho, . San fa saa abusuabɔ ahorow no di dwuma wɔ baabiara, na Ma nhyehyɛe no nya nkwa denam botae biako a wobɛsesa so.
Relative color mma theming nyɛ mmerɛw kɛkɛ. Ɛhyɛ ɔkwan a wɔfa so susuw nneɛma ho nkuran wɔ baabi a kɔla, te sɛ kankyee, yɛ nea wɔahyɛ da ahyɛ da — ne baabi a sɛ wɔsakra botae biako a, ebetumi asakra adeyɛ mũ bi a wɔrensan nkyerɛw adwuma a ɛwɔ ase no.
