Πώς καθορίζετε χρώματα στο CSS;

Question

Accepted Answer

Το CSS προσφέρει αρκετές μορφές χρώματος. Παράγουν τα ίδια χρώματα — η επιλογή αφορά την αναγνωσιμότητα και το αν χρειάζεστε διαφάνεια.

```css
.a { color: red; }                      /* named keyword (~150 of them) */
.b { color: #ff5733; }                  /* hex: #RRGGBB */
.c { color: #ff5733cc; }                /* hex with alpha: #RRGGBBAA */
.d { color: rgb(255 87 51); }           /* red green blue (0–255) */
.e { color: rgb(255 87 51 / 0.8); }     /* with 80% opacity */
.f { color: hsl(9 100% 60%); }          /* hue saturation lightness */
.g { color: hsl(9 100% 60% / 0.5); }    /* HSL with alpha */
```

## Γιατί το HSL είναι συχνά το πιο χρήσιμο

Το HSL περιγράφει το χρώμα ως **H**ue (0–360° στον χρωματικό τροχό), **S**aturation και **L**ightness — το οποίο αντιστοιχεί στον τρόπο που σκέφτονται τα χρώματα οι άνθρωποι, καθιστώντας τις παραλλαγές διαισθητικές:

```css
:root { --brand-h: 220; }
.primary       { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* just raise lightness */
.primary-dark  { background: hsl(var(--brand-h) 80% 30%); } /* just lower it */
```

Η δημιουργία ενός ανοιχτότερου/σκοτεινότερου σκιάσματος είναι ασήμαντη — αλλάξτε έναν αριθμό. Το να το κάνετε με hex ή rgb απαιτεί επανυπολογισμό όλων των καναλιών.

## Alpha / διαφάνεια

```css
background: rgb(0 0 0 / 0.5); /* 50% transparent black — for overlays */
```

Η σύνταξη `/ alpha` (0 = διαφανής, 1 = αδιαφανής) είναι ο τρόπος για να δημιουργήσετε ημι-διαφανή χρώματα, χρήσιμα για επικαλύψεις και σκιές. (Σημείωση: `opacity` σε ένα στοιχείο ξεθωριάζει το *ολόκληρο* στοιχείο, συμπεριλαμβανομένων των θυγατρικών στοιχείων — τα χρώματα alpha ξεθωριάζουν μόνο αυτό το χρώμα.)

## Σύγχρονες μορφές

```css
color: oklch(70% 0.15 220); /* perceptually-uniform; better for color systems */
```

## Γιατί είναι σημαντικό

Η γνώση των μορφών σας επιτρέπει να επιλέξετε το σωστό εργαλείο: hex/rgb για μεμονωμένα χρώματα, **HSL/OKLCH για συστήματα σχεδιασμού** (εύκολο, διαισθητικές παραλλαγές σκιάσματος), και η σύνταξη `/ alpha` για διαφάνεια.

Το HSL ιδιαίτερα καθιστά το δημιουργία συνεπών, θεματοποιημένων χρωματικών παλετών πολύ ευκολότερη.