Funkcje kolorów Sass

Ustawienie koloru za pomocą modelu Red-Green-Blue (RGB).
Specyfikacja wartości koloru RGB za pomocą rgb(red, green, blue).
Każdy parametr definiuje intensywność koloru, może to być liczba całkowita z zakresu 0 do 255 lub wartość procentowa (od 0% do 100%).

Przykład:

rgb(0, 0, 255);
// Wyświetla się w kolorze niebieskim, ponieważ parametr blue ustawiono na maksymalną wartość (255), inne parametry ustawiono na 0

Ustawia kolor używając modelu Red-Green-Blue-Alpha (RGBA).
Wartość koloru RGBA jest rozszerzeniem wartości koloru RGB, z kanałem alpha - ten kanał określa nieprzejrzystość koloru.
alpha Parametr jest liczbą między 0.0 (zupełnie przezroczysty) a 1.0 (zupełnie nieprzejrzysty).

Przykład:

rgba(0, 0, 255, 0.3); // Wyświetlany jako przezroczysty niebieski

Ustawia kolor używając modelu Hue-Saturation-Lightness - i reprezentuje kolumnowy układ współrzędnych koloru.
Hue (ton) to liczba stopni na kole kolorów (od 0 do 360); 0 lub 360 to czerwony, 120 to zielony, 240 to niebieski
Saturation (satysfakcja) jest wartością procentową; 0% oznacza odcień szarości, 100% oznacza pełne kolory.
Lightness (jasność) jest wartością procentową; 0% to czarny, 100% to biały.

Przykład:

hsl(120, 100%, 50%); // Zielony
hsl(120, 100%, 75%); // Jasnozielony
hsl(120, 100%, 25%); // Ciemnozielony
hsl(120, 60%, 70%); // Średniozielony

Ustawia kolor używając modelu Hue-Saturation-Lightness-Alpha (HSLA).
Wartość koloru HSLA jest rozszerzeniem wartości koloru HSL, z kanałem alpha - określa nieprzejrzystość koloru.
alpha Parametr jest liczbą między 0.0 (zupełnie przezroczysty) a 1.0 (zupełnie nieprzejrzysty).

Przykład:

hsl(120, 100%, 50%, 0.3); // Zielony z nieprzejrzystością
hsl(120, 100%, 75%, 0.3); // Jasnozielony z nieprzejrzystością

Ustawia szary o takiej samej jasności co kolor.

Przykład:

grayscale(#7fffd4);

Wynik: #c6c6c6

Ustawia kolor komplementarny.

Przykład:

complement(#7fffd4);

Wynik: #ff7faa

Ustawia kontrastowy lub odwrotny kolor.
Twórz mieszany kolor z koloru 1 i koloru 2.Parametr jest opcjonalny i musi być liczbą między 0% a 100%.Domyślna wartość to 100%.

Przykład:

invert(white);

Wynik: black

Zwraca wartość czerwonej części koloru w zakresie od 0 do 255 jako liczbę.

Przykład:

red(#7fffd4);

Wynik: 127

red(red);

niebieski(niebieski);

Zwraca wartość zielonej części koloru w zakresie od 0 do 255 jako liczbę.

Przykład:

green(#7fffd4);

niebieski(niebieski);

green(blue);

zielony(niebieski);

niebieski(

Przykład:

Zwraca liczbę między 0 a 255 reprezentującą wartość niebieskiego koloru.

niebieski(#7fffd4);

Wynik: 212

niebieski(niebieski);

barwa(

Przykład:

Zwraca liczbę między 0deg a 360deg reprezentującą tonację koloru.

barwa(#7fffd4);

nasycenie(

Przykład:

Zwraca liczbę między 0% a 100% reprezentującą nasycenie koloru w formacie HSL.

nasycenie(#7fffd4);

jasność(

Przykład:

Zwraca liczbę między 0% a 100% reprezentującą jasność koloru w formacie HSL.

jasność(#7fffd4);

opacity(

Przykład:

alpha(

alpha(#7fffd4);

opacity(

Przykład:

Zwraca liczbę między 0 a 1 reprezentującą kanał alpha koloru.

opacity(rgba(127, 255, 212, 0.5));

mix(
Twórz mieszany kolor z koloru 1 i koloru 2. waga
parametrów musi być między 0% a 100%.Domyślna wartość to 50%. większa waga oznacza, że należy użyć więcej.
Mniejsza waga oznacza, że należy użyć więcej color2.

Dostosuj tonację koloru w zakresie od -360 do 360 stopni.

Przykład:

adjust-hue(#7fffd4, 80deg);

Wynik: #8080ff

Dostosuj jeden lub kilka parametrów o określoną ilość.
Ta funkcja dodaje lub odejmuje określoną ilość od bieżących wartości koloru.

Przykład:

adjust-color(#7fffd4, blue: 25);

Wynik:

Ustaw jeden lub kilka parametrów koloru na nowe wartości.

Przykład:

change-color(#7fffd4, red: 255);

Wynik: #ffffd4

Twórz nowy kolor za pomocą określonego kanału alpha.

Przykład:

rgba(#7fffd4, 30%);

Wynik: rgba(127, 255, 212, 0.3)