Συνάρτησεις Χρώματος Sass

Συνάρτησεις Χρώματος Sass

Διαίρουμε τις λειτουργίες χρώματος του Sass σε τρία μέρη: τις λειτουργίες ρύθμισης χρώματος, τις λειτουργίες απόκτησης χρώματος και τις λειτουργίες χειρισμού χρώματος:

Λειτουργία χρώματος Sass

Συνάρτηση χρώματος Sass Συνάρτηση
rgb(κόκκινο, πράσινο, μπλε)

Ρυθμίζει το χρώμα χρησιμοποιώντας το μοντέλο Red-Green-Blue (RGB)
Θέτει τα RGB χρώματα μέσω της φόρμας rgb(red, green, blue)
Κάθε παράμετρος ορίζει την ένταση της χρώματος, μπορεί να είναι ακέραιος αριθμός από 0 έως 255 ή ποσοστό (από 0% έως 100%)

Παράδειγμα:

rgb(0, 0, 255);
// Διατίθεται σε μπλε, επειδή ο παράμετρος blue ορίζεται στο μέγιστο τιμή (255), οι άλλες παραμέτρους ορίζονται στο 0
rgba(κόκκινο, πράσινο, μπλε, αλφα)

Ρύθμιση του χρώματος με το μοντέλο Red-Green-Blue-Alpha (RGBA).
Η τιμή χρώματος RGBA είναι επέκταση της τιμής χρώματος RGB, με αλφα κανάλι - καθορίζει την αδιαφάνεια του χρώματος.
αλφα οι παραμέτρους είναι αριθμοί μεταξύ 0.0 (πλήρως διαφανές) και 1.0 (πλήρως αδιαφάνεια).

Παράδειγμα:

rgba(0, 0, 255, 0.3); // εμφανίζεται ως κίτρινο με αδιαφάνεια
hsl(χρωματική απόχρωση, πυκνότητα, φωτεινότητα)

Ρύθμιση του χρώματος με το μοντέλο Hue-Saturation-Lightness - και αντιπροσωπεύει την κυλινδρική συντεταγμένη του χρώματος.
Η χρωματική διάσταση (Hue) είναι το βαθμό του κύκλου χρωμάτων (από 0 έως 360) - 0 ή 360 είναι κόκκινο, 120 είναι πράσινο, 240 είναι μπλε
Η πυκνότητα (Saturation) είναι ποσοστό; 0% υποδηλώνει γκρι σκιές, 100% υποδηλώνει πλήρες χρώμα.
Η ένταση (Lightness) είναι ποσοστό; 0% είναι μαύρο, 100% είναι λευκό.

Παράδειγμα:

hsl(120, 100%, 50%); // πράσινο
hsl(120, 100%, 75%); // ελαφρύ πράσινο
hsl(120, 100%, 25%); // σκούρο πράσινο
hsl(120, 60%, 70%); // αχνό πράσινο

hsla(χρωματική απόχρωση, πυκνότητα, φωτεινότητα, αλφα)

Ρύθμιση του χρώματος με το μοντέλο Hue-Saturation-Lightness-Alpha (HSLA).
Η τιμή χρώματος HSLA είναι επέκταση της τιμής χρώματος HSL, με αλφα κανάλι - καθορίζει την αδιαφάνεια του χρώματος.
αλφα οι παραμέτρους είναι αριθμοί μεταξύ 0.0 (πλήρως διαφανές) και 1.0 (πλήρως αδιαφάνεια).

Παράδειγμα:

hsl(120, 100%, 50%, 0.3); // πράσινο με αδιαφάνεια
hsl(120, 100%, 75%, 0.3); // ελαφρύ πράσινο με αδιαφάνεια

grayscale(color)

Ρύθμιση του γκρι που έχει την ίδια φωτεινότητα με το χρώμα.

Παράδειγμα:

