Kumuha ng color palette mula sa kahit anong larawan, may contrast checker

Paano pinipili ang mga kulay

Gumagawa ang tool ng maliit na kopya ng iyong larawan, hanggang 160 pixels lang sa pinakamahabang gilid, at binibilang nito ang bawat pixel na hindi transparent. Pagkatapos ay pinagpapangkat nito ang magkakatulad na pixel gamit ang k-means clustering at ibinabalik ang karaniwang kulay ng bawat pangkat, nauuna ang pinakamalaking pangkat. Ang porsyento sa bawat swatch ay kung gaano kalaki ang saklaw ng pangkat na iyon sa larawan.

Nakapirmi ang panimulang punto sa halip na random: nagsisimula ito sa pinakakaraniwang kulay, pagkatapos ay patuloy na nagdadagdag ng kulay na pinakamalayo sa mga mayroon na ito. Kaya ang parehong larawan ay nagbibigay ng parehong palette sa tuwing gagamitin, at ang maliit na matingkad na accent, tulad ng pulang logo sa puting kahon, ay may sariling swatch sa halip na ma-average sa background.

Humiling ng 5 hanggang 8 na kulay. Ang kuha ng produkto sa payak na backdrop ay karaniwang nangangailangan ng 5 o 6. Ang abalang lifestyle photo ay mas mabuti sa 8. Kung mas kaunti ang natatanging kulay sa larawan kaysa sa hiniling mo, sasabihin ito ng tool at ipapakita ang mga nahanap nito.

Pagbasa sa contrast matrix

Ang bawat kulay ay ikinakabit sa bawat isa, kasama ang payak na puti at itim, at ipinapakita ng bawat cell ang contrast ratio para sa text sa kulay ng hilera sa background na nasa kulay ng hanay. Sumusunod ang ratio sa depinisyon ng WCAG: (L1 + 0.05) / (L2 + 0.05), kung saan ang L1 at L2 ay ang relative luminance ng mas maliwanag at mas madilim na kulay. Umaabot ito mula 1:1 (parehong kulay nang dalawang beses) hanggang 21:1 (itim sa puti).

Ang mga label ay ang mga threshold na itinakda ng WCAG:

• AA: hindi bababa sa 4.5:1 para sa normal na text at 3:1 para sa malaking text (Success Criterion 1.4.3).
• AAA: hindi bababa sa 7:1 para sa normal na text at 4.5:1 para sa malaking text (Success Criterion 1.4.6).
• Ang malaking text ay nangangahulugang hindi bababa sa 18 point, o 14 point bold (depinisyon ng WCAG sa malaking sukat).

Ang cell na may markang AA large ay ayos para sa malaking headline ngunit masyadong malabo para sa caption. Sinasabi rin ng paliwanag ng W3C sa 1.4.3 na hindi dapat i-round ang ratio, kaya ang 4.499:1 ay hindi umaabot sa 4.5:1. Hinuhusgahan ng tool ang eksaktong numero at ipinapakita ito na pinutol sa dalawang decimal, hindi kailanman ini-round pataas.

Isang halimbawang kinalkula

Sabihin nating ang larawan ay nagbigay sa iyo ng navy na #1a3c6e at cream na #fdf6e3. Ang relative luminance ng navy ay humigit-kumulang 0.046 at ng cream ay humigit-kumulang 0.923. Ang ratio ay (0.923 + 0.05) / (0.046 + 0.05), na humigit-kumulang 10.1:1 sa mga naka-round na numerong iyon at 10.16:1 sa eksakto. Pumapasa iyon sa AAA para sa lahat ng text, kaya ligtas ang navy na text sa cream na end card sa anumang laki. Ilagay ang mid orange tulad ng #e07a2e sa parehong cream at bumababa ang ratio sa 2.78:1, na bumabagsak kahit para sa malaking text. Itabi ang orange para sa button na may itim na text dito (6.99:1, na AA ngunit kulang lang nang kaunti sa AAA), o para sa hugis na walang salita.

Paggamit ng export

Ang CSS export ay isang :root block ng mga custom property, --color-1 para sa kulay na pinakamalaki ang saklaw sa larawan at iba pa pababa. Ang JSON ay may hex, RGB, HSL ng bawat kulay at ang bahagi nito sa larawan, na madaling i-paste sa isang design token file o ibigay sa isang script. Palitan ang pangalan ng mga variable kapag alam mo na kung aling kulay ang background, alin ang text at alin ang accent.

Ano ang hindi ginagawa ng tool na ito

Hindi nito alam kung aling mga kulay ang sa brand mo. Ang larawan ng produkto mo sa kahoy na mesa ay isasama ang mesa. I-crop muna sa produkto o packaging kung gusto mo lang ang mga kulay nito. Hindi rin nito masasabi sa iyo ang eksaktong mga kulay sa print: ang mga numero ay ang mga pixel sa file, matapos ang iyong camera at anumang pag-edit, kaya suriin ang mga ito laban sa iyong brand guide bago mo i-publish. At hinuhusgahan lang nito ang contrast ng text. May hiwalay na mga patakaran ang WCAG para sa mga icon at bahagi ng interface, na hindi ginagrado ng matrix na ito.

Kung ayaw mong gawin ito nang manu-mano

Ang Hermoso ay marketing sa autopilot: sinasaliksik nito ang mga ad na gumagana na sa iyong merkado, gumagawa ng on-brand na image at video ads, nag-iiskedyul ng mga post at nagpapatakbo ng mga bayad na kampanya sa sarili mong mga ad account. Kapag idinagdag mo ang iyong brand mula sa iyong website, natututuhan nito ang iyong mga produkto, logo at palette, at maaari mong itakda ang mga kulay ng caption at end card gamit ang mga hex code. Gumagana ito sa web app, o sa loob ng Claude, ChatGPT at Cursor sa pamamagitan ng MCP server nito.

Mga libreng tool: Gabay sa sukat para sa social media · Instagram Grid Maker · Open Graph generator na kagamitan

Mga madalas na tanong

Paano ako kukuha ng color palette mula sa larawan?

I-drop ang larawan sa kasangkapan at piliin kung ilang kulay ang gusto mo, mula 5 hanggang 8. Pinapangkat nito ang magkakatulad na pixel at ipinapakita ang average na kulay ng bawat pangkat bilang HEX, RGB at HSL, pinakamalaki muna, na may copy button sa bawat isa.

Anong contrast ratio ang kailangan ko para sa teksto?

Ang WCAG 2.2 level AA ay humihingi ng hindi bababa sa 4.5:1 para sa karaniwang teksto at 3:1 para sa malaking teksto. Ang Level AAA ay humihingi ng 7:1 at 4.5:1. Ang malaking teksto ay hindi bababa sa 18 point, o 14 point na bold.

Sapat na bang malapit ang 4.49:1 para pumasa sa AA?

Hindi. Sinasabi ng W3C na hindi dapat i-round ang na-compute na ratio kapag inihahambing sa isang threshold, kaya hindi pasado ang 4.499:1 sa 4.5:1. Hinahatulan ng kasangkapan ang eksaktong numero.

Bakit palaging pareho ang nakukuha kong palette?

Nagsisimula ang clustering sa isang nakatakdang punto, ang pinakakaraniwang kulay, at pagkatapos ay idinadagdag ang kulay na pinakamalayo sa mga napili na. Walang random na simula, kaya laging may iisang sagot ang bawat larawan.

Na-upload ba ang imahe ko?

Hindi. Binabasa ito gamit ang sariling file reader ng iyong browser at binibilang sa isang canvas sa iyong device. Walang ipinapadala kahit saan o itinatago.