Przejdź do treści głównejPrzejdź do kalkulatora
108 kalkulatorówWyniki na żywoRozwiązania krok po kroku

Narzędzie Rechnerpilot

Generator kolorów

Twórz losowe kolory z wartościami HEX, RGB i HSL do projektowania i testów – lokalnie w przeglądarce.

Generatory

Kliknij „Generuj”, aby utworzyć kolory.

Wyjaśnienie

Jak działa Generator kolorów

Generator kolorów tworzy losowe kolory. Dla każdego koloru losowane są trzy wartości dla czerwonego, zielonego i niebieskiego (każda 0–255), a z nich obliczane są popularne notacje HEX, RGB i HSL. HSL opisuje ten sam kolor poprzez odcień, nasycenie i jasność oraz ułatwia celowe korekty.

Generowanie odbywa się lokalnie w przeglądarce za pomocą Math.random. Kolory są całkowicie losowe i niesprawdzone pod kątem kontrastu ani dostępności.

Ograniczenia tego narzędzia

  • Brak sprawdzania kontrastu lub WCAG.
  • Brak harmonii palety (dopełniająca, monochromatyczna itp.).
  • Math.random — nie do celów bezpieczeństwa.

Źródła

  • CSS Color Module: Definicja notacji HEX, RGB i HSL.

Praktyka

Przykłady praktyczne

Paleta kolorów

Osiem losowych kolorów jako punkt wyjścia do projektowego moodboardu.

HEX dla CSS

Wartości HEX można stosować bezpośrednio w CSS lub narzędziach projektowych.

Zrozumieć HSL

HSL pokazuje odcień, nasycenie i jasność — przydatne do precyzyjnych korekt.

FAQ

Często zadawane pytania

Jak tworzone są kolory?

Dla każdego koloru losowane są trzy wartości (czerwony, zielony, niebieski, każda 0–255) za pomocą Math.random, a z nich obliczane są reprezentacje HEX, RGB i HSL.

Czy kolory są dostępne/o wysokim kontraście?

Nie. Kolory są całkowicie losowe i niesprawdzone pod kątem kontrastu, czytelności ani zgodności z WCAG. Kontrast trzeba zapewnić osobno.

Czy HEX, RGB i HSL przedstawiają ten sam kolor?

Tak. Trzy wartości opisują ten sam kolor w różnej notacji; HSL obliczane jest z wartości RGB i przy tym zaokrąglane.

Czy kolory są zapisywane?

Nie. Kolory są tworzone w przeglądarce i losowane od nowa przy każdym kliknięciu. Nie następuje żaden zapis.

Wskazówki

Warto wiedzieć

  • HEX nadaje się bezpośrednio do CSS i większości narzędzi projektowych.
  • HSL ułatwia celowe dostosowanie jasności i nasycenia.
  • Losowe kolory nie są sprawdzane pod kątem kontrastu.

Powiązane kalkulatory

Więcej narzędzi