Generator schematów kolorów

Obsługuje generowanie różnych schematów kolorów, pobieranie kolorów z obrazów, tworzenie gradientów CSS i efektów cienia, z możliwością przetwarzania pojedynczego koloru lub wsadowo.

Zgłoszenie błędu

Tryb wykonywania w przeglądarce: Twoje dane są przetwarzane w przeglądarce i nie są przesyłane na serwer.

Szybkość i stabilność: Szybkość przetwarzania zależy od urządzenia i przeglądarki. Przy dużych zadaniach wsadowych wersja desktopowa może być stabilniejsza.

Ładowanie narzędzia, czekaj...

Jeśli narzędzie online nie ładuje się lub nie działa, wypróbuj narzędzie desktopowe. https://tools.yikeaigc.com/

Użycie narzędzia

Wróć do starej wersji

Tryb jednokolorowy

Pobieranie kolorów zbiorczo

1Wybierz kolor bazowy

RGB: 2, 132, 199 HSL: 243°, 75%, 59%

2Wybierz schemat kolorów

Liczba kolorów:

Regulacja nasycenia: 0%

Regulacja jasności: 0%

3Schemat kolorów

4Gradient CSS

Typ gradientu:

Kąt: 90°

5Efekt cienia

Promień rozmycia: 20px

Promień rozszerzenia: 0px

Przezroczystość: 40%

Podgląd efektu

6Wyodrębnij kolory z obrazu

Kliknij, aby przesłać, lub przeciągnij obraz tutaj

Obsługuje formaty JPG, PNG, GIF, WebP

1Prześlij wiele obrazów

Kliknij, aby przesłać, lub przeciągnij tu wiele obrazów

Obsługa wyboru wielu plików; z każdego obrazu zostanie wyodrębniony kolor główny

Kolorów na obraz:

Schemat kolorów:

Skopiowano do schowka

'; zip.file('preview.html', htmlContent); const content = await zip.generateAsync({ type: 'blob' }); const link = document.createElement('a'); link.href = URL.createObjectURL(content); const timestamp = new Date().toISOString().replace(/[-:.]/g, '').slice(0, 15); link.download = `color-palettes-${timestamp}.zip`; link.click(); downloadBatchZip.disabled = false; batchStatus.textContent = 'ZIP文件已下载'; }); // ========== 导出功能 ========== document.getElementById('exportPaletteBtn').addEventListener('click', function() { if (currentPalette.length === 0) return; const data = { baseColor: baseColorPicker.value, scheme: currentScheme, colors: currentPalette.map(c => ({ hex: c.hex, rgb: `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`, hsl: `hsl(${Math.round(c.hsl.h)}, ${Math.round(c.hsl.s)}%, ${Math.round(c.hsl.l)}%)` })), gradient: gradientCode.textContent, shadow: shadowCode.textContent }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `color-palette-${baseColorPicker.value.replace('#', '')}.json`; link.click(); showCopyToast('配色方案已导出'); }); // ========== 初始化 ========== schemeDescription.textContent = schemeDescriptions['monochromatic']; updateColorDisplay(); updatePalette(); });

Instrukcje

Instrukcja użytkowania oprogramowania

