Softonic

Próbnik kolorów HEX

Krok 1 / 4 HEX colour picker

Popularne presety

Wybierz kolor za pomocą wizualnego próbnika przeglądarki albo wpisz trzy- lub sześciocyfrową wartość HEX. Narzędzie obliczy RGB, HSL, przybliżone CMYK, luminancję względną oraz dokładny kontrast względem bieli i czerni. Kolor jest przetwarzany w tej przeglądarce i nie trafia do adresu URL kroków.

Jak wybrać kolor

  1. 1

    Zacznij od próbki lub próbnika

    Wybierz przykładowy kolor albo otwórz wbudowany próbnik kolorów przeglądarki.

  2. 2

    Wpisz dokładną wartość HEX

    Podaj trzy cyfry, na przykład #F60, albo sześć, jak #FF6600. Krótki zapis zostanie poprawnie rozwinięty.

  3. 3

    Sprawdź obliczone formaty

    Zobacz razem HEX, RGB, HSL, przybliżone CMYK i względną luminancję sRGB.

  4. 4

    Sprawdź kontrast i skopiuj

    Porównaj kolor z bielą i czernią, a następnie skopiuj potrzebny zapis HEX, RGB lub HSL.

Zapisy kolorów w praktyce

Każdy model koloru odpowiada na nieco inne pytanie.

Wykaz notacji

Notacja Składniki Gdzie się jej używa
HEX #RRGGBB CSS, narzędzia projektowe, księgi marki
RGB czerwony 0–255, zielony 0–255, niebieski 0–255 CSS rgb(), edytory obrazów
HSL barwa 0–360°, nasycenie %, jasność % CSS hsl(), systemy projektowe
CMYK cyjan %, magenta %, żółty %, key/czarny % Druk, przygotowanie do druku

Kontrast dostępności

WCAG 2.2 definiuje minimalne współczynniki kontrastu między tekstem a tłem:

  • AA dla tekstu zwykłego: ≥ 4,5:1
  • AA dla dużego tekstu (18 pt lub 14 pt pogrubiony): ≥ 3:1
  • AAA dla tekstu zwykłego: ≥ 7:1

Próbnik wylicza współczynnik względem bieli i względem czerni w czasie rzeczywistym. Jeśli ważny jest niestandardowy kolor pierwszego planu, sprawdź każdą parę kolorów w dedykowanym testerze kontrastu.

Wskazówki

  • HEX jest domyślny w większości narzędzi projektowych, ale skrócony trzyznakowy hex (#F60) odpowiada #FF6600, a nie #F06060.
  • HSL jest wygodniejszy do budowania palet: zablokuj barwę i zmieniaj jasność, aby tworzyć jaśniejsze i ciemniejsze odmiany.
  • CMYK i RGB nie dają się idealnie przeliczyć między sobą, druk CMYK zależy od profilu maszyny drukarskiej. Zawsze sprawdzaj próbę na prawdziwym papierze.
  • Jeśli projektujesz dla nowoczesnego CSS, rozważ OKLCH, aby uzyskać percepcyjnie równomierne kroki jasności.

Najczęściej zadawane pytania

Photoshop stosuje profil koloru, zwykle sRGB dla ekranu i często inny profil dla druku. Przeglądarki renderują wartości HEX bez profilu jako sRGB. Jeśli dokument jest ustawiony na Adobe RGB lub ProPhoto, wartości pikseli są takie same, ale postrzegany kolor się zmienia.

Tak, oba zapisy oznaczają czystą czerwień: czerwony ma wartość 255, a zielony i niebieski 0. HEX to po prostu dwucyfrowy zapis szesnastkowy każdej wartości kanału od 0 do 255.

Wybierz kolor główny i skopiuj wartość HSL. W CSS lub programie graficznym zachowaj barwę i nasycenie, zmieniając jasność. Sprawdź osobno każdą parę koloru pierwszego planu i tła.

Bieżący kolor jest przechowywany do 30 minut w tej karcie przeglądarki na czas kroków prowadzących. Nie trafia do adresu URL ani przez nasze serwery. Ponowne rozpoczęcie, zamknięcie karty, usunięcie danych przeglądarki lub upływ czasu usuwa kolor.

Powiązane narzędzia

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Konwerter Base64 na Hex

Konwertuj ciąg Base64 na jego bazowe bajty zapisane szesnastkowo. Przydatne do inspekcji tokenów, kluczy, certyfikatów i JWT.

Generator losowych liter

Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.

Generator losowych kolorów

Wygeneruj od 1 do 50 losowych kolorów HEX z próbkami do podglądu, kopiowania i użycia w CSS, testach lub tworzeniu palet.

Upraszczenie algebry Boole’a

Upraszczaj wyrażenia boolowskie za pomocą map Karnaugha i algorytmu Quine-McCluskey. Pokazuje każdy krok minimalizacji oraz końcową postać SOP/POS.

Generator losowych palet kolorów

Twórz losowe palety od 2 do 15 próbek, wybierz styl żywy, pastelowy, stonowany lub ciemny, a następnie skopiuj kody HEX albo zmienne CSS.