Nearby lessons
6 of 19🎨 CSS Colors
📌 What are CSS Colors?
CSS Colors allow you to apply vibrant styling to your webpages using various color formats like named colors, hexadecimal, RGB, RGBA, HSL, and HSLA. Colors can be applied to text, background, borders, and other elements.
🌈 Color Formats
- Named Colors – Predefined keywords like
red,blue,green - Hexadecimal – Six-digit codes starting with
#(e.g.,#FF0000) - RGB – Based on red, green, and blue channels (e.g.,
rgb(255,0,0)) - RGBA – Like RGB, but adds opacity (alpha) (e.g.,
rgba(255,0,0,0.5)) - HSL/HSLA – Defines color using hue, saturation, lightness (+ alpha for HSLA)
🌈 Color Overview
CSS provides multiple methods to define colors for elements. Understanding how each method works gives you flexibility and control over your design.
🖍️ Named Colors Example
Named colors are predefined color names in CSS, such as red, blue, and green. They are easy to remember and use.
Code Example
🔢 Hexadecimal Color Example
Hexadecimal colors are represented using a # followed by six digits (0–9, A–F) indicating red, green, and blue values. Example: #00FF00 for green.
Code Example
🌐 RGB Color Example
RGB colors use the format rgb(red, green, blue) with values between 0 and 255. Example: rgb(0, 0, 255) for blue.
Code Example
🔍 RGBA Color Example
RGBA colors are similar to RGB but include an alpha (opacity) value between 0 and 1. Example: rgba(255, 0, 0, 0.5) creates a semi-transparent red.
Code Example
📋 Common Colors Reference
- 🔴 Red – #FF0000 – rgb(255,0,0)
- 🟠 Orange – #FFA500 – rgb(255,165,0)
- 🟡 Yellow – #FFFF00 – rgb(255,255,0)
- 🟢 Green – #008000 – rgb(0,128,0)
- 🔵 Blue – #0000FF – rgb(0,0,255)
- 🟣 Purple – #800080 – rgb(128,0,128)
- 🟤 Brown – #A52A2A – rgb(165,42,42)
- ⚪ White – #FFFFFF – rgb(255,255,255)
- ⚫ Black – #000000 – rgb(0,0,0)
- 🔘 Gray – #808080 – rgb(128,128,128)