Generator losowych kolorów
Losowe kolory i kody do projektowania i kodu.
Kliknij kod, aby go skopiować. Kliknij kłódkę, żeby zachować kolor przy kolejnym generowaniu.
- Kody HEX, RGB albo HSL
- Palety pastelowe i ciemne
- Zablokuj kolory, wylosuj resztę
Jak wygenerować losowe kolory
- Ustaw liczbę kolorów i wybierz format kodu.
- Wybierz paletę losową, pastelową albo ciemną.
- Kliknij próbkę, aby skopiować jej kod, albo zablokuj ją przed wygenerowaniem kolejnych.
HEX, RGB i HSL porównane
Wszystkie trzy formaty opisują dokładnie ten sam kolor. To, którego potrzebujesz, zależy od tego, gdzie go wklejasz.
| Format | Wygląda jak | Najlepszy do |
|---|---|---|
| HEX | #3B82F6 | CSS, narzędzia projektowe, szybkie udostępnianie |
| RGB | rgb(59, 130, 246) | CSS, kod mieszający albo przenikający kolory |
| HSL | hsl(217, 91%, 60%) | Ręcznego dostrajania koloru: odcień, potem intensywność, potem jasność |
HSL zwykle najłatwiej dostroić samemu, bo przesunięcie liczby jasności w jedną albo drugą stronę zachowuje ten sam odcień, co w HEX i RGB trudniej zrobić na oko.
Losowa, pastelowa i ciemna, liczbowo
Każdy tryb wybiera z innego wycinka koła kolorów, a nie tylko zmienia odcień.
| Tryb | Zakres nasycenia | Zakres jasności |
|---|---|---|
| Losowa | 40 do 100% | 25 do 75% |
| Pastelowa | 35 do 60% | 75 do 88% |
| Ciemna | 35 do 70% | 12 do 28% |
Odcień jest zawsze losowany z pełnego zakresu 0 do 359 w każdym trybie, więc pastelowa i ciemna wciąż obejmują każdą rodzinę kolorów, tylko jaśniejszą albo ciemniejszą.
Do czego ludzie używają losowych kolorów
- Szybka inspiracja projektowa, kiedy utknąłeś przy wyborze koloru marki albo motywu.
- Kolory zastępcze do makiet, wykresów i szkiców interfejsu, zanim wybierze się prawdziwą paletę.
- Generowanie teł awatarów, tagów albo kolorów kategorii w aplikacji.
- Projekty artystyczne i rękodzielnicze, na przykład losowa podpowiedź koloru do codziennego szkicu.
Generator losowych kolorów: najczęstsze pytania
Jaka jest różnica między paletami?
Losowa obejmuje całe koło kolorów. Pastelowa utrzymuje miękką jasność i nasycenie dla łagodnych teł. Ciemna trzyma kolory o niskiej jasności do ciemnych motywów i kontrastowego tekstu.
Jak zachować kolor, który mi się podoba?
Kliknij ikonę kłódki na próbce. Zablokowane próbki zachowują swój kolor przy kolejnym generowaniu, więc możesz wylosować tylko resztę.
Jaka jest różnica między HEX, RGB i HSL?
HEX i RGB opisują kolor przez ilość czerwonego, zielonego i niebieskiego. HSL opisuje go przez odcień, nasycenie i jasność, co często łatwiej ręcznie dostroić.
Jak skopiować kod koloru?
Kliknij tekst kodu pod dowolną próbką, a zostanie od razu skopiowany do schowka.
Jakich zakresów faktycznie używają palety?
Losowa wybiera dowolny odcień z nasyceniem 40 do 100 procent i jasnością 25 do 75 procent. Pastelowa zawęża jasność do 75 do 88 procent. Ciemna zawęża jasność do 12 do 28 procent, z nasyceniem 35 do 70 procent, żeby kolory zostały bogate, a nie brudne.
Czy dwa losowe kolory będą dobrze wyglądać razem?
Czasami. To narzędzie wybiera kolory niezależnie, dla różnorodności i inspiracji, a nie buduje dopasowanej palety. Żeby mieć kolory gwarantowane do współgrania, wygeneruj kilka, zablokuj te, które lubisz, i losuj resztę, aż zestaw będzie pasował.
Czy mogę wygenerować tylko jeden kolor zamiast zestawu?
Tak, ustaw liczbę na 1 i kliknij Generuj, żeby otrzymać jeden losowy kolor w wybranym formacie.
Gdzie mogę użyć kodu HEX albo RGB, kiedy już go mam?
Wklej kod HEX prosto do CSS, Figmy, Photoshopa albo niemal dowolnego narzędzia projektowego. Wartości RGB i HSL działają tak samo w funkcjach CSS, takich jak rgb() i hsl().