Generowanie schematów kolorów - teoria i algorytmy [zamknięte]

Będę generować wykresy i diagramy i szukam teorii na temat schematów kolorów i przykładów algorytmów.

Przykładowe pytania:

• Jak wygenerować kolory komplementarne lub analogiczne?
• Jak wygenerować pastelowe, zimne i ciepłe kolory?
• Jak wygenerować dowolną liczbę losowych, ale wyraźnych kolorów?
• Jak przetłumaczyć to wszystko na heks tryplet (kolor strony)?

Moja implementacja będzie w AS3, ale wszelkie przykłady w pseudokodzie są mile widziane.

Szukając więcej informacji na temat tego pytania (z czym też się zmagałem) znalazłem tego bloga . Stefano Mazzocchi wyjaśnia swoją teorię, dlaczego programiści nie lubią wybierać kolorów do projektowania interfejsu użytkownika, a także oferuje przydatne porady i linki.

Pierwszą radą, jaką oferuje, jest ten oczywisty fakt, który stanowi podstawę doboru odcieni i nasyceń:

Dwie informacje o tym samym kontraście na tle będą postrzegane na tym samym poziomie ważności (wszystkie inne rzeczy są równe), podczas gdy większy kontrast oznacza większe znaczenie, a mniejszy kontrast oznacza mniejsze znaczenie.

Jest to pierwsza wskazówka, jak wybrać kolory dla pierwszego planu i tła - mniej ważne informacje powinny używać mniejszego kontrastu, a ważniejsze informacje powinny używać wyższego kontrastu.

Pierwszy link to Color Scheme Designer , strona podobna do Kuler. Podobnie jak Kuler, jest to poręczne narzędzie interaktywne, ale nie daje żadnego wglądu w to, jak wybierać kolory, tj. Które żółcie działają z którymi zieleniami lub błękitami itp.

Kolejny link, który oferuje, to strona internetowa NASA Color Usage Research Lab zatytułowana Korzystanie z kolorów w grafice wyświetlającej informacje . Ta strona zawiera o wiele więcej informacji na temat wybierania kolorów w celu uzyskania odpowiedniego kontrastu itp. Oraz zawiera wzory matematyczne do pomiaru takich rzeczy, jak kontrast. Nie znalazłem jeszcze żadnego kodu SW ani algorytmów pseudokodu w tej witrynie, ale obejrzałem tylko kilka stron. Stefano zwraca również uwagę, że NASA Color Lab korzysta z Munsell Color System , systemu podobnego do HSV, ale ważonego w celu dokładniejszego odzwierciedlenia ludzkiej percepcji koloru, a nie mierzalnych właściwości koloru.

Ostatni link wspomniany na blogu Stefano to strona o nazwie Color Trends + Palettes :: COLOURlovers . Ta strona nie oferuje więcej pomocy w znalezieniu algorytmu wybierania kolorów niż Color Scheme Designer lub Kuler, ale podkreśla mniej mierzalną jakość obecnych zmian w naszej ulotnej przyjemności z niektórych kolorów i palet. Warto odwiedzić, jeśli chcesz, aby Twój interfejs odzwierciedlał najnowsze trendy.

Jeszcze raz sprawdź stronę NASA i przeczytaj niektóre tam strony, szczególnie te na temat Color Science , a powinieneś być w stanie wymyślić funkcjonalny algorytm wybierania kolorów, które współpracują ze sobą i zapewniają pożądany kontrast.

EDYCJA: Dodam dodatkowe pomocne linki w tym obszarze, gdy je znajdę.

1. Interaktywny algorytm genetyczny dla kolorów.pdf
2. Percepcyjny algorytm segmentacji kolorów.pdf
3. Przewodnik łączenia kolorów i schematów kolorów dla Great Web Design.html

Jeśli chodzi o narzędzia do generowania kolorów, najbardziej podoba mi się http://kuler.adobe.com .

