Gumawa ng brand colour palette mula sa sarili mong product photo
Kunin ang totoong kulay mula sa larawan ng iyong produkto at packaging, bigyan ang bawat isa ng tungkulin, at suriin ang bawat pares ng teksto laban sa WCAG contrast bago ito mapunta sa ad, caption o end card.
Maraming maliliit na brand ang may logo file pero walang listahan ng kulay. Nasa mismong produkto ang mga kulay: ang bote, ang label, ang kahon, ang tela. Kapag oras na gumawa ng ad, thumbnail, o caption style, may titingin sa hex code mula sa larawan at aasa na tama ito.
Mas magagawa mo ito sa mga sampung minuto. Kunin ang mga kulay mula sa mga larawan ng totoong produkto, bigyan ang bawat isa ng tungkulin, at tingnan kung alin sa mga pares ang nababasa bilang teksto. Ginagawa ng libreng colour palette extractor namin ang pagkuha at pagsusuri sa browser mo, at walang inuupload kahit saan.
Bakit sa produkto magsimula, hindi sa mood board
Nakikilala ng mga tao ang produkto mo sa itsura nito sa istante o sa kamay nila. Ang ad na tugma ang kulay sa pack ay parang parehong brand sa unang tingin, at ang ad na lumilihis ay parang peke. Ang palette na galing sa produkto ay tapat din sa kung ano talaga ang ibinebenta mo, na bihirang gawin ng mood board.
Gumagana rin ito para sa serbisyo. Kung wala kang pisikal na produkto, gamitin ang pinakamagandang screenshot mo, ang storefront mo o larawan ng team mo, anuman ang iniuugnay na ng mga tao sa iyo.
Hakbang 1: pumili at i-crop ang mga larawan
Pumili ng dalawa o tatlong malinis na larawan: ang produkto sa simpleng background, ang harap ng packaging, at isang lifestyle shot na gusto mo. Pagkatapos, i-crop nang mahigpit. Binibilang ng extractor ang bawat pixel na ibibigay mo, kaya ang bote sa mesang kahoy ay ibabalik ang mesa bilang isa sa mga kulay ng brand mo. I-crop sa produkto at label, at ang palette ay ang produkto na mismo.
Kumuha ng litrato sa liwanag ng araw o malambot na ilaw kung kaya. Ang mainit na lampara ay nagpapalitaw ng puting packaging na maging cream, at dadalhin ng bawat kulay na kukunin mo ang tint na iyon.
Hakbang 2: kumuha ng lima hanggang walong kulay
Ilagay ang bawat larawan sa extractor at humingi ng 5 o 6 na kulay para sa malinis na product shot, o 8 para sa masikip na larawan. Pinagpapangkat nito ang magkakatulad na pixel at inilalista ang average ng bawat grupo, mula pinakamalaki, kasama ang bahagi ng larawang sakop nito. Nakapirmi ang panimulang punto, kaya laging pareho ang palette ng parehong larawan, at ang maliit at maliwanag na accent, gaya ng pulang takip sa puting bote, ay nakakakuha ng sarili nitong swatch sa halip na mawala sa average.
Patakbuhin ang lahat ng larawan at hanapin ang mga kulay na paulit-ulit. Iyon ang brand. Ang kulay na lumalabas sa isang shot lang ay kadalasang background o liwanag.
Hakbang 3: bigyan ng tungkulin ang bawat kulay
Kapaki-pakinabang lang ang palette kapag may tungkulin ang bawat kulay. Karamihan sa brand ay nangangailangan ng apat:
- Background: ang kulay kung saan nakapatong ang karamihan ng layout. Madalas ang base colour ng pack, o isang magaang neutral.
- Teksto: madilim na kulay na nababasa sa background. Gumagana ang halos itim. Mas mabuti ang malalim na kulay ng brand, kung pumasa ito sa contrast check.
- Accent: ang matapang na kulay, para sa button, price sticker o iisang naka-highlight na salita.
- Suporta: isa o dalawang neutral para sa mga kahon, divider at pangalawang teksto.
Pigilan ang sarili sa paggamit ng lahat ng kinuha ng larawan. Ang limang pinangalanang kulay na may malinaw na tungkulin ay magpapanatiling pare-pareho ang isang daang ad. Ang labindalawa ay hindi.
Hakbang 4: suriin ang contrast bago ilagay kahit saan
Ang mga pares ng kulay na maayos sa malaking monitor ay maaaring mahirap basahin sa telepono sa ilalim ng araw, at mas mahirap pa para sa mga taong may mahinang paningin. Nagbibigay ang Web Content Accessibility Guidelines ng W3C ng numero para dito, ang contrast ratio, na mula 1:1 (parehong kulay dalawang beses) hanggang 21:1 (itim sa puti). Ang mga threshold ay:
| Normal na teksto | Malaking teksto | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Ang malaking teksto ay hindi bababa sa 18 point, o 14 point na bold, ayon sa depinisyon ng WCAG. At mahigpit ang mga numero: sinasabi ng gabay ng W3C sa 1.4.3 na hindi dapat i-round ang nakuhang ratio, kaya hindi pumapasa ang 4.499:1 sa 4.5:1.
Isinulat ang WCAG para sa web content, hindi para sa ad, pero dala ng katwiran nito ang anumang teksto sa screen, kasama ang mga caption na nakabaon sa video at ang mga salita sa end card.
Isang halimbawa
Sabihin nating ang packaging mo ay nagbibigay ng navy na #1a3c6e, cream na #fdf6e3 at orange na #e07a2e.
Ang formula ay (L1 + 0.05) / (L2 + 0.05), kung saan ang L1 ang relative luminance ng mas magaang kulay at ang L2 ng mas madilim. Mula 0 para sa itim hanggang 1 para sa puti ang relative luminance. Ang navy ay humigit-kumulang 0.046, ang cream ay 0.923 at ang orange ay 0.300.
- Navy na teksto sa cream: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, humigit-kumulang 10.1 gamit ang mga bilog na numerong ito, at 10.16:1 eksakto. Pumapasa ito sa AAA sa anumang laki. Ito ang pangunahin mong pares.
- Orange na teksto sa cream: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, humigit-kumulang 2.78:1. Bumabagsak ito kahit para sa malaking teksto. Huwag gamitin ang orange para sa mga salita sa cream.
- Itim na teksto sa orange: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, na 7.0 gamit ang mga bilog na numero pero 6.99:1 eksakto. Pumapasa ito sa AA para sa lahat ng teksto pero bahagyang kulang sa AAA. Maayos para sa label ng button.
- Cream na teksto sa navy: parehong pares ng una, kaya parehong 10.16:1. Hindi nagbabago ang ratio kapag binaliktad ang pares.
Kaya halos kusa nang pumipili ang mga tungkulin: cream na background, navy na teksto, at orange bilang hugis ng accent na may itim na salita (ang navy sa orange ay 3.65:1 lamang, na AA para sa malaking teksto lang). Ipinapakita ng extractor ang buong grid nang sabay-sabay, bawat kulay laban sa bawat isa pa, pati puti at itim, at may markang AAA, AA, AA large o Fail ang bawat cell.
Hakbang 5: isulat ito nang minsan
I-export ang palette bilang CSS custom properties o JSON at itago ito sa tabi ng mga logo file mo. Palitan ang pangalan ng mga variable ayon sa tungkulin kapag nakapagpasya ka na: mas mabasa ang --brand-bg, --brand-text, --brand-accent kaysa --color-3 pagkatapos ng isang buwan. Maglagay ng isang linya sa ilalim ng bawat isa na nagsasabi kung aling mga pares ang pumasa, para hindi na kailangang ulitin ng sinuman ang pagsusuri.
Pagkatapos, i-check ang mga numero laban sa anumang opisyal na mayroon ka na. Ang larawan ay nagbibigay ng kulay na nakita ng camera mo, na malapit sa printed pack pero hindi eksaktong pareho sa ink spec. Kung may eksaktong value ang printer o designer mo, sila ang masusunod.
Paggamit ng palette sa mga ad at post
- Mga caption at subtitle: kulay ng teksto mo sa kahon na kulay ng background mo, o baligtad. Suriin muna ang pares.
- End card: kulay ng background na may logo at isang linya sa kulay ng teksto mo. Maaaring punuin ng accent ang hugis ng button sa likod ng maikling call to action.
- Thumbnail at cover: isang accent, isang malaking nababasang salita, at maraming background.
- QR code sa packaging: gumagana ang kulay ng brand kung malinaw na mas madilim kaysa sa pack. Binabalaan ka ng QR code generator namin kapag mababa ang contrast.
Saan pumapasok ang Hermoso
Ang Hermoso ay isang AI marketing agent. Sinasaliksik nito ang mga ad na gumagana na sa market mo, gumagawa ng on-brand na image at video ad, nagpo-post at nag-iiskedyul sa sarili mong social account, at nagpapatakbo ng bayad na kampanya sa sarili mong ad account. Kapag idinagdag mo ang brand mo mula sa website, natututo ito ng mga produkto, logo at palette mo. Nananatiling naka-off ang mga caption at end card maliban kung hihingin mo, at kapag hiniling mo, maaari mong itakda ang kulay ng teksto, kahon at end card gamit ang hex code, para ang mga pares na sinuri mo rito ang siyang ilalabas. Gumagana ito sa web app, o sa loob ng Claude, ChatGPT at Cursor sa pamamagitan ng MCP server nito.
Mga madalas na tanong
Paano ko makikita ang hex code ng mga kulay ng produkto ko?
I-crop ang malinis na larawan sa produkto o packaging at ilagay ito sa colour palette extractor. Inilalista nito ang pangunahing kulay bilang HEX, RGB at HSL. Patakbuhin ang dalawa o tatlong larawan at itago ang mga kulay na paulit-ulit.
Anong contrast ratio ang kailangan ng teksto?
Ayon sa WCAG 2.2, kailangan ng level AA ang 4.5:1 para sa normal na teksto at 3:1 para sa malaking teksto, at kailangan ng AAA ang 7:1 at 4.5:1. Ang malaking teksto ay hindi bababa sa 18 point, o 14 point na bold.
Sapat na ba ang 4.49:1 para sa AA?
Hindi. Sinasabi ng W3C na hindi dapat i-round ang ratio kapag ikinumpara sa threshold, kaya hindi pumapasa ang 4.499:1 sa 4.5:1.
Ilang kulay dapat ang brand palette?
Sapat para bigyan ng tungkulin ang bawat isa: karaniwang background, kulay ng teksto, isang accent, at isa o dalawang neutral. Ang limang pinangalanang kulay na may malinaw na tungkulin ay mas nagpapanatiling pare-pareho ang ad kaysa sa mahabang listahan.
Eksakto ba ang mga kulay mula sa larawan?
Hindi. Ito ang naitala ng camera sa ilalim ng ganoong ilaw, na malapit sa produkto pero hindi kapareho ng print o ink specification. Kung may opisyal kang value, gamitin iyon.