Generator losowych kolorów

Losowe kolory

Wygeneruj świeży zestaw losowych kodów kolorów HEX z 24-bitowego zakresu sRGB. Wybierz liczbę próbek, od razu zobacz każdy kolor i skopiuj kody do CSS, notatek projektowych, fixture QA albo prób palety.

Jak wygenerować losowe kolory HEX

  1. 1

    Wybierz liczbę

    Wpisz dowolną liczbę od 1 do 50, zależnie od tego, ile próbek chcesz przejrzeć.

  2. 2

    Wygeneruj próbki

    Każdy wynik to sześciocyfrowy kod HEX w formacie #RRGGBB, z osobnymi wartościami kanałów czerwonego, zielonego i niebieskiego.

  3. 3

    Kopiuj i testuj

    Zachowaj kolory, które Ci pasują, sprawdź kontrast przed użyciem ich z tekstem i konwertuj do RGB lub HSL tylko wtedy, gdy wymaga tego Twój proces.

Co tworzy generator

Każdy kod reprezentuje 24-bitowy kolor sRGB: 8 bitów dla czerwieni, 8 dla zieleni i 8 dla niebieskiego. Daje to 16 777 216 możliwych wartości HEX, od #000000 do #FFFFFF. Narzędzie pokazuje próbkę i kod; nie nadaje kolorom nazw, nie ocenia ich i nie gwarantuje czytelności.

Jak czytać kolor HEX

Część Znaczenie Zakres
# Znacznik koloru CSS Stały prefiks
RR Kanał czerwony od 00 do FF
GG Kanał zielony od 00 do FF
BB Kanał niebieski od 00 do FF

Praktyczne zastosowania

  • Szkicowanie stanów UI, akcentów na wykresach lub tymczasowych grafik, gdy ostateczny kolor nie jest jeszcze ustalony.
  • Zbudowanie palety startowej, a potem odrzucenie kolorów zbyt podobnych, zbyt ciemnych albo zbyt krzykliwych.
  • Tworzenie danych testowych do CSS, SVG, canvas i przykładów w systemach projektowych.

Zanim użyjesz losowego koloru produkcyjnie

Losowy kolor jest tylko punktem wyjścia. Dla tekstu, przycisków i kontrolek sprawdź go względem koloru pierwszego planu lub tła. WCAG AA wymaga współczynnika kontrastu 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. W pracy z marką lub drukiem oceń kolor na skalibrowanych ekranach i konwertuj go osobno do druku.

Najczęściej zadawane pytania

Losowy HEX obejmuje wszystkie wartości kanałów, więc wiele wyników nie będzie wyglądać jak dopracowane kolory palety. Wygeneruj większy zestaw i zostaw próbki z odpowiednim kontrastem oraz nasyceniem.

To narzędzie tworzy niezależne kolory losowe. Jeśli potrzebujesz spójniejszej palety, użyj generatora palet albo ręcznie trzymaj się jednej rodziny barw, dobierając jaśniejsze i ciemniejsze warianty.

W tym narzędziu nie ma kontroli seed. Skopiuj kody HEX, które chcesz zachować, aby móc użyć ich później ponownie.

Tak. Sześciocyfrowe wartości HEX #RRGGBB to standardowa składnia kolorów CSS, działająca między innymi w color, background-color, obramowaniach, gradientach i wypełnieniach SVG.

Nie bez sprawdzenia kontrastu. Losowa próbka łatwo może nie spełnić wymagań WCAG, szczególnie jako tło dla małego tekstu lub lekkiego kroju pisma.

Powiązane narzędzia