Κείμενα με RGBA χρώματα

Βλέποντας το DVD του Andy Clarke, Designing with CSS, έμαθα μια τεχνική για το κείμενο και το χρώμα που τόσο καιρό ήταν μπροστά στα μάτια μου, αλλά ποτέ δεν μπόρεσα να το συνειδητοποιήσω.

Η τεχνική έχει να κάνει με το να δίνουμε RGBA τιμές στα κείμενά μας, αντί για τις κλασσίκες hexadecimal τιμές π.χ. #123456.

Γιατί αυτό είναι καλό; Γιατί αν κρατήσουμε σταθερή την τιμή του RGB με κάποιο επίσης σταθερό (αλλά όχι μηδενικό) Α, μπορούμε να πάρουμε πολλές αποχρώσεις του χρώματος του κειμένου ανάλογα με το background της σελίδας.

Παράδειγμα:
Στις παρακάτω εικόνες έχω δώσει εξής σταθερές τιμές στο χρώμα για την επικεφαλίδα και την παράγραφο. Οι CSS κανόνες για τα κείμενα είναι μόνο μία γραμμή ο καθένας:

h1{color: rgba(255, 255, 255, .5)}p{color: rgba(255, 255, 255, .8)}

Την ίδια στιγμή, αλλάζω το background και βλέπουμε το εξής:

Το χρώμα των κειμένων είναι πάντα το ίδιο και στην τιμή του (λευκό) και στο ποσοστό της διαφάνειάς του, μόνο που το background χρώμα της σελίδας του δίνει άλλες αποχρώσεις.

Στην περίπτωση λοιπόν που δεν είμαι βέβαιος ποιο θέλω να είναι το background χρώμα της σελίδας μου ή ακόμα κι αν έχω ένα πολύχρωμο background, όπως στο τελευταίο παράδειγμα, το χρώμα των κειμένων είναι από την αρχή και χωρίς κόπο πιο αρμονικό. Αν έπαιρνα με ένα color picker το εκάστοτε χρώμα τόσο για την επικεφαλίδα όσο και για την παράγραφο, θα έβλεπα ότι σε κανένα παράδειγμα δεν είναι λευκό κι ας μοιάζει έτσι.

Για τον Andy Clarke αυτός είναι ένας ακόμα λόγος που αξίζει να σχεδιάζουμε απευθείας στον browser και βέβαια έχει δίκιο. Easy peasy.