Wybierz kolor bazowy: Użyj selektora kolorów, aby wybrać kolor bazowy, lub wpisz bezpośrednio wartość HEX (np. #4f46e5). Możesz też kliknąć przycisk „Losowy kolor”, aby znaleźć inspirację. Narzędzie wyświetla w czasie rzeczywistym informacje o wartościach RGB i HSL.
Wybierz schemat kolorów:
- Kolory monochromatyczne: Ten sam odcień, z wariacjami uzyskanymi przez zmianę nasycenia i jasności
- Kolory analogiczne: Sąsiadujące kolory na kole barw, naturalne i łagodne
- Kolory dopełniające: Dwa przeciwległe kolory na kole barw, o silnym kontraście
- Rozdzielone kolory dopełniające: Kolor bazowy oraz kolory po obu stronach jego koloru dopełniającego
- Triada kolorów: Trzy kolory rozmieszczone równomiernie na kole barw
- Kolory tetradyczne: Cztery kolory rozmieszczone równomiernie
- Kolory czwórkowe: Dwie pary kolorów dopełniających, o wyraźnych poziomach
Dostosuj parametry:
- Liczba kolorów: Wybierz wygenerowanie 3, 5, 7 lub 9 kolorów
- Dostosowanie nasycenia: Przesuń suwak, aby zwiększyć lub zmniejszyć ogólne nasycenie
- Dostosowanie jasności: Przesuń suwak, aby zwiększyć lub zmniejszyć ogólną jasność
Generuj gradient CSS: Wybierz typ gradientu liniowego lub radialnego, dostosuj parametr kąta i wygeneruj gotowy do użycia kod gradientu CSS.
Generuj efekt cienia: Dostosuj promień rozmycia, promień rozszerzenia i przezroczystość, aby wygenerować kod CSS cienia na podstawie bieżącego koloru bazowego.
Wyodrębnij kolory z obrazu: Po przesłaniu obrazu narzędzie automatycznie wyodrębni kolory dominujące. Możesz kliknąć dowolne miejsce na obrazie, aby precyzyjnie pobrać kolor i zastosować go jako kolor bazowy.
Tryb zbiorowego pobierania kolorów: Przełącz się na kartę „Zbiorowe pobieranie kolorów”, prześlij wiele obrazów, ustaw liczbę kolorów wyodrębnianych z każdego obrazu oraz tryb rozszerzenia schematu kolorów, kliknij rozpoczęcie zbiorowego wyodrębniania, a po zakończeniu pobierz ZIP zawierający wszystkie wyniki.
Kopiowanie i eksport: Kliknij dowolną kartę koloru, aby skopiować wartość koloru, lub kliknij przycisk „Eksportuj schemat kolorów”, aby pobrać plik JSON zawierający pełne informacje o palecie.

Najczęściej zadawane pytania

Odpowiedź: Kolory monochromatyczne nadają się do prostych, eleganckich projektów; kolory analogiczne sprawdzają się w motywach naturalnych i tłach gradientowych; kolory dopełniające są odpowiednie do wyrazistych projektów wymagających silnego kontrastu; triada kolorów pasuje do żywych produktów dla dzieci i twórczości artystycznej; kolory tetradyczne i czwórkowe sprawdzają się w złożonych interfejsach i wizualizacji danych. Wybierz odpowiedni schemat zgodnie z celem projektu.

Odp.: Prześlij obraz w sekcji „Wyodrębnij kolory z obrazu”, a narzędzie automatycznie przeanalizuje go i wyodrębni 8 głównych odcieni. Możesz kliknąć wyodrębniony kolor, aby go wybrać, a następnie kliknąć przycisk „Użyj wybranego koloru jako koloru bazowego”, aby wygenerować pełny schemat kolorów na jego podstawie.

Odp.: Kliknij przycisk „Kopiuj” w obszarze kodu gradientu, wklej kod do swojego pliku CSS i zastosuj go do elementu, który ma mieć tło gradientowe. Obsługiwane są dwa typy: gradient liniowy i gradient radialny; w przypadku gradientu liniowego można dostosować kąt i kierunek.

Odp.: Plik ZIP pobrany po zakończeniu przetwarzania zbiorowego zawiera trzy pliki: palette-summary.json (zbiorcze podsumowanie wszystkich danych kolorystycznych w formacie JSON), palettes.css (gotowe do użycia definicje zmiennych CSS), preview.html (strona podglądu wizualnego). Ułatwia to korzystanie z wyodrębnionych schematów kolorów w różnych scenariuszach.

Odp.: Nasycenie kontroluje intensywność koloru — zwiększenie nasycenia sprawia, że kolory są bardziej żywe, a zmniejszenie czyni je łagodniejszymi i bardziej przygaszonymi; jasność kontroluje poziom rozjaśnienia lub przyciemnienia koloru — zwiększenie jasności sprawia, że kolor jest jaśniejszy, a zmniejszenie czyni go ciemniejszym. Dostosowując te dwa parametry, można precyzyjnie dopracować ogólny efekt kolorystyczny.

Odp.: Obsługiwane są popularne formaty obrazów, takie jak JPG, JPEG, PNG, GIF, WebP itp. Zaleca się używanie obrazów o bogatej kolorystyce i wysokim kontraście, aby uzyskać dokładniejsze wyniki wyodrębniania kolorów dominujących. Przetwarzanie obrazu odbywa się całkowicie lokalnie i nie jest przesyłane na serwer.

Odp.: Wystarczy kliknąć dowolną kartę koloru lub próbkę koloru, a odpowiadająca jej wartość HEX zostanie automatycznie skopiowana do schowka. U dołu strony pojawi się komunikat „Skopiowano do schowka”. W wynikach zbiorczych również wystarczy kliknąć pasek koloru, aby skopiować odpowiadającą mu wartość koloru.