Strona główna› Generatory› Generator kolorów

Generator kolorów i palet z konwerterem HEX, RGB i HSL

Losuj palety po 5 kolorów w pięciu trybach harmonii, zatrzymuj kłódką kolory, które Ci pasują, zamieniaj zapis HEX na RGB i HSL i sprawdzaj kontrast tekstu według WCAG. Wszystko liczy się w Twojej przeglądarce, żaden kolor nie jest wysyłany na serwer.

🎨 Paleta kolorów

Skrót: spacja losuje nową paletę, gdy kursor nie stoi w polu tekstowym. Kłódka zatrzymuje kolor przy kolejnych losowaniach, a kliknięcie w próbkę otwiera kolor w konwerterze poniżej.

Paleta jako zmienne CSS

        
🔒 Prywatność: paleta, konwersje i kontrast liczą się w całości w Twojej przeglądarce. Nic nie jest wysyłane ani zapisywane na serwerze, kolory trafiają tylko do adresu strony, żeby dało się zapisać stan albo wysłać link.

      


      

        
🔁 Konwerter HEX, RGB i HSL

        
        

          
          
          
        

        
        

          
          

            
HEX–

            
RGB–

            
HSL–

            

            

              
            

          

        

        

      


      

        
♿ Kontrast kolorów WCAG

        

          

            
            

              
              
              
            

          

          

            
            

              
              
              
            

          

        

        

          
        

        
        

          
Zwykły tekst 16 px: Zażółć gęślą jaźń.

          
Duży tekst 24 px: Zażółć gęślą jaźń.

        

        
Kontrast: –

        

          

            
Kryterium WCAGPrógWynik

            
              
AA, zwykły tekst (1.4.3)4,5:1–

              
AA, duży tekst (1.4.3)3:1–

              
AAA, zwykły tekst (1.4.6)7:1–

              
AAA, duży tekst (1.4.6)4,5:1–

              
AA, elementy interfejsu i grafika (1.4.11)3:1–

            
          

        

        
Wynik jest obcinany do dwóch miejsc po przecinku, nie zaokrąglany w górę: 4,499:1 to wciąż za mało na AA.

        

      


      

        Generator kolorów i palet – HEX, RGB, HSL i kontrast WCAG – przykład działania: przed i po
        
Czym różni się HEX, RGB i HSL?

        
Wszystkie trzy zapisy opisują ten sam kolor w przestrzeni sRGB, zmienia się tylko sposób podania liczb. Najłatwiej to zobaczyć na jednym kolorze, morskiej zieleni z przykładowej palety:

        

          

            
FormatZapisCo oznaczają liczby

            
              
HEX#2A9D8Ftrzy pary cyfr szesnastkowych od 00 do FF: czerwony 2A, zielony 9D, niebieski 8F

              
RGBrgb(42, 157, 143)te same składowe w systemie dziesiętnym, od 0 do 255

              
HSLhsl(173, 58%, 39%)odcień na kole barw w stopniach, nasycenie i jasność w procentach

            
          

        

        
HEX to zwykły zapis szesnastkowy: 2A to 2 × 16 + 10 = 42, dlatego w RGB stoi 42. Pojedyncze składowe przeliczysz też ręcznie w konwerterze systemów liczbowych. Skrócony zapis z trzema cyframi podwaja każdą z nich, więc #F80 to #FF8800. HSL jest najwygodniejszy przy projektowaniu: jaśniejszą wersję koloru dostajesz, zmieniając tylko ostatnią liczbę, a odcień zostaje ten sam. Przy przeliczaniu na HSL wartości są zaokrąglane do pełnych stopni i procentów, dlatego powrót z hsl(173, 58%, 39%) daje #2A9D90, a nie #2A9D8F. Jeśli potrzebujesz koloru co do bitu, trzymaj się zapisu HEX albo RGB.


        
Jak dobierać kolory, które do siebie pasują?

        
Harmonie opisuje się na kole barw, czyli okręgu 360° z odcieniami ułożonymi jak w tęczy: czerwony leży na 0°, zielony na 120°, niebieski na 240°. Generator buduje palety według pięciu reguł:

        
    
          
  • Komplementarna: kolor bazowy i jego przeciwieństwo przesunięte o 180°, np. lazurowy niebieski (210°) i pomarańczowy (30°). Mocny kontrast, dobry na przycisk, który ma przyciągać wzrok.
    • 
          
  • Analogiczna: sąsiednie odcienie co około 22°, np. od turkusu do zieleni. Spokojna i naturalna, sprawdza się w tłach i ilustracjach.
    • 
          
  • Triada: trzy odcienie co 120°. Żywa i zrównoważona, zwykle jeden z kolorów trzeba stonować.
    • 
          
  • Monochromatyczna: jeden odcień w pięciu jasnościach. Bezpieczny wybór do interfejsów, wykresów i prezentacji.
    • 
          
  • Losowa: pięć niezależnych kolorów, przydatna przy szukaniu inspiracji.
    • 
        

        