grayscale(#7fffd4);

τέλος: #c6c6c6
complement(color)

Ρύθμιση της κομplementary χρώματος.

Παράδειγμα:

complement(#7fffd4);

τέλος: #ff7faa
invert(color, Δημιουργία μίξης χρώματος από το χρώμα 1 και το χρώμα 2.)

Ρύθμιση του αντιχρώματος ή της αρνητικής χρώματος.
Δημιουργία μίξης χρώματος από το χρώμα 1 και το χρώμα 2.οι παραμέτρους είναι προαιρετικές και πρέπει να είναι αριθμοί μεταξύ 0% και 100%. Η προεπιλεγμένη τιμή είναι 100%.

Παράδειγμα:

invert(λευκό);

τέλος: μαύρο

χρωματικές συνάρτησεις Sass

Συνάρτηση χρώματος Sass Συνάρτηση
red(color)

με αριθμούς από 0 έως 255 επιστρέφει την κόκκινη τιμή του χρώματος.

Παράδειγμα:

red(#7fffd4);

τέλος: 127

red(red);

blue(blue);
green(color)

με αριθμούς από 0 έως 255 επιστρέφει την πράσινη τιμή του χρώματος.

Παράδειγμα:

green(#7fffd4);

blue(blue);

green(blue);

green(blue);
Αποτέλεσμα: 0color)

blue(

Παράδειγμα:

Επιστροφή της μπλε τιμής του χρώματος ως αριθμός μεταξύ 0 και 255.

blue(#7fffd4);

Αποτέλεσμα: 212

blue(blue);
Αποτέλεσμα: 255color)

hue(

Παράδειγμα:

Επιστροφή του τόνος του χρώματος ως αριθμός μεταξύ 0deg και 360deg.

hue(#7fffd4);
Αποτέλεσμα: 160degcolor)

saturation(

Παράδειγμα:

Επιστροφή της πυκνότητας του χρώματος ως αριθμός μεταξύ 0% και 100%.

saturation(#7fffd4);
Αποτέλεσμα: 100%color)

lightness(

Παράδειγμα:

Επιστροφή της φωτεινότητας του χρώματος ως αριθμός μεταξύ 0% και 100%.

lightness(#7fffd4);
Αποτέλεσμα: 74.9%color)

opacity(

Παράδειγμα:

alpha(

alpha(#7fffd4);
Αποτέλεσμα: 1color)

opacity(

Παράδειγμα:

Επιστροφή του αλφα κανάλου χρώματος ως αριθμό μεταξύ 0 και 1.

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

Αποτέλεσμα: 0.5

Συνάρτηση χρώματος Sass Συνάρτηση
Περιγραφή & Παράδειγμαμεγαλύτερη βαρύτητα σημαίνει ότι πρέπει να χρησιμοποιηθεί περισσότερο, color2, Δημιουργία μίξης χρώματος από το χρώμα 1 και το χρώμα 2.)

mix(
Δημιουργία μίξης χρώματος από το χρώμα 1 και το χρώμα 2. βαρύτητα
οι παραμέτρους πρέπει να είναι μεταξύ 0% και 100%. Η προεπιλεγμένη τιμή είναι 50%. μεγαλύτερη βαρύτητα σημαίνει ότι πρέπει να χρησιμοποιηθεί περισσότερο.
Μικρότερη βαρύτητα σημαίνει ότι πρέπει να χρησιμοποιηθεί περισσότερο color2.

adjust-hue(color, μοίρες)

Ρύθμιση του χρωματικού τόνος σε μοίρες από -360 έως 360.

Παράδειγμα:

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

Αποτέλεσμα: #8080ff
adjust-color(color, κόκκινο, πράσινο, μπλε, χρωματική απόχρωση, πυκνότητα, φωτεινότητα, αλφα)

Ρύθμιση μιας ή περισσότερων παραμέτρων με το καθορισμένο ποσό.
Αυτή η συνάρτηση προσθέτει ή αφαιρεί το καθορισμένο ποσό από τις υπάρχουσες τιμές χρώματος.

Παράδειγμα:

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

Αποτέλεσμα:
change-color(color, κόκκινο, πράσινο, μπλε, χρωματική απόχρωση, πυκνότητα, φωτεινότητα, αλφα)

Θέση μιας ή περισσότερων παραμέτρων χρώματος σε νέες τιμές.

Παράδειγμα:

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

Αποτέλεσμα: #ffffd4
scale-color(color, κόκκινο, πράσινο, μπλε, πυκνότητα, φωτεινότητα, αλφα) Αύξηση κλίμακας μιας ή περισσότερων παραμέτρων χρώματος.
rgba(χρώμα, αλφα)

Δημιουργία νέας χρώματος με τη χρήση της δοθείσας διέλευσης αλφα.

Παράδειγμα:

rgba(#7fffd4, 30%);

Αποτέλεσμα: rgba(127, 255, 212, 0.3)
Δημιουργία πιο ανοιχτών χρωμάτων με ποσότητα μεταξύ 0% και 100%.color, amount) lighten(
amount Οι παράμετροι αυξάνονται ανάλογα με το ποσοστό του HSL Brightness.
darken(color, amount) Δημιουργία πιο σκοτεινών χρωμάτων με ποσότητα μεταξύ 0% και 100%.
amount Οι παράμετροι μειώνονται ανάλογα με το ποσοστό του HSL Brightness.
saturate(color, amount) Δημιουργία πιο σaturaμένων χρωμάτων με ποσότητα μεταξύ 0% και 100%.
amount Οι παράμετροι αυξάνονται ανάλογα με το ποσοστό του HSL Saturation.
desaturate(color, amount) Δημιουργία χρωμάτων με χαμηλή σaturaση με ποσότητα μεταξύ 0% και 100%.
amount Οι παράμετροι μειώνονται ανάλογα με το ποσοστό του HSL Saturation.
opacify(color, amount) Δημιουργία πιο αδιαφανών χρωμάτων με ποσότητα μεταξύ 0 και 1.
amount Οι παράμετροι αυξάνονται ανάλογα με την τιμή τους στον Αλφα Κανάλου.
fade-in(color, amount) Δημιουργία πιο αδιαφανών χρωμάτων με ποσότητα μεταξύ 0 και 1.
amount Οι παράμετροι μειώνονται ανάλογα με την τιμή τους στον Αλφα Κανάλου.
transparentize(color, amount) Δημιουργία πιο διαφανών χρωμάτων με ποσότητα μεταξύ 0 και 1.
amount Οι παράμετροι μειώνονται ανάλογα με την τιμή τους στον Αλφα Κανάλου.
fade-out(color, amount) Δημιουργία πιο διαφανών χρωμάτων με ποσότητα μεταξύ 0 και 1.
amount Οι παράμετροι αυξάνονται ανάλογα με την τιμή τους στον Αλφα Κανάλου.