Eksplorator koła barw

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. 1

    Przeciągaj znacznik po kole

    Znacznik ustala barwę podstawową. Nasycenie i jasność reguluje się osobnymi suwakami.

  2. 2

    Wybierz harmonię

    Dopełniająca, analogiczna, triada, dopełnienie rozdzielone, tetrada, monochromatyczna. Oznaczenia harmonii obracają się wraz z barwą podstawową.

  3. 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. 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