Obține paleta de culori din orice imagine, cu verificator de contrast

Cum sunt alese culorile

Instrumentul creează o copie mică a imaginii tale, de cel mult 160 de pixeli pe latura cea mai lungă, și numără fiecare pixel care nu este transparent. Apoi grupează pixelii asemănători folosind clusterizarea k-means și raportează culoarea medie a fiecărui grup, începând cu cel mai mare. Procentul de pe fiecare mostră arată cât din imagine acoperă acel grup.

Punctul de pornire este fix, nu aleatoriu: începe cu cea mai frecventă culoare, apoi adaugă mereu culoarea cea mai îndepărtată de cele deja alese. Astfel, aceeași imagine dă de fiecare dată aceeași paletă, iar un accent mic și viu, precum un logo roșu pe o cutie albă, primește propria mostră în loc să fie topit în fundal prin mediere.

Cere între 5 și 8 culori. O fotografie de produs pe un fundal simplu are de obicei nevoie de 5 sau 6. O poză de lifestyle aglomerată se citește mai bine cu 8. Dacă imaginea are mai puține culori distincte decât ai cerut, instrumentul te anunță și le arată pe cele găsite.

Cum citești matricea de contrast

Fiecare culoare este asociată cu toate celelalte, plus alb și negru simplu, iar fiecare celulă arată raportul de contrast pentru text în culoarea rândului pe un fundal în culoarea coloanei. Raportul respectă definiția WCAG: (L1 + 0.05) / (L2 + 0.05), unde L1 și L2 sunt luminanța relativă a culorii mai deschise și a celei mai închise. Merge de la 1:1 (aceeași culoare de două ori) la 21:1 (negru pe alb).

Etichetele sunt pragurile stabilite de WCAG:

• AA: cel puțin 4.5:1 pentru text normal și 3:1 pentru text mare (Criteriul de succes 1.4.3).
• AAA: cel puțin 7:1 pentru text normal și 4.5:1 pentru text mare (Criteriul de succes 1.4.6).
• Textul mare înseamnă cel puțin 18 puncte sau 14 puncte aldin (definiția WCAG pentru scară mare).

O celulă marcată AA mare este potrivită pentru un titlu mare și prea slabă pentru o legendă. Explicația W3C pentru 1.4.3 spune și că raportul nu trebuie rotunjit, deci 4.499:1 nu îndeplinește 4.5:1. Instrumentul judecă numărul exact și îl arată trunchiat la două zecimale, niciodată rotunjit în sus.

Un exemplu rezolvat

Să zicem că fotografia îți dă un bleumarin #1a3c6e și o nuanță crem #fdf6e3. Luminanța relativă a bleumarinului iese pe la 0.046, iar a cremului pe la 0.923. Raportul este (0.923 + 0.05) / (0.046 + 0.05), adică aproximativ 10.1:1 cu aceste cifre rotunjite și 10.16:1 cu cele exacte. Acesta trece AAA pentru orice text, așa că textul bleumarin pe un card final crem este sigur la orice dimensiune. Pune un portocaliu mediu precum #e07a2e pe același crem și raportul scade la 2.78:1, care nu trece nici măcar pentru text mare. Păstrează portocaliul pentru un buton cu text negru pe el (6.99:1, care este AA, dar puțin sub AAA) sau pentru o formă fără cuvinte.

Cum folosești exportul

Exportul CSS este un bloc :root de proprietăți personalizate, --color-1 pentru culoarea care acoperă cel mai mult din imagine și tot așa în jos. JSON-ul conține pentru fiecare culoare codul hex, RGB, HSL și proporția din imagine, ușor de lipit într-un fișier de tokenuri de design sau de dat unui script. Redenumește variabilele după ce afli care culoare este fundalul, care este textul și care este accentul.

Ce nu face acest instrument

Nu știe care culori sunt ale brandului tău. O fotografie a produsului tău pe o masă din lemn va include masa. Decupează mai întâi la produs sau ambalaj dacă vrei doar culorile acestuia. De asemenea, nu îți poate spune culorile exacte pentru print: numerele sunt pixelii din fișier, după camera ta și eventuale editări, așa că verifică-le față de ghidul tău de brand înainte să le publici. Și judecă doar contrastul textului. WCAG are reguli separate pentru pictograme și elemente de interfață, pe care această matrice nu le notează.

Dacă preferi să nu faci asta manual

Hermoso este marketing pe pilot automat: cercetează reclamele care deja funcționează pe piața ta, creează reclame imagine și video pe brandul tău, programează postările și rulează campanii plătite pe propriile tale conturi de reclame. Când îți adaugi brandul de pe site, îți învață produsele, logoul și paleta, iar tu poți seta culorile legendelor și ale cardurilor finale cu coduri hex. Funcționează în aplicația web sau în Claude, ChatGPT și Cursor prin serverul său MCP.

Instrumente gratuite: Ghid de dimensiuni pentru rețele sociale · Generator de grilă Instagram · Generator Open Graph

Întrebări frecvente

Cum obțin o paletă de culori dintr-o fotografie?

Pune fotografia în instrument și alege câte culori vrei, de la 5 la 8. Grupează pixelii similari și afișează culoarea medie a fiecărui grup ca HEX, RGB și HSL, cea mai mare prima, cu un buton de copiere pe fiecare.

De ce raport de contrast am nevoie pentru text?

Nivelul AA din WCAG 2.2 cere cel puțin 4.5:1 pentru text normal și 3:1 pentru text mare. Nivelul AAA cere 7:1 și 4.5:1. Textul mare are cel puțin 18 puncte sau 14 puncte bold.

Este 4.49:1 suficient de aproape pentru a trece AA?

Nu. W3C spune că raportul calculat nu ar trebui rotunjit atunci când este comparat cu un prag, deci 4.499:1 nu îndeplinește 4.5:1. Instrumentul evaluează numărul exact.

De ce obțin aceeași paletă de fiecare dată?

Gruparea pornește dintr-un punct fix, culoarea cea mai comună, și apoi adaugă culoarea cea mai îndepărtată de cele deja alese. Nu există un start aleatoriu, așa că o imagine dă întotdeauna un singur rezultat.

Imaginea mea este încărcată?

Nu. Este citită cu cititorul de fișiere propriu al browserului tău și numărată într-un canvas pe dispozitivul tău. Nimic nu este trimis undeva sau stocat.