Χρώματα και χρώμα φόντου στη CSS

Χρώματα και χρώμα φόντου στη CSS είναι απ τις ιδιότητες που χρησιμοποιούμε πολύ συχνά στις σελίδες μας.

Θα δούμε λοιπόν παραδείγματα πώς μπορούμε να χρησιμοποιήσουμε τα χρώματα και τα χρώματα φόντου στη σελίδα μας.

Χρώματα (colors) στη CSS

Χρώματα μπορούμε να βάλουμε με τους εξής τρόπους:

Όνομα χρώματος (color name)
RGB – Red Green Blue (Κόκκινο Πράσινο Μπλε)
Δεκαεξαδικό χρώμα (Hexadecimal color)

Όνομα χρώματος (color name)

Με αυτό τον τρόπο γράφουμε το όνομα του χρώματος του οποίου θέλουμε να χρησιμοποιήσουμε με την ιδιότητα color. Η HTML και η CSS υποστηρίζουν 140 ονόματα χρωμάτων.

Παράδειγμα

body{ 
  background-color: lightgrey;
}
h1{ 
  background-color: green;
}
p{ 
  color: blue;
}

RGB – Red Green Blue (Κόκκινο Πράσινο Μπλε)

Με αυτό τον τρόπο γράφουμε rgb( r, g, b) με την ιδιότητα color. Όπου r, g, b βάζουμε ένα ακέραιο από το 0 ως το 255 που ορίζει την ποσότητα κόκκινου, πράσινου και μπλε αντίστοιχα που θέλουμε από το κάθε χρώμα. Μπορούμε να δημιουργήσουμε όλα τα χρώματα αλλάζοντας τις ποσότητες χρωμάτων.

Παράδειγμα

#p1{ 
  color: rgb(255, 0, 0); /* κόκκινο */
}
#p2{ 
  color: rgb(0, 255, 0); /* πράσινο */
}
#p3{ 
  color: rgb(0, 0, 255); /* μπλε */
}
#p4{ 
  color: rgb(0, 0, 0); /* μαύρο */
}
#p5{ 
  color: rgb(255, 255, 255); /* άσπρο */
}

Δεκαεξαδικό χρώμα (Hexadecimal color)

Αυτός ο τρόπος είναι παρόμοιος με τον RGB και γράφεται ως εξής: #RRGGBB με την ιδιότητα color. Όπου RR, GG, BB βάζουμε τους δεκαεξαδικούς αριθμούς που θέλουμε, από το 00 ως το FF, που ορίζουν την ποσότητα χρωμάτων που θέλουμε από το κόκκινο, πράσινο και μπλε αντίστοιχα. Και με αυτό τον τρόπο μπορούμε να χρησιμοποιήσουμε όλα τα χρώματα.

Παράδειγμα

#p1{ 
  color: #FF0000; /* κόκκινο */
}
#p2{ 
  color: #00FF00; /* πράσινο */
}
#p3{ 
  color: #0000FF; /* μπλε */
}
#p4{ 
  color: #000000; /* μαύρο */
}
#p5{ 
  color: #FFFFFF; /* άσπρο */
}

Χρώμα φόντου (background-color)

Για να δώσουμε χρώμα στο φόντο ενός στοιχείου της HTML χρησιμοποιούμε την ιδιότητα background-color και δίνουμε τιμή με έναν από τους παραπάνω τρόπους.

Παράδειγμα

body{ 
  background-color: lightgrey;
}
h1{ 
  background-color: rgb(255, 0, 0); /* κόκκινο */
}
p{ 
  background-color: #0000FF; /* μπλε */
}

Χρώματα και χρώμα φόντου στη CSS