Masz już kolor firmowy? Wpisz go w konwerterze i kliknij „Dodaj do palety i zablokuj”. Tryby harmonii biorą pierwszy zablokowany kolor za bazę, więc każde losowanie dobiera resztę palety do Twojego koloru. Przy rozkładzie kolorów na stronie pomaga zasada 60-30-10: 60% powierzchni zajmuje kolor dominujący (najczęściej jasne tło), 30% kolor uzupełniający, a 10% akcent, np. przyciski i linki.


        
Jakiego kontrastu tekstu wymaga WCAG?

        
WCAG liczy kontrast z luminancji względnej obu kolorów. Każdą składową dzieli się przez 255, wartości do 0,04045 dzieli się przez 12,92, a wyższe przekształca wzorem ((c + 0,055) / 1,055)2,4. Potem składowe sumuje się z wagami 0,2126 dla czerwonego, 0,7152 dla zielonego i 0,0722 dla niebieskiego. Współczynnik kontrastu to (L1 + 0,05) / (L2 + 0,05), gdzie L1 to luminancja jaśniejszego koloru. Wynik mieści się między 1:1 a 21:1.

        

          

            
PoziomZwykły tekstDuży tekst

            
              
AA (kryterium 1.4.3)4,5:13:1

              
AAA (kryterium 1.4.6)7:14,5:1

            
          

        

        
Duży tekst to co najmniej 18 punktów (24 px) albo 14 punktów przy pogrubionym kroju (około 18,7 px). Ramki pól formularza, ikony i elementy wykresów potrzebują co najmniej 3:1 względem sąsiednich kolorów (kryterium 1.4.11). Kilka wyników z kalkulatora powyżej:

        

          
#767676 na #FFFFFF
→
4,54:1, najjaśniejszy szary, który przechodzi AA dla zwykłego tekstu

          
#777777 na #FFFFFF
→
4,47:1, o jeden odcień jaśniej i AA już nie przechodzi

          
#2A9D8F na #FFFFFF
→
3,32:1, wystarczy tylko dla dużego tekstu i przycisków

          
#264653 na #FFFFFF
→
10,07:1, spełnia nawet AAA

        

        
Ta sama zasada działa poza ekranem: kod z generatora kodów QR skanuje się najpewniej, gdy ciemne moduły leżą na jasnym tle z dużym kontrastem.

        
Źródło danych: Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation z 12 grudnia 2024 r., definicje „relative luminance” i „contrast ratio” oraz kryteria 1.4.3, 1.4.6 i 1.4.11, stan na 2 października 2026 r.


        
Przykłady gotowych palet

        
Każdą paletę otworzysz w generatorze jednym kliknięciem, a potem zablokujesz wybrane kolory i dolosujesz resztę.

        

          

            
PaletaPodglądKody HEX

            
              