Gdy tworzysz paletę kolorów (5 kolorów) w witrynie, dostępne opcje to: Analogiczny, Monochromatyczny, Triada, Uzupełniający, Złożony i Odcienie. Oczywiście możesz dostosować kolory zamiast generować je automatycznie. Każdy blok koloru pokazuje wartości liczbowe w RGB i Hex (a także CMYK / HSV / Lab).

Jak wygenerować kolory komplementarne lub analogiczne?

Wymaga to nieco większej wiedzy z zakresu teorii kolorów. Możesz sprawdzić piękny (Podstawowy) wyjaśnienie tutaj . Zobacz koła kolorów.

Jak wygenerować pastelowe, zimne i ciepłe kolory?

Ogólnie pastelowe kolory to „miękkie kolory”. Są to coraz wyższe spektrum odcienia. Zobacz sekcję pastelowych kolorów wygenerowaną przez Kulera .

Jak wygenerować dowolną liczbę losowych, ale wyraźnych kolorów?

Do celów tworzenia wykresów nie jestem pewien, czy przypadkowe kolory będą działać. Każdy wybór kolorów należy wybrać ręcznie.

Jak przetłumaczyć to wszystko na heks tryplet (kolor strony)?

Większość programów graficznych wyświetla wartości szesnastkowe kolorów. Hex to ciąg RGB złożony z ## (czerwony), ## (zielony), ## (niebieski).

Na przykład czysty czerwony to FF0000, czysty niebieski to # 0000FF. Fioletowy (otrzymujesz przez zmieszanie czerwonego i niebieskiego) to # FF00FF.

Ponieważ będziesz tworzyć wykresy, zalecamy odwiedzanie następujących blogów w poszukiwaniu inspiracji:

http://infosthetics.com

http://flowingdata.com

Jeśli masz czas, przeczytaj lekcje teorii kolorów

Pomysłem, który miałem na myśli od dłuższego czasu, jest generowanie tak różnych, jak to możliwe (w ramach limitów) kolorów dla dowolnej liczby kolorów. Dodatkowym problemem jest to, że jeśli potrzebuję później dodatkowej pary kolorów dla tego samego wykresu (może dodanych jest kilka dodatkowych słupków), muszą one pasować do tego samego schematu, zachowując te same kolory.

Pomysł, który wymyśliłem, to trochę zabawna sztuczka. Wyobraź sobie koło kolorów (być może każdy ma inny odcień o tym samym nasyceniu i jasności, choć możesz zdefiniować dowolne koło w dowolnej przestrzeni kolorów). Zamiast podawać kąt dla tego okręgu w stopniach, zakres wynosi od zera do 255. W systemie dwójkowym oznacza to od 00000000 do 11111111. Dodaj jeden do 8-bitowego 255 i przepełni się z powrotem do zera, więc działa naturalnie jako „wartość kołowa” (pod względem technicznym dodawanie i odejmowanie to modulo 256).

Sztuką jest wybranie koloru zero, koloru jeden itp., Aby odwrócić liczby bitowe. Aby to zrobić w C, użyłbym ...

value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);

Tak więc sekwencja 0, 1, 2, 3, 4 jest przekształcana na 0, 128, 64, 192, 32.

Chodzi o to, że masz 256 różnych kolorów, a najwcześniejsze są bardzo szeroko rozstawione, a późniejsze są mniej rozstawione i wypełniają luki (64 jest w połowie między 0 a 128, 32 jest w połowie od 0 do 64 itd.).

Każda szerokość bitów dla określonego „kąta” będzie działać, jeśli dostosujesz odwrotność bitów i oczywiście możesz uruchomić wiele cykli jednocześnie dla różnych parametrów koloru (może barwa obraca się szybko, ale nasycenie obraca się wolniej).

