ColorBug – poradniki, instrukcje

ColorBug

ColorBug ułatwia wybór kolorów, przydatny szczególnie dla twórców stron internetowych, programistów czy innych prac graficznych. Pozwala wybrać dowolny kolor z ekranu i przekonwertować go do formatu HTML, HEX, RGB, Delphi, C++ lub Visual Studio.

Program zawiera również generator gradientów, który ułatwia tworzenie płynnych przejść tonalnych kolorów do użycia w przyciskach CSS lub tłach. Oferuje dostosowywalny szablon, którego można użyć do wygenerowania i skopiowania do kompletnego kodu CSS.

Mini samouczek

Jak zarządzać kolorami za pomocą przeciągania i upuszczania‎

Kolory można przeciągać z przycisków kolorów do palety kolorów, aby je zapisać, lub z powrotem, aby ustawić kolor. To samo jest możliwe między kolorowymi przyciskami, nawet jeśli są one umieszczone na różnych oknach.‎

‎Suwaki kolorów i narzędzie wybierania zmienią kolor aktywnego przycisku koloru, nawet jeśli znajduje się on w innym oknie.‎

Tworzenie gradientów dla CSS‎

Narzędzie gradientu może tworzyć gradienty, wybierając kolor i przesuwając suwak, aby zdefiniować intensywność gradientu. Gradienty można następnie wyeksportować jako kod CSS, gotowy do umieszczenia w arkuszu stylów.‎

.gradient {
	background-color: #0089c1;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#08b1f7), to(#005e84));
	background-image: -webkit-linear-gradient(top, #08b1f7, #005e84);
	background-image: -moz-linear-gradient(top, #08b1f7, #005e84);
	background-image: -o-linear-gradient(top, #08b1f7, #005e84);
	background-image: linear-gradient(to bottom, #08b1f7, #005e84);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08b1f7', endColorstr='#005e84');
	}

‎Jeśli format domyślny nie pasuje do istniejącego arkusza stylów lub jeśli nie trzeba obsługiwać całej gamy przeglądarek, można zdefiniować własny szablon.‎

‎Jak znaleźć pasujący kolor tekstu dla danego tła‎

Często mamy dane tło ze zdjęcia lub z projektu istniejącej strony internetowej i szukamy pasującego koloru tekstu. Ten screencast pokazuje, jak łatwo znaleźć taki kolor.‎

  • ‎Najpierw zrób migawkę części obrazu, która jest dobrą reprezentacją tła.‎
  • ‎Następnie wybierz typowy kolor jako kolor tła.‎
  • ‎Przeciągnij kolor tła na przycisk pierwszego planu, aby kolory były takie same.‎
  • ‎Teraz baw się luminancją, ale pozwól innym parametrom nienaruszonym. Wszystkie te kolory nie wprowadzą nowego odcienia i dlatego będą pasować do kolorów na zdjęciu.‎
Jak znaleźć prawdziwy kolor tekstu za pomocą antyaliasingu‎

Znalezienie prawdziwego koloru tekstu z ekranu może być nie lada wyzwaniem, ponieważ większość tekstów jest dziś rysowana antyaliased. Antyaliasing dzieli oryginalny piksel poziomo na kilka pikseli o różnych kolorach. Widać to bardzo dobrze w pionowej części „T”. Jeśli jednak uda nam się znaleźć poziomą część o określonej długości, taką jak górna część „T”, oryginalny kolor może być pikietą stamtąd.‎