Eksplorator koła barw
Wybierz kolor bazowy
Przeciągaj znacznik po kole barw i obserwuj, jak obracają się wraz z nim oznaczenia harmonii: dopełniająca co 180°, triada co 120°, sąsiednie barwy analogiczne, dopełnienie rozdzielone oraz tetrada. Przełączaj się między kołem HSL (kołem inżynierskim) a kołem RYB (kołem artysty), porównuj, czym się różnią, i kopiuj wybrane zestawienie jako paletę.
Jak działa eksplorator koła barw
-
1
Przeciągaj znacznik po kole
Znacznik ustala barwę podstawową. Nasycenie i jasność reguluje się osobnymi suwakami.
-
2
Wybierz harmonię
Dopełniająca, analogiczna, triada, dopełnienie rozdzielone, tetrada, monochromatyczna. Oznaczenia harmonii obracają się wraz z barwą podstawową.
-
3
Przełącz model (HSL a RYB)
Koło HSL jest symetryczne (czerwony naprzeciw cyjanu, zielony naprzeciw magenty). Koło RYB jest niesymetryczne (czerwony naprzeciw zielonego, niebieski naprzeciw pomarańczowego) i bliższe intuicji mieszania farb.
-
4
Skopiuj paletę
Wartości HEX, RGB i HSL dla barwy podstawowej oraz każdego oznaczenia harmonii. Zmienne CSS, mapa Sass lub zwykły plik CSV.
Koło HSL a koło RYB
Oba koła układają barwy w okrąg, ale różnią się co do tego, które barwy są „przeciwległe“:
| Barwa podstawowa | Dopełnienie HSL | Dopełnienie RYB |
|---|---|---|
| Czerwony | Cyjan | Zielony |
| Pomarańczowy | Morski | Niebieski |
| Żółty | Niebieski | Fioletowy |
| Zielony | Magenta | Czerwony |
| Niebieski | Żółty | Pomarańczowy |
| Fioletowy | Żółtozielony | Żółty |
- HSL (barwa, nasycenie, jasność): cylindryczna reprezentacja sRGB stosowana w CSS i projektowaniu cyfrowym. Dodanie 180° wybiera barwę po przeciwnej stronie tego cyfrowego koła.
- RYB (czerwony, żółty, niebieski): tradycyjne koło pojęciowe używane w edukacji artystycznej. Narzędzie przybliża tę konwencję przez zmianę położenia kątów barw; nie przewiduje wyniku mieszania prawdziwych pigmentów.
Oba systemy sprawdzają się do różnych celów. Używaj HSL do pracy na ekranie, a RYB, gdy zależy ci na intuicji właściwej dla malowania.
Definicje harmonii na kole
- Dopełniająca: podstawa + 180°; największy odstęp barw na wybranym kole.
- Analogiczna: podstawa z sąsiadami przy -30° i +30°; miękka i spójna.
- Triada: podstawa + 120° + 240°; zrównoważona żywość.
- Dopełnienie rozdzielone: podstawa + 150° + 210°; bogata bez pełnego napięcia układu dopełniającego.
- Tetrada / kwadrat: podstawa + 90° + 180° + 270°; cztery barwy w równych odstępach.
- Monochromatyczna: ta sama barwa, różna jasność i nasycenie.
Temperatura na kole
- Połowa ciepła: czerwienie, pomarańcze, żółcie. Tradycyjnie wysuwają się do przodu (przyciągają wzrok).
- Połowa chłodna: zielenie, błękity, fiolety. Tradycyjnie cofają się w głąb.
- Neutralne: barwy o niskim nasyceniu; należą do jednej z połówek zależnie od podtonu.
Praktyczne zastosowania
- Dobór palety marki: przeciągaj znacznik, aż znajdziesz pasującą barwę, a następnie sprawdź oznaczenia triady lub tetrady pod kątem barw uzupełniających.
- Studia malarskie: wybierz zdjęcie referencyjne, znajdź dominującą barwę i przyjrzyj się sąsiednim barwom analogicznym pod kątem cieniowania monochromatycznego.
- Ilustracja: wybierz parę dopełniającą do cieni, na przykład dla pomarańczowego obiektu maluj cienie kolorem niebieskim, a nie po prostu ciemniejszym pomarańczem.
- Makieta projektu wnętrza: koła triadyczne odpowiadają klasycznym paletom wnętrzarskim (niebieski/żółty/czerwony w tradycyjnym stylu amerykańskim; zielony/pomarańczowy/fioletowy w stylu boho).
Dlaczego koło nie jest w pełni intuicyjne
Rzeczywiste postrzeganie barw przez człowieka jest bardziej złożone, niż sugeruje którekolwiek koło. System Munsella, LAB i OKLCH dążą do rozkładów jednolitych percepcyjnie i nie tworzą prostego okręgu, chroma zmienia się wraz z jasnością przy każdej barwie. W pracy nad rozbudowanymi systemami projektowymi percepcyjne przestrzenie barw dają czystsze wyniki niż koła; natomiast przy koncepcyjnej eksploracji barw to koło wciąż wygrywa przejrzystością.
Najczęściej zadawane pytania
HSL do projektowania cyfrowego (CSS, ekrany, interfejs użytkownika). RYB, gdy myślisz o farbach, druku lub sztuce tradycyjnej i chcesz korzystać z konwencjonalnej intuicji harmonii rodem ze szkoły artystycznej.
Modele inaczej rozmieszczają barwy. HSL używa kąta barwy sRGB, dlatego naprzeciw czerwieni znajduje się cyjan. W tradycyjnej konwencji RYB naprzeciw czerwieni leży zieleń. RYB jest tutaj przybliżeniem wizualnym, a nie prognozą mieszania konkretnych farb.
Do nauki, szkicowania pomysłów i komunikacji z klientem, tak. W precyzyjnej pracy nad paletą profesjonaliści coraz częściej sięgają po przestrzenie percepcyjne (LAB, OKLCH), w których jasność i chroma są niezależne od barwy.
Skopiuj paletę jako CSS, Sass lub CSV i zapisz ją w swoim miejscu pracy. Narzędzie nie ma biblioteki palet ani pamięci konta. W czteroetapowym procesie widoczne ustawienia koła znajdują się w adresie URL i mogą pozostać w historii przeglądarki.
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 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 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 binarnego na ósemkowy
Konwertuj binarny na ósemkowy, grupując bity po trzy. Przydatne przy uprawnieniach Unix, starszych systemach i kompaktowym zapisie liczb.
Konwerter ASCII na hex
Konwertuj tekst ASCII na szesnastkowe wartości bajtów. Wynik używa dwóch cyfr hex na znak, gotowych do dumpów pamięci, śladów pakietów albo tabel firmware.
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.