Strona główna » Blog » Kalkulatory kolorów dla funkcji SCSS

Kalkulatory kolorów dla funkcji SCSS

Dla czystości kodu można chcieć utrzymywać w arkuszu SCSS niewielką liczbę podstawowych kolorów, które są przypisane do odpowiednich zmiennych, oraz na ich podstawie generować kolory pochodne za pomocą palety funkcji transformujących, które udostępnia SCSS – np. darken, adjust-hue i inne. Co jednak zrobić, gdy kolory są nam zlecane z zewnątrz już gotowymi wartościami RGB? Jeżeli znane są tutaj kolory podstawowe oraz pochodne, to można skorzystać z kalkualtorów wyznaczających zestaw funkcji transformujących!

Załóżmy, że głównym kolorem na naszej stronie WWW jest #679340, ale oto nagle nasz klient zgłasza nam potrzebę, aby w jednym miejscu tekst był “w tym kolorze ale ciemniejszy” i po chwili podsyła konkretnie dobrany odcień: #34523a. Wówczas korzystamy z jednego z wielu online-owych kalkulatorów:

Jak widzimy, wyniki są bardzo podobne. Różnią się szczegółami, ale ich wynik ostatecznie jest ten sam.

Aby ewentualnie dopomóc sobie i naszym klientom w doborze kolorów w taki sposób, aby od razu znać funkcję transformującą, warto skorzystać z Sass Color Generator, który pozwala w przejrzysty sposób obejrzeć i porównać różne warianty zmiany podstawowego koloru za pomocą funkcjo lighten, darken, saturate, desaturate.