Extrage mai întâi paleta exemplu, apoi folosește alegerea precisă și editările manuale pentru a decide ce culori aparțin propriului tău proiect. Deschide Selector de culori din imagine.
Încărcați și extrageți o paletă inițială
Deschideți Image Color Picker și încărcați o imagine acceptată sau încercați proba. Extracția automată încarcă sursa pe server. Proba din acest ghid este collage-botanical.jpg, o fotografie 1200 x 900 cu flori, frunze și un fundal de culoarea piersicii.
Lăsați Colors to extract la 6 și selectați Dominant pentru exemplu. Dominant favorizează culorile principale ale imaginii, în timp ce Vibrant oferă mai multă influență accentelor colorate. O solicitare poate folosi 3 până la 12 culori; o imagine cu mai puține grupuri vizibile distincte poate returna mai puține.
Rezultatul Dominant real conține #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. Cel mai mare grup este #E3B49F la aproximativ 28.88% din pixelii vizibili eșantionați. Extracția a folosit un eșantion de 512 x 384; acele procente nu reprezintă un recensământ exact al imaginii la rezoluție completă.
O culoare din paletă poate fi o medie a culorilor din apropiere. Alegeți un anumit pixel când aveți nevoie de valoarea unui mic detaliu.
Alegeți și rafinați culorile individuale
Faceți clic sau atingeți imaginea pentru a inspecta un pixel cu lupa. Focalizați imaginea și folosiți tastele săgeți pentru a vă deplasa un pixel, Shift plus o săgeată pentru a vă deplasa zece, apoi Enter pentru a alege. Copiați HEX, RGB sau HSL cu butonul său individual de copiere sau folosiți Add to palette.
Selectează o mostră pentru a-i schimba valoarea HEX sau culoarea, mută-o la stânga sau la dreapta ori elimin-o. Adăugarea unei culori personalizate acceptă o valoare HEX la alegere. Blocarea culorii păstrează o mostră selectată atunci când Reîmprospătare paletă sau o setare de extracție modificată generează o altă paletă inițială.
Eșantionarea și transparența oferă Culoare sursă și Compozit peste un fundal. Culoarea sursă include opacitatea în codurile copiate atunci când este relevant; Compozit arată pixelul amestecat peste fundalul de eșantion ales. Mostrele de paletă sunt în sine valori RGB opace. Culorile editate și alese nu au un procentaj sursă estimat.
Imaginile decodabile în browser folosesc eșantioane sRGB de browser. Dacă se utilizează o previzualizare normalizată, selectorul etichetează explicit culorile și coordonatele sale ca fiind aproximative.
Exemplul din acest ghid
Culori de extras: 6; Dominantă; fără modificări manuale sau blocări; Salvare ca: PNG. Extracția automată a eșantionat 512 x 384 pixeli.
- Imagine sursă
- 1200 x 900 px
- Culori extrase
- 6 culori opace
- Card paletă
- 600 x 500 px
- PNG descărcat
- 9,163 octeți
Verificați o pereche de text și fundal
Deschide Verificare contrast culoare. Setează Text și Fundal cu ajutorul controalelor de culoare, introdu coduri HEX sau folosește culoarea aleasă pentru oricare parte. Mostra de text live îți permite să compari perechea, iar raportul este însoțit de rezultate separate Normal AA, Normal AAA, Large AA și Large AAA.
Alege o pereche pentru scopul propus, în loc să presupui că fiecare culoare extrasă poate fi folosită ca text. Un piersiciu deschis și un violet deschis pot funcționa împreună într-o fotografie, dar pot forma o combinație slabă pentru text și fundal.
Acest control verifică doar acea pereche de culori pentru contrastul textului. Nu este un audit de accesibilitate complet și nu decide dacă tipografia, interacțiunea cu tastatura sau restul designului sunt utilizabile.
Un raport de contrast care trece testul este o verificare utilă, nu o garanție că o pagină întreagă este accesibilă.
Copiați valorile sau exportați paleta
Pentru o predare rapidă, copiază un cod individual sau folosește Copiere paletă culori HEX. Pentru un fișier, alege Salvare ca și selectează Start. PNG creează o imagine de paletă etichetată; SVG păstrează mostrele și etichetele ca conținut vectorial; CSS oferă variabile de culoare numerotate; JSON conține valori HEX, RGB și HSL.
Exemplul needitat cu șase culori exportă palette.png la 600 x 500 pixeli și 9,163 octeți. Ordinea mostrelor corespunde paletei. Paleta ta finală poate conține de la 1 la 12 culori după editare, chiar dacă numărul inițial automat a fost diferit.
Descarcă înainte de a pleca sau de a reîmprospăta. Exportul final încarcă sursa și culorile alese pentru procesarea pe server. Acesta creează un fișier de paletă nou și nu recolorează sau înlocuiește fotografia originală.
PNG și SVG sunt referințe vizuale convenabile. CSS și JSON sunt utile atunci când pasul următor necesită valori de culoare reutilizabile.
Întrebări frecvente
Pipeta returnează aceleași culori ca extracția automată?
Nu neapărat. O valoare aleasă descrie un anumit pixel sursă sau de previzualizare. Extracția automată grupează pixelii eșantionați și poate returna culori mediate.
Sunt numărați pixelii transparenți?
Pixelii complet transparenți sunt excluși din extracție. Pixelii parțial transparenți au o pondere redusă. Eșantionarea sursei poate arăta opacitatea, dar mostrele de paletă exportate sunt opace.
Ce se întâmplă cu culorile blocate când reîmprospătez?
Culorile blocate rămân în paletă în timp ce noile culori extrase ocupă celelalte poziții. O culoare păstrată sau editată nu primește un procentaj de imagine inventat.
Pot folosi acest lucru pentru o culoare de brand exactă?
Introdu direct o valoare HEX cunoscută sau alege un pixel sursă adecvat. Iluminarea fotografiei, compresia, gestionarea culorilor și previzualizările normalizate pot schimba valorile eșantionate, deci o paletă foto automată nu este o dovadă a unei specificații de brand originale.
Construiește o paletă pe care o poți duce în următorul tău design
Încearcă un eșantion sau folosește propriul fișier și revizuiește rezultatul înainte de a-l partaja.
