Losowanie koloru

Losowanie koloru działa na dwa sposoby. W pierwszym losujesz kolor z nazwą, taką jak czerwony, turkusowy czy musztardowy. Przydaje się to w grach i zabawach, w wyzwaniach rysunkowych, przy wyborze koloru drużyny albo wtedy, gdy dziecko pyta, jakiego koloru ma być rysowany kot. Wynik pojawia się na dużej próbce, którą łatwo pokazać innym.

W drugim sposobie losujesz dowolny kolor spośród ponad 16 milionów i dostajesz jego kod HEX, RGB i HSL. Generator podaje też kontrast z bielą i czernią, najbliższą nazwę z listy i proponuje schemat pasujących kolorów. Jeśli potrzebujesz od razu całej palety do projektu, skorzystaj z generatora palety kolorów.

1. Wybierz, co chcesz losować: Nazwę koloru albo Dowolny kolor.
2. Przy nazwach wybierz zestaw: 12 kolorów podstawowych albo 40 kolorów z zestawu rozszerzonego. Ustaw, ile kolorów chcesz wylosować naraz, od 1 do 6.
3. Kliknij Losuj kolor. Przez chwilę przewiną się różne kolory, a potem pojawi się wynik.
4. Wynik skopiujesz przyciskiem Kopiuj. Przy nazwach skopiują się nazwy kolorów, przy dowolnym kolorze kod HEX.

W trybie dowolnego koloru możesz też wpisać własny kod HEX albo wybrać kolor z próbnika. Każdy zapis, HEX, RGB i HSL, skopiujesz osobno ikoną obok niego. Pod wynikiem zbierają się ostatnie wylosowane kolory. Kliknięcie w kółko pokazuje kolor ponownie.

Zestaw podstawowy to kolory, które większość osób nazwie bez wahania. Zestaw rozszerzony dodaje odcienie znane z ubrań, farb i wnętrz. Kod HEX przy nazwie to jeden przykładowy odcień, bo każda nazwa obejmuje cały zakres barw: granatowy może być jaśniejszy albo ciemniejszy.

Podstawowe (12)

• Czerwony #e53935
• Pomarańczowy #fb8c00
• Żółty #fdd835
• Zielony #43a047
• Niebieski #1e88e5
• Granatowy #1a237e
• Fioletowy #8e24aa
• Różowy #ec407a
• Brązowy #795548
• Szary #9e9e9e
• Czarny #212121
• Biały #ffffff

Dodatkowe w zestawie rozszerzonym (28)

• Bordowy #7b1e3a
• Amarantowy #e52b50
• Malinowy #c2185b
• Fuksja #e91e8c
• Koralowy #ff7f50
• Łososiowy #fa8072
• Brzoskwiniowy #ffcba4
• Miedziany #b87333
• Złoty #d4af37
• Musztardowy #d8a31a
• Beżowy #e8d8b8
• Kremowy #fff8e1
• Khaki #b5a36a
• Oliwkowy #808000
• Limonkowy #c0ca33
• Miętowy #98ddc0
• Szmaragdowy #1b9e77
• Butelkowa zieleń #0b5d3b
• Morski #2a9d8f
• Turkusowy #26c6da
• Błękitny #81d4fa
• Lazurowy #007fff
• Indygo #3f2a8c
• Lawendowy #b39ddb
• Liliowy #c8a2c8
• Śliwkowy #6a2c5a
• Grafitowy #3c4048
• Srebrny #c0c0c0

Jeśli potrzebujesz innego zestawu, na przykład tylko czterech kolorów z maty do Twistera, czyli czerwonego, żółtego, niebieskiego i zielonego, wpisz je do koła fortuny. Tam losujesz z dowolnej własnej listy.

Gry i zabawy

Wylosowany kolor może wyznaczyć zadanie: znajdź w pokoju trzy rzeczy w tym kolorze, wymień owoc tego koloru albo stań na polu tej barwy. Kolor przyda się też do podziału na drużyny i oznaczenia pionków w grze, którą wymyślacie sami. Dzieciom łatwiej pokazać dużą próbkę niż przeczytać nazwę, więc wynik widać z daleka.

