Najpierw wyodrębnij przykładową paletę, a następnie użyj precyzyjnego wybierania i ręcznych edycji, aby zdecydować, które kolory należą do Twojego projektu. Otwórz Próbnik kolorów z obrazu.
Prześlij i wyodrębnij paletę startową
Otwórz Image Color Picker i prześlij jeden obsługiwany obraz lub wypróbuj próbkę. Automatyczna ekstrakcja przesyła źródło na serwer. Próbka w tym przewodniku to collage-botanical.jpg, zdjęcie 1200 x 900 przedstawiające kwiaty, liście i tło w kolorze brzoskwiniowym.
Pozostaw liczbę kolorów do wyodrębnienia na 6 i wybierz Dominujący dla przykładu. Dominujący faworyzuje główne kolory obrazu, podczas gdy Żywy nadaje większe znaczenie kolorowym akcentom. Żądanie może użyć od 3 do 12 kolorów; obraz z mniejszą liczbą wyraźnych grup może zwrócić ich mniej.
Rzeczywisty wynik Dominujący zawiera #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. Największa grupa to #E3B49F przy około 28.88% próbkowanych widocznych pikseli. Ekstrakcja użyła próbki 512 x 384; te wartości procentowe nie są dokładnym spisem obrazu w pełnej rozdzielczości.
Kolor palety może być średnią pobliskich kolorów. Wybierz konkretny piksel, gdy potrzebujesz wartości jednego małego szczegółu.
Wybierz i dopracuj poszczególne kolory
Kliknij lub dotknij obrazu, aby sprawdzić piksel za pomocą lupy. Skup obraz i użyj klawiszy strzałek, aby przesunąć o jeden piksel, Shift plus strzałka, aby przesunąć o dziesięć, a następnie Enter, aby wybrać. Skopiuj HEX, RGB lub HSL za pomocą indywidualnego przycisku kopiowania lub użyj Dodaj do palety.
Wybierz próbkę, aby zmienić jej wartość HEX lub kolor, przesuń ją w lewo lub w prawo albo usuń. Dodawanie własnego koloru akceptuje wybraną przez Ciebie wartość HEX. Blokada koloru zachowuje wybraną próbkę, gdy Odśwież paletę lub zmienione ustawienie ekstrakcji generuje inną paletę początkową.
Próbkowanie i przezroczystość oferują kolor źródłowy oraz kompozycję na tle. Kolor źródłowy uwzględnia przezroczystość w skopiowanych kodach, gdy jest to istotne; kompozycja pokazuje piksel nałożony na wybrane tło próbki. Same próbki palety są nieprzezroczystymi wartościami RGB. Edytowane i wybrane kolory nie mają szacowanego procentu źródła.
Obrazy dekodowalne przez przeglądarkę używają próbek sRGB przeglądarki. Jeśli używany jest znormalizowany podgląd, próbnik wyraźnie oznacza swoje kolory i współrzędne jako przybliżone.
Przykład w tym przewodniku
Kolory do wyodrębnienia: 6; Dominujący; brak ręcznych zmian lub blokad; Zapisz jako: PNG. Automatyczna ekstrakcja próbkowała 512 x 384 pikseli.
- Obraz źródłowy
- 1200 x 900 px
- Wyodrębnione kolory
- 6 nieprzezroczystych kolorów
- Karta palety
- 600 x 500 px
- Pobrano PNG
- 9,163 bajtów
Sprawdź parę tekst i tło
Otwórz Sprawdź kontrast kolorów. Ustaw Tekst i Tło za pomocą kontrolek kolorów, wprowadź kody HEX lub użyj wybranego koloru dla obu stron. Próbka tekstu na żywo pozwala porównać parę, a współczynnikowi towarzyszą oddzielne wyniki Normal AA, Normal AAA, Large AA oraz Large AAA.
Wybierz parę do zamierzonego celu, zamiast zakładać, że każdy wyodrębniony kolor może być użyty jako tekst. Jasna brzoskwinia i jasny fiolet mogą współgrać na zdjęciu, tworząc jednocześnie słabą kombinację tekstu i tła.
Ta kontrolka sprawdza tylko tę parę kolorów pod kątem kontrastu tekstu. Nie jest to pełny audyt dostępności i nie decyduje o tym, czy typografia, interakcja klawiaturowa lub reszta projektu są użyteczne.
Przechodzący współczynnik kontrastu jest przydatnym sprawdzeniem, a nie gwarancją, że cała strona jest dostępna.
Skopiuj wartości lub wyeksportuj paletę
Aby szybko przekazać dane, skopiuj pojedynczy kod lub użyj Kopiuj kolory palety HEX. Dla pliku wybierz Zapisz jako i wybierz Start. PNG tworzy obraz palety z etykietami; SVG zachowuje próbki i etykiety jako zawartość wektorową; CSS dostarcza ponumerowane zmienne kolorów; JSON zawiera wartości HEX, RGB oraz HSL.
Niedotknięty przykład sześciu kolorów eksportuje palette.png w 600 x 500 pikselach i 9,163 bajtach. Kolejność próbek odpowiada palecie. Twoja ostateczna paleta może zawierać od 1 do 12 kolorów po edycji, nawet jeśli automatyczna liczba początkowa była inna.
Pobierz przed wyjściem lub odświeżeniem. Ostateczny eksport przesyła źródło i wybrane kolory do przetwarzania serwerowego. Tworzy nowy plik palety i nie zmienia kolorów ani nie zastępuje oryginalnego zdjęcia.
PNG i SVG to wygodne odniesienia wizualne. CSS i JSON są przydatne, gdy kolejny krok wymaga użytecznych wartości kolorów.
Często zadawane pytania
Czy próbnik kolorów zwraca te same kolory co automatyczna ekstrakcja?
Niekoniecznie. Wybrana wartość opisuje konkretny piksel źródłowy lub podglądu. Automatyczna ekstrakcja grupuje próbkowane piksele i może zwracać uśrednione kolory.
Czy przezroczyste piksele są liczone?
W pełni przezroczyste piksele są wykluczone z ekstrakcji. Częściowo przezroczyste piksele mają mniejszą wagę. Próbkowanie źródła może wykazywać przezroczystość, ale wyeksportowane próbki palety są nieprzezroczyste.
Co dzieje się z zablokowanymi kolorami po odświeżeniu?
Zablokowane kolory pozostają w palecie, podczas gdy nowe wyodrębnione kolory wypełniają pozostałe pozycje. Zachowany lub edytowany kolor nie otrzymuje przypisanego sztucznego procentu obrazu.
Czy mogę użyć tego do uzyskania dokładnego koloru marki?
Wprowadź znaną wartość HEX bezpośrednio lub wybierz odpowiedni piksel źródłowy. Oświetlenie zdjęcia, kompresja, zarządzanie kolorami i znormalizowane podglądy mogą zmieniać próbkowane wartości, więc automatyczna paleta zdjęć nie jest dowodem oryginalnej specyfikacji marki.
Stwórz paletę, którą możesz zabrać do swojego następnego projektu
Wypróbuj przykład lub użyj własnego pliku i sprawdź wynik przed udostępnieniem.