Piasek i morze
#264653 #2A9D8F #E9C46A #F4A261 #E76F51

              
Leśna zieleń
#1B4332 #2D6A4F #40916C #95D5B2 #D8F3DC

              
Granat z czerwonym akcentem
#1D3557 #457B9D #A8DADC #F1FAEE #E63946

              
Pastele
#FFADAD #FFD6A5 #FDFFB6 #CAFFBF #9BF6FF

            
          

        

        
Pastele dobrze sprawdzają się jako tła, ale tekst na nich musi być ciemny: biały napis na #FDFFB6 ma kontrast zaledwie 1,04:1.


        
Checklista przed wdrożeniem kolorów

        
    
          
  • Tekst główny ma co najmniej 4,5:1 do swojego tła, także na kolorowych kartach i banerach.
    • 
          
  • Nagłówki od 24 px mogą mieć 3:1, ale bezpieczniej trzymać 4,5:1 i dla nich.
    • 
          
  • Ramki pól, ikony i przyciski bez tekstu mają co najmniej 3:1 do otoczenia.
    • 
          
  • Kolor nie jest jedynym nośnikiem informacji: błąd w formularzu oznacz też ikoną lub komunikatem.
    • 
          
  • Paleta siedzi w zmiennych CSS (--kolor-1 do --kolor-5), a nie w kodach wklejonych w dziesięciu miejscach.
    • 
        

        
Kolory to połowa wyglądu napisu, drugą jest krój pisma. Ozdobne warianty liter do bio i postów znajdziesz w generatorze czcionek.

      

    

    

      

        
Podobne narzędzia

        
      

      

        
Progi kontrastu WCAG

        
    
          
  • AA, zwykły tekst: 4,5:1
    • 
          
  • AA, duży tekst: 3:1
    • 
          
  • AAA, zwykły tekst: 7:1
    • 
          
  • AAA, duży tekst: 4,5:1
    • 
          
  • Elementy interfejsu: 3:1
    • 
        

      

    

  




  
Najczęściej zadawane pytania (FAQ)

    

      
      
Wybierz tryb harmonii (losowa, komplementarna, analogiczna, triada albo monochromatyczna) i kliknij „Losuj” lub naciśnij spację. Generator pokaże 5 kolorów z kodami HEX. Kolor, który chcesz zatrzymać, zablokuj kłódką, a przy kolejnym losowaniu zmienią się tylko pozostałe.

    

    

      
      
Kod HEX to trzy pary cyfr szesnastkowych: pierwsza para to czerwony, druga zielony, trzecia niebieski. Każdą parę zamieniasz na liczbę dziesiętną, np. #2A9D8F to 2A = 42, 9D = 157, 8F = 143, czyli rgb(42, 157, 143). W konwerterze wystarczy wkleić kod, a RGB i HSL pojawią się od razu.

    

    

      
      
HEX i RGB zapisują te same trzy składowe (czerwony, zielony, niebieski), tylko HEX w systemie szesnastkowym, a RGB w dziesiętnym od 0 do 255. HSL opisuje kolor inaczej: odcieniem na kole barw w stopniach, nasyceniem i jasnością w procentach. Dzięki temu w HSL łatwo zrobić jaśniejszą lub ciemniejszą wersję tego samego koloru.

    

    

      
      
Poziom AA wymaga kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego. Poziom AAA podnosi progi do 7:1 dla zwykłego i 4,5:1 dla dużego tekstu. Ramki pól, ikony i inne elementy interfejsu potrzebują co najmniej 3:1 względem sąsiednich kolorów.

    

    

      
      
Duży tekst to co najmniej 18 punktów, czyli 24 px, albo co najmniej 14 punktów przy pogrubionym kroju, czyli około 18,7 px. Dla takiego tekstu wystarczy kontrast 3:1 na poziomie AA i 4,5:1 na poziomie AAA.

    

    

      
      
Dla każdego koloru liczy się luminancję względną: składowe RGB dzieli się przez 255, linearyzuje i sumuje z wagami 0,2126, 0,7152 i 0,0722. Współczynnik to (L1 + 0,05) / (L2 + 0,05), gdzie L1 to jaśniejszy kolor. Czarny na białym daje maksymalne 21:1, a dwa identyczne kolory 1:1.

    

    

      
      
Dobrze współgrają kolory dobrane według koła barw: przeciwległe (komplementarne, 180°), sąsiednie (analogiczne, co około 20–30°), trzy odcienie co 120° (triada) albo jeden odcień w kilku jasnościach (paleta monochromatyczna). Generator buduje palety według każdej z tych reguł.

    

    

      
      
Kliknij „Kopiuj jako CSS”. Do schowka trafi blok :root ze zmiennymi od --kolor-1 do --kolor-5, który wklejasz na początek arkusza stylów i używasz jako var(--kolor-1). Pojedynczy kod skopiujesz przyciskiem „Kopiuj” pod próbką albo w konwerterze.