Colors & Units

hex, rgb, px, %, em, rem

💡 Colors ko specify karne ke multiple "languages" hain (hex, rgb, naam) — jaise same location ko GPS coordinates se ya street address se batana, dono valid, alag context mein useful.

Colors: named colors (red, blue — simple, limited), hex (#FF5733 — RRGGBB format, bahut common), rgb(255, 87, 51) (Red-Green-Blue values), rgba(255, 87, 51, 0.5) (RGB + alpha/transparency).

Units: px (absolute, fixed pixels), % (parent ke relative), em (parent element ke font-size ke relative), rem (root/html element ke font-size ke relative — predictable, isliye modern CSS mein popular).

h1 {
  color: #FF5733;              /* hex */
  background-color: rgb(240, 240, 240);
}

p {
  color: rgba(0, 0, 0, 0.7);   /* 70% opaque black */
  font-size: 16px;              /* absolute */
  padding: 1em;                  /* parent's font-size ke relative */
  margin: 2rem;                   /* root font-size ke relative (predictable) */
  width: 50%;                     /* parent width ke relative */
}

🌈

Colors ko specify karne ke multiple "languages" hain (hex, rgb, naam) — jaise same location ko GPS coordinates se ya street address se batana, dono valid, alag context mein useful.

1 / 2

⚡ Quick Recap

hex/rgb/rgba = color formats, rgba mein transparency bhi
px = fixed, % = parent-relative, em/rem = font-size-relative
rem = predictable, modern CSS mein widely preferred

Is page mein (2 subtopics)

hsl(hue, saturation%, lightness%) ek aur color format hai — hex/rgb se zyada "human-intuitive" hai, especially color variations banane ke liye (jaise same hue, alag lightness = shades).

.primary { background-color: hsl(210, 100%, 50%); }      /* bright blue */
.primary-dark { background-color: hsl(210, 100%, 30%); }   /* darker blue, SAME hue */
.primary-light { background-color: hsl(210, 100%, 80%); }  /* lighter blue, SAME hue */

💡Tip: HSL se ek color palette ke shades/tints generate karna bahut easy hai — sirf lightness value badalo, hue same rakho, automatically related colors mil jaate hain.

vw (viewport width) aur vh (viewport height) screen size ke relative units hain — 1vw = viewport width ka 1%, 1vh = viewport height ka 1%. Full-screen sections, responsive typography ke liye common.

.hero {
  height: 100vh;    /* poori screen height */
  font-size: 5vw;    /* screen width ke relative text size */
}

💡Tip: vh mobile browsers mein thoda tricky ho sakta hai (address bar show/hide hone se viewport height change hoti hai) — modern CSS dvh (dynamic viewport height) unit is problem ko solve karta hai.

← Previous🎯 CSS Selectors Next →📦 The Box Model

Code10x

Colors & Units

HSL Colors — Hue, Saturation, Lightness

vw & vh — Viewport Units