Cascade FallsISSUE #10 of 33

colors · names · hex · rgb · rgba

StylaVSThe Specificity Sphinx

Styla saysColor values: named keywords, #hex, and rgb()/rgba() with an alpha channel.

Set any color with a keyword (tomato), a hex code (#b388ff or shorthand #b3f), or rgb(179 136 255). The rgba() form adds alpha (0-1) for transparency. Hex dominates real code; rgb shines when you need an alpha channel.

Power-ups you unlock

Keywords, #hex (or #rgb shorthand), rgb()/rgba()
Alpha 0-1 makes a color translucent
Hex is the common default in code
Modern syntax allows: rgb(0 0 0 / 50%)

The Specificity Sphinx attacks — common mistakes

Forgetting # on hex
Using opacity (whole element) when you wanted a translucent color
Mixing 0-255 and percentage rgb values

Boss battleSet a heading to a hex color and a box to a 40%-alpha background with rgba.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>h1{color:#b388ff}.box{background:rgba(138,255,157,.4);padding:20px}</style></head><body style="background:#06040d"><h1>hex color</h1><div class="box">40% alpha background</div></body></html>

▶ Open the interactive comic issue

‹ Comments · Documenting Styles Colors · Hsl · Hsla · Oklch ›