P2.2: CSS Colors & Gradients

Colors bring interfaces to life. Web styling uses digital color models to define layouts, texts, borders, and gradients.

1. Color Models

• HEX Colors: Uses 6-digit base-16 codes representing Red, Green, Blue (e.g. #39FF14).
• RGB Colors: Defines red, green, and blue intensities on a scale of 0-255 (e.g. rgb(57, 255, 20)).
• HSL Colors: Defines Hue (0-360 degrees), Saturation (%), and Lightness (%) (e.g. hsl(110, 100%, 54%)).
• RGBA / HSLA: Adds an Alpha channel for transparency (0.0 for invisible, 1.0 for solid).

Adam WathanView Profile 🔗

Real-World Developer Case Study

10 Years Exp

RoleCreator of Tailwind CSS

Salary₹90 Lakhs/yr equivalent

CompanyTailwind Labs

Core Tech Stack

CSS Color SystemsTailwind CSSUtility-First Design

“Predefined color palettes with consistent contrast ratio scales are what make modern web apps look cohesive and premium. HSL is extremely useful for generating color variations programmatically.”

2. CSS Linear & Radial Gradients

Gradients allow transitions between multiple colors.

/* Linear Gradient */
.hero-bg {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
}