Softonic

Wyszukiwarka kolorów dopełniających

Krok 1 / 3

Wprowadź kolor bazowy

Obsługuje #RGB, #RRGGBB, całkowite rgb() i procentowe hsl(). Obliczenia pozostają w przeglądarce; kolor trafia do adresu URL wysyłanego przy żądaniu każdej strony.

Kolory dopełniające leżą naprzeciw siebie na cyfrowym kole barw. Wprowadź ściśle zapisany kolor HEX, RGB lub HSL, aby obliczyć dopełnienie HSL, rozdzielone dopełnienia, barwy tetradyczne i dokładne współczynniki kontrastu WCAG. Wszystkie obliczenia odbywają się lokalnie w przeglądarce.

Jak obliczane jest dopełnienie

  1. 1

    Wpisz wartość koloru

    Użyj #RGB, #RRGGBB, rgb() z liczbami całkowitymi albo hsl() z procentami. Cała wartość jest sprawdzana przed obliczeniem.

  2. 2

    Obróć barwę o 180°

    Dopełnienie HSL: dodaj 180° do barwy, zachowaj to samo nasycenie i jasność.

  3. 3

    Wyznaczenie split-complement

    Dwa kolory o 150° i 210° od bazowego: łagodniejsza alternatywa dla bezpośredniego dopełnienia, gdy kontrast jest zbyt wysoki.

  4. 4

    Pojawiają się wskazówki dostępności

    Współczynnik kontrastu pary wobec bieli i czerni oraz ostrzeżenie, jeśli para prawdopodobnie nie spełni WCAG AA użyta jako tekst/tło.

Przykłady

Kolor bazowy Hex Dopełnienie (HSL) Hex
Czysta czerwień #FF0000 Cyjan #00FFFF
Koral #FF7F50 Morski błękit #50D0FF
Leśna zieleń #228B22 Fiolet #8B228B
Królewski błękit #4169E1 Złoto-pomarańcz #E1B941
Lawenda #E6E6FA Bladożółty #FAFAE6

Pokazane wartości HEX, RGB i HSL opisują ten sam kolor sRGB. Skopiuj wynik do użycia w CSS lub innym narzędziu projektowym.

Dopełnienie HSL a dopełnienie RYB

  • HSL (ekran): czerwień ↔ cyjan, zieleń ↔ magenta, błękit ↔ żółty. To geometria kąta HSL wyprowadzonego z sRGB i używanego w CSS, a nie symulacja mieszania światła.
  • RYB (artysta): czerwień ↔ zieleń, błękit ↔ pomarańcz, żółty ↔ fiolet. To tradycyjna konwencja dydaktyczna, a nie prognoza mieszania konkretnych pigmentów.

Wyszukiwarka używa wyłącznie cyfrowego modelu HSL. Nie przelicza na malarski model RYB, ponieważ dopełnienie pigmentu zależy od materiału i sposobu mieszania.

Gdzie dopełnienia działają dobrze

  • Przyciski CTA na tle marki. Zestaw kolor główny z jego dopełnieniem, by przycisk się wyróżniał.
  • Wizualizacja danych na wykresach z dwiema seriami (zysk vs strata, przed vs po).
  • Cienie w ilustracji: cień pomarańczowej dyni wygląda przekonująco bardziej w błękicie niż w ciemniejszej pomarańczy.
  • Branding sportowy: wiele drużyn używa palet dopełniających lub split-complement (błękit/pomarańcz, czerwień/zieleń, żółty/fiolet).

Gdzie zawodzą

  • Tekst zasadniczy na tle: bezpośrednie dopełnienia (czerwień na zieleni, błękit na pomarańczy) są niewygodne do czytania. Silna aberracja chromatyczna powoduje zmęczenie wzroku.
  • Użycie na całej powierzchni: ekran w 50% czerwony i w 50% zielony jest męczący. Używaj dopełnienia do akcentów (5-10% powierzchni), nie do głównego tła.
  • Spójność marki: dopełnienia sprawiają wrażenie ruchliwych. Większość nowoczesnych marek używa palety monochromatycznej albo analogicznej + jeden akcent, a nie podwójnego dopełnienia.

Split-complement

Split-complement (baza + 150° + 210°) jest często lepszym praktycznym wyborem:

  • Zachowuje wysoki kontrast z obszarem dopełnienia.
  • Unika drgania bezpośredniego dopełnienia.
  • Daje dwa akcenty do warstwowego projektu.

Przykład: baza = błękit → dopełnienie = pomarańcz (ostre) → split-complement = czerwono-pomarańczowy + żółto-pomarańczowy (bogatszy).

Odbarwianie dopełnień

Czyste dopełnienia rzadko wyglądają dobrze przy pełnym nasyceniu. Zmniejsz nasycenie o 20-40% w jednym lub obu, by uzyskać spokojniejszą paletę:

  • Czerwień (S=100%) + cyjan (S=100%) = drganie.
  • Czerwień (S=60%) + cyjan (S=60%) = klasyczna paleta plakatowa.
  • Ceglasty marki (S=45%) + przygaszony morski (S=30%) = nowoczesna, użyteczna.

Sprawdzenie przed użyciem

  • Współczynnik kontrastu pary: wyszukiwarka go podaje. Poniżej 4,5:1 nie spełnia AA dla tekstu.
  • Test na neutralnym tle: dopełnienia wyglądają inaczej na bieli, szarości, czerni.
  • Test druku, jeśli to miejsce docelowe, CMYK może przesunąć nasycenie i relacje dopełnień względem RGB.

Najczęściej zadawane pytania

Porządkują barwy według różnych konwencji. HSL używa kąta liczbowego wyprowadzonego z sRGB, a tradycyjne koło RYB umieszcza podstawowe barwy artystów na umownym okręgu. Żadne nie przewiduje wyniku mieszania rzeczywistego światła ani farb.

Tak, w teorii koloru to synonimy. „Przeciwny na kole barw” i „dopełniający” odnoszą się do tej samej relacji.

Rzadko. Bezpośrednie dopełnienia zwykle nie spełniają kontrastu WCAG użyte jako tekst/tło, bo mają zbliżoną jasność. Zwiększ różnicę jasności (ciemny tekst na jasnym tle), by spełnić wymogi.

Tak, panel wyniku zawiera bezpośrednie dopełnienie, split-complement (dwa kolory po bokach) oraz tetradyczną czwórkę. Wybierz to, co pasuje do celu projektowego.

Powiązane narzędzia

Konwerter Base64 na Hex

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

Konwerter binarny na hex

Konwertuj wejście binarne na zwykłą wartość szesnastkową wielkimi literami. Znaki inne niż 0 i 1 są ignorowane, a zera wiodące nie są zachowywane.

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 binarnego na ósemkowy

Konwertuj binarny na ósemkowy, grupując bity po trzy. Przydatne przy uprawnieniach Unix, starszych systemach i kompaktowym zapisie liczb.

Konwerter binarnego na ASCII

Wklej zapis binarny (bajty rozdzielone spacjami albo długi strumień bitów) i otrzymaj tekst ASCII, który reprezentuje. Obsługuje kodowania 7-bitowe i 8-bitowe.

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.