Generator Kolorów - Palety Harmonii w HEX, RGB, HSL

Generator Kolorów - losowe kolory w HEX, RGB i HSL

Wygeneruj losowy kolor w formatach HEX, RGB i HSL jednym kliknięciem. Potrzebujesz palety do projektu graficznego, strony internetowej albo prezentacji? Generator tworzy kolory z pełnego spektrum lub z wybranego zakresu - ciemne, jasne, pastelowe, neonowe. Każdy kolor możesz skopiować w wybranym formacie i od razu użyć w CSS, Figmie czy Photoshopie.

Szybki start: (1) Kliknij "Generuj" aby wylosować kolor. (2) Skopiuj kod HEX, RGB lub HSL. (3) Wklej do swojego projektu. Chcesz paletę? Generuj kilka kolorów i zapisz ulubione.

Formaty kolorów - porównanie

Format	Przykład	Zakres wartości	Gdzie używany
HEX	#3B82F6	#000000 - #FFFFFF	CSS, HTML, Figma
RGB	rgb(59, 130, 246)	0-255 na kanał	CSS, JavaScript, Photoshop
HSL	hsl(217, 91%, 60%)	H: 0-360, S/L: 0-100%	CSS, projektowanie palet
RGBA	rgba(59, 130, 246, 0.5)	0-255 + alpha 0-1	CSS (przezroczystość)

Popularne kolory i ich kody

Kolor	HEX	RGB	HSL
Czerwony (Material)	#F44336	244, 67, 54	4, 90%, 58%
Niebieski (Tailwind 500)	#3B82F6	59, 130, 246	217, 91%, 60%
Zielony (Bootstrap)	#198754	25, 135, 84	152, 69%, 31%
Żółty (Amber)	#F59E0B	245, 158, 11	38, 92%, 50%
Fioletowy (Indigo)	#6366F1	99, 102, 241	239, 84%, 67%
Różowy (Pink)	#EC4899	236, 72, 153	330, 81%, 60%
Szary (Neutral)	#6B7280	107, 114, 128	220, 9%, 46%

Przykłady zastosowań

Strona internetowa - dobór palety: Generujesz kolor bazowy, np. #2563EB (niebieski). Na jego podstawie tworzysz odcienie: jasny (#DBEAFE) na tła, ciemny (#1E40AF) na nagłówki, bazowy na przyciski. Gotowa, spójna paleta w 3 minuty.

Logo i branding: Startup potrzebuje koloru wyróżniającego. Generujesz losowe kolory aż trafisz na ciekawy odcień, np. #7C3AED (fiolet). Zapisujesz HEX dla web, RGB dla druku, HSL do generowania wariantów jaśniejszych i ciemniejszych.

Prezentacja PowerPoint: Zamiast domyślnych kolorów szablonu, wklejasz własny HEX w ustawieniach motywu. Kolor #059669 (szmaragdowy) zamiast generycznego zielonego - prezentacja wygląda profesjonalniej.

Gra lub aplikacja mobilna: Interfejs potrzebuje koloru akcentu. Generujesz nasycone kolory z zakresu jasności 40-60% w HSL - to optymalna widoczność na białym i ciemnym tle. Np. hsl(280, 85%, 55%) to żywy fiolet działający w obu trybach.

Social media - posty i grafiki: Tworzysz serię postów w Canvie. Każdy z innym kolorem tła, ale w tej samej tonacji. Generujesz 5 kolorów pastelowych (jasność 80-90% w HSL) i masz spójną serię bez nudnej jednokolorowości.

FAQ - Najczęściej zadawane pytania

Czym się różni HEX od RGB?

To dwa sposoby zapisu tego samego koloru. HEX używa systemu szesnastkowego (00-FF dla każdego kanału), np. #FF0000 = czysty czerwony. RGB używa liczb dziesiętnych (0-255), np. rgb(255, 0, 0). Każdy kolor HEX można przeliczyć na RGB i odwrotnie. HEX jest krótszy w zapisie, RGB bardziej intuicyjny - od razu widzisz proporcje kanałów.

Kiedy używać formatu HSL?

HSL (Hue, Saturation, Lightness) jest najlepszy do tworzenia palet. Zmieniając tylko Lightness tworzysz odcienie tego samego koloru: hsl(220, 80%, 30%) to ciemny niebieski, hsl(220, 80%, 70%) to jasny niebieski. W RGB trzeba zmieniać trzy wartości naraz, co jest mniej intuicyjne. HSL jest też świetny w CSS - łatwiej animować przejścia kolorów.

Jak wygenerować kolor pastelowy?

Kolory pastelowe mają wysoką jasność i umiarkowane nasycenie. W formacie HSL ustaw Saturation na 50-70% i Lightness na 80-90%. Przykład: hsl(180, 60%, 85%) to pastelowy turkus. W RGB odpowiada to wartościom bliskim górnej granicy (180-240 na każdym kanale), ale z zachowaniem dominującego odcienia.

Ile kolorów istnieje w systemie HEX?

System HEX (24-bitowy) obsługuje dokładnie 16 777 216 kolorów (256 x 256 x 256). Każdy z trzech kanałów (R, G, B) ma 256 możliwych wartości (00-FF). Ludzkie oko rozróżnia około 10 milionów kolorów, więc system HEX pokrywa całe widoczne spektrum z zapasem. Nowsze formaty jak Display P3 oferują jeszcze szerszą gamę, ale HEX/RGB pozostają standardem w sieci.

Co to jest kontrast kolorów i dlaczego jest ważny?

Kontrast to stosunek jasności dwóch kolorów. Standard WCAG wymaga minimalnego kontrastu 4.5:1 dla tekstu i 3:1 dla dużych nagłówków. Biały tekst (#FFFFFF) na żółtym tle (#FFFF00) ma kontrast zaledwie 1.07:1 - jest nieczytelny. Ten sam biały na ciemnym niebieskim (#1E3A5F) daje kontrast 9.8:1 - idealnie czytelny. Przy wyborze kolorów zawsze sprawdzaj kontrast.

Jak stworzyć harmonijną paletę kolorów?

Najprostsze metody opierają się na kole barw (HSL): Monochromatyczna - jeden odcień (Hue), różne jasności. Komplementarna - dwa kolory naprzeciwko siebie (różnica Hue o 180). Triadyczna - trzy kolory co 120 na kole. Analogiczna - kolory obok siebie (różnica 30). Zacznij od jednego wygenerowanego koloru i oblicz resztę palety przez manipulację wartością Hue w HSL.