Wyodrębnij dominujące kolory z dowolnego zdjęcia i twórz idealne harmonie projektowe eksportowalne do CSS i Tailwind.
Od wizualnej inspiracji do kodu w 3 krokach.
Wybierz dowolne zdjęcie, zrzut ekranu lub projekt, który Ci się podoba.
Nasz algorytm wyodrębnia 5 dominujących kolorów i oblicza ich harmonie (dopełniające, triady).
Kliknij, aby skopiować kod HEX, lub wyeksportuj pełną konfigurację dla Tailwind CSS.
Wszystko, czego potrzebujesz dla swojego systemu projektowego.
Nie wybieramy losowych pikseli. Identyfikujemy wizualnie dominujące tony z obrazu.
Blokada twórcza? Generuj nieskończenie wiele palet losowo z prawidłowymi harmoniami w jednym kliknięciu.
Automatycznie oblicz kolory dopełniające i analogiczne dla każdego wyodrębnionego tonu.
Skopiuj dokładny obiekt JSON do wklejenia w pliku `tailwind.config.js`.
Pobierz zmienne CSS (`:root`) gotowe do użycia w dowolnym projekcie webowym.
Analiza odbywa się w Twojej przeglądarce. Twój obraz inspiracji nigdy nie jest przesyłany do chmury.
Jak używać tych palet w swoich projektach.
Matematyczna równowaga dla ludzkiego oka.
:hover lub trybów ciemnych.Pełna kontrola nad wariantami kolorów.
Zero błędów brandingowych.
Median-cut bije k-means i naiwne uśrednianie w ekstrakcji palet.
Ładna paleta + zły kontrast = niedostępna strona.
Wybierz właściwy format dla swojego zastosowania
| Model koloru | Format | Przykład | Najlepsze do | |
|---|---|---|---|---|
| HEX | #RRGGBB | Szybkie kopiowanie/wklejanie | Ogólny projekt webowy | |
| RGB | rgb(r, g, b) | Manipulacja cyfrowa | Wyświetlacze ekranowe | |
| HSL | hsl(h, s%, l%) | Korekta odcienia | Systemy projektowe | |
| Tailwind | Obiekt JSON | Konfiguracja | Programiści frontendu |
Szybkie odpowiedzi o narzędziu
theme.extend.colors swojego pliku tailwind.config.js. Tworzy to klasy jak bg-primary lub text-accent automatycznie. --brand-primary, --brand-secondary itd. Dla maksymalnej wierności pracuj z oryginalnego źródła wektorowego (SVG), jeśli je masz, ponieważ kompresja JPG może przesunąć kolory logo o 1-2% na kanał.