Pozostawia to tylko pytanie, w jaki sposób mapujesz swoje „kąty” na określone liczby RGB lub cokolwiek innego, o czym nie jestem ekspertem - oh, i pytanie, czy ActionScript obsługuje bit-fiddling.

Jest na to interesujące pytanie przepełnienia stosu „ Funkcja tworzenia kół kolorów ”. Możesz także przeczytać jeden z zalecanych artykułów (PDF).

To pytanie mnie zafascynowało, więc zacząłem googlować. :) Nie oczekuj odpowiedzi na podstawie doświadczenia.

Zasadniczo, aby wykonać obliczenia z kolorami, najlepiej wykonywać operacje na kole kolorów, który jest reprezentowany w formacie HSL .

Autor tego postu był na tyle uprzejmy, że przedstawił informacje na temat konwersji RGB na HSL i przykładowy kod, jak obliczyć kolory uzupełniające.

Jeśli masz szczęście, nie musisz tego rozumieć, jeśli jedna z poniższych niezgrabnie nazwanych bibliotek AS3 działa dla Ciebie.

• Colorjizz
• Mojocolor

Użyłem następującego kodu. Uwaga: nie używa teorii o tym, jak działa oko / mózg, chciałem po prostu stworzyć podniebienie kolorów, takie jak czerwony + zielony + niebieski = 1, a kolory są w przybliżeniu równomiernie rozmieszczone. Parametr „ja” określa, który kolor spośród wszystkich możliwych. Działa do zliczenia około 91 ish. Zauważ, że powinienem biegać od zera do num-1. Możliwe są inne rzeczy, powyższe ograniczenie jest dość arbitralne, ale przynajmniej generuje wyraźne kolory - zakładając, że nie potrzebujesz ich zbyt wiele.

void select_color(int me,int num){
  int s[14]={0,1,3,6,10,15,21,28,36,45,55,66,78,91};
  int j,nrows=0,irow=0,jcol=0;
  float del,red,grn,blu;
// we build a red/green triangle with an area>=num
  for(j=0;j<14;j++)if(me>=s[j])irow=j;
  for(j=13;j>0;j--)if(num<=s[j])nrows=j;
  jcol=me-s[irow];
  del=1./(nrows-.9);
  red=1.-del*irow;
  grn=del*jcol;
  blu=1.-red-grn;
  glColor3f(red,grn,blu);
}

Ponownie, nie wykorzystuje teorii koloru, więc nie ma gwarancji, że dystansowość jest zoptymalizowana w każdym wat - szczególnie, jeśli chodzi o okazjonalnego użytkownika z częściową ślepotą kolorów.

Możesz także po prostu ustawić zmienne koloru podstawowego na losowe liczby, ale jeszcze mniej prawdopodobne jest, że utworzą odrębny wizualnie zestaw.

W przeszłości robiłem to, wybierając ręcznie około 20 kolorów, zamiast próbować je generować. O ile twoje wykresy nie są bardzo złożone, zwykle nie potrzebujesz więcej. Podejście to, choć proste, pozwala również przypisać ten sam kolor tym samym czynnikom na wykresie (na przykład zawsze można ustawić „sprzedaż” na ten sam kolor, co ułatwia interpretację wykresów).

Lubię próbować kolory ze zdjęć . Jako projektant robię to ręcznie. Jako programista zwykle wybieram losowy piksel. Jeśli chcesz mieć większą kontrolę, możesz tworzyć własne „zdjęcia” zgodne z określonym zestawem reguł.

Zawsze lubiłem narzędzia online VisiBone, ponieważ możesz wybierać wiele kolorów i interaktywnie oceniać, jak źle się ze sobą kolidują: http://www.visibone.com/colorlab/

Mówię, jak źle się ze sobą zderzają, ponieważ znam kontrast kolorów w sztuce „analogowej” i byłem zaskoczony tym, jak źle wybrałem kolor w sztuce cyfrowej. (Oczywiście nie jestem projektantem)