jaką metodą definiować kolor hex vs rgb

Question

cześć!

rgb hex itp. czym się różnią, która metoda lepsza, zalety i korzyści obu stron? chcę uczyć się dobrych praktyk na każdym kroku żeby nie nabywać złych nawyków.

.element {
     color: #fff;
}

VS

.element {
     color: rgb(255, 255, 255);
}

PS. nie umiem sam stworzyć koloru żadną z z tych metod, operować wartościami czrwonego, zielonego i niebieskiego, porzebuje generatora VS code. ale tak ogólnie chyba lepiej mi z hex'em bo krótszy zapis i fajniej wygląda xd

Comments

Nie odpowiem na Twoje pytanie czy te zapisy mają jakiekolwiek znaczenie, tzn. czy któryś jest lepszy dla przeglądarek. Podejrzewam, że nie. Natomiast na marginesie powiem, że korzystanie z generatora kolorów podobnego jaki jest VS Core to absolutnie normalna rzecz. Tylko tak możesz dobrać kolor taki jak chcesz. Nikt raczej nie ustawia kolorów z głowy przy tworzeniu ładnego interfejsu. Chyba że akurat wygląd aplikacji/strony nie jest w ogóle istotny.

---

Ok, dzięki

Bo wiesz, często gdy oglądałem jakieś poradniki css na YT to właśnie programista zachowywał się jakby sam tworzył kolor, teraz się domyślam ze mieli przygotowane gotowce.

jeszcze raz dzięki, nie myślałem tak o tym 

Answer 1

Zasadniczo jeżeli chciałbyś się nauczyć tworzyć kolory samemu w tych zapisach to musiałbyś przypomnieć sobie czasy przedszkolaka kiedy to pani w szkole uczyła że np. jeśli zmieszamy farbkami kolor czerwony z niebieskim to powstanie fioletowy. Te zapisy kolorów działają na niemalże takiej samej zasadzie, bo tutaj również tworzymy kolor mieszając 3 podstawowe barwy. W przypadku zapisu rgb podajesz w nawiasie kolejno nasycenie barwy czerwonej, zielonej oraz niebieskiej gdzie 0 oznacza brak nasycenia daną barwą a 255 całkowite nasycenie. Zatem jeśli chcemy utworzyć nasz przykładowy fioletowy użyjemy zapisu 

color: rgb(255, 0, 255);

Czyli poprostu zmieszaliśmy kolor czerwony z niebieskim a zielonego nie użylismy wcale. Jeżeli chcemy uzyskać słabszy odcień to obniżymy kolejno wartości poszczególnych barw. Możliwości są ogromne, zatem zorientuj się które kolory się miesza aby uzyskać te najbardziej podstawowe barwy jak pomarańczowy, żółty itd. a następnie baw się, mieszaj, eksperymentuj a z biegiem czasu mniej więcej będziesz w stanie uzyskać barwę wpisując wartości z głowy, aczkolwiek osobiście uważam że korzystanie z generatorów nie jest niczym złym, ponieważ możemy łatwo i szybko sobie dobrać i sprawdzić interesujący nas kolor. Jeżeli chodzi o zapis szesnastkowy sytuacja jest identyczna z tym że definicja odbywa się za pomocą hashtaga (#) oraz sześciu cyfr szesnastkowych, których następujące po sobie pary odpowiadają kolejno za barwy: czerwoną, zieloną i niebieską. Każda taka para cyfr (którą na marginesie nazywamy bajtem), przyjmuje wartości z przedziału od 00 (0) do FF (255). Kolory tworzysz w taki sam sposób lecz tym razem nieco odmiennie je zapisując. Zatem analogicznie posługując się naszym przykładem utworzenia fioletu:

color: #ff00ff;

lub możemy użyć krótszego zapisu w przypadku gdy liczby w danej parze są takie same:

color: #f0f;

Co na nasz zapis RGB powyżej przekłada się alternatywnie 255 - ff(nasza pierwsza para odpowiadającą czerwonemu) 0 - 00(nasza druga para odpowiadającą zielonemu) i ponownie 255 - ff(trzecia para odpowiadającą niebieskiemu). Razem uzyskujemy taki sam zapis w formie #ff00ff. Nie ma gorszego i lepszego sposobu, korzystaj z tego co jest dla ciebie wygodniejsze i bardziej przejrzyste lub też bardziej eleganckie w zapisie. 

Answer 2

HSL

Answer 3

Z własnego doświadczenia wywnioskowałem, że lepiej używać w zapisach kolorów systemu liczbowego dziesiętnego, niż szesnastkowego - tak, po prostu łatwiej w ten sposób zmiejszać lub zwiększać natężenie danego koloru spośród palety. Ponadto, proponowałbym (tak jak wyżej napisał kubaapk) nauczyć się korzystać z nowoczesnego sposobu dobierania kolorów, jakim jest HSL, w którym dosłownie nie mieszamy kolorów, lecz wybieramy ten podstawowy, a w dwóch następnych wartościach zmniejszamy lub zwiększamy nasycenie i jasność (gdzie w nasycenieniu dobrze zaczynać od 100%, a jasność ustawić na 50%).