Rysowanie i wyzwania plastyczne

Popularne wyzwanie polega na narysowaniu postaci tylko w wylosowanych kolorach. Ustaw liczbę kolorów na trzy albo cztery i losuj z zestawu rozszerzonego, a ograniczenie podsunie zestawienia, które inaczej nie przyszłyby do głowy. To samo działa przy dobieraniu włóczki, koralików albo kolorów do kolorowanki.

Projektowanie

Przypadkowy kolor HEX bywa dobrym punktem wyjścia, gdy nie wiesz, od czego zacząć. Schemat pod wynikiem pokaże kolory, które z nim współgrają, a wartości kontrastu powiedzą, czy na takim tle da się czytać tekst. Kliknięcie próbki w schemacie ustawia ją jako nowy kolor, więc możesz przejść od jednego koloru do kolejnych.

Kolor na ekranie składa się z trzech świateł: czerwonego, zielonego i niebieskiego. Każde ma 256 poziomów jasności, od 0 do 255. Wszystkich kombinacji jest 256 × 256 × 256, czyli 16 777 216. Generator losuje jedną liczbę z tego zakresu i zapisuje ją szesnastkowo, co daje sześć znaków kodu HEX.

const n = Math.floor(Math.random() * 0x1000000); // od 0 do 16 777 215
const hex = '#' + n.toString(16).padStart(6, '0');

Każdy kolor ma tę samą szansę. Nie znaczy to jednak, że każdy rodzaj barwy wypada równie często. Kolorów bardzo jasnych, bardzo ciemnych i czystych jest w tej przestrzeni stosunkowo mało, więc losowanie często daje kolory przygaszone i średnio jasne. Liczby losowe pochodzą z funkcji Math.random wbudowanej w przeglądarkę, a cały wynik powstaje na Twoim urządzeniu.

To trzy zapisy tego samego koloru. Oto niebieski z zestawu podstawowego w każdym z nich:

HEX jest najkrótszy, dlatego najczęściej spotkasz go w CSS i programach graficznych. RGB łatwiej odczytać, bo widać od razu, która składowa przeważa. HSL przydaje się, gdy chcesz zmienić kolor w przewidywalny sposób: zmiana samej jasności daje jaśniejszą albo ciemniejszą wersję tego samego odcienia.

Schemat to kilka kolorów dobranych według ich położenia na kole barw. Generator buduje go z wylosowanego koloru, zmieniając w zapisie HSL odcień albo jasność:

• Komplementarny: kolor i jego przeciwieństwo, przesunięte o 180°, w kilku jasnościach. Daje mocny kontrast, dobry do wyróżnienia jednego elementu.
• Triada: trzy kolory co 120°. Paleta jest żywa, ale zrównoważona.
• Analogiczny: sąsiedzi na kole, co 15°. Kolory łagodnie przechodzą jeden w drugi.
• Monochromatyczny: jeden odcień w pięciu jasnościach. Spokojny i spójny, dobry na tła i interfejsy.

Koło barw w HSL to koło ekranowe, oparte na czerwieni, zieleni i niebieskim. Różni się od koła malarskiego, którego uczy się w szkole. Dlatego kolorem komplementarnym do czerwieni jest tu turkusowy cyjan, a nie zieleń, jak przy mieszaniu farb.

Przy każdym dowolnym kolorze generator podaje kontrast z bielą i z czernią. To stosunek jasności dwóch kolorów liczony według wytycznych dostępności WCAG, od 1:1 dla dwóch identycznych barw do 21:1 dla czerni na bieli.

Zwykły tekst powinien mieć z tłem kontrast co najmniej 4,5:1, a duży tekst co najmniej 3:1. Jeśli kontrast z białym wynosi na przykład 2,8:1, a z czarnym 7,5:1, na tym kolorze pisz czarną czcionką. Generator sam stosuje tę zasadę: napis na próbce jest biały albo ciemny, zależnie od tego, który kontrast jest wyższy.