Expressing color values Flashcards
(15 cards)
What are the four main ways to express color values in CSS?
- Color name (darkgreen) 2. RGB values rgb(240, 248, 255) 3. RGBA values rgba(255, 0, 0, 0.5) 4. Hexadecimal #006400 - Each method has different use cases and advantages
Write CSS code to make an h1 element have dark green text using a color name.
h1 { color: darkgreen; } - Use the color property - Write the color name directly without quotes - Simple and readable for common colors
What does RGB stand for and what is the value range for each component?
RGB stands for Red, Green, Blue. Each component ranges from 0 to 255. First value = red amount, second = green amount, third = blue amount. Example: rgb(255, 0, 0) = pure red
Write CSS to give the body element a light blue background using RGB values.
body { background-color: rgb(240, 248, 255); } - Use rgb() function - Three values separated by commas - Higher values = more of that color component
Create CSS for dark green text on an h1 element using RGB values.
h1 { color: rgb(0, 100, 0); } - rgb(0, 100, 0) creates dark green - No red (0), moderate green (100), no blue (0) - Middle range green value creates darker shade
What is RGBA and how does it differ from RGB?
RGBA is RGB plus Alpha (opacity). RGB has 3 values (red, green, blue from 0-255). RGBA has 4 values - same RGB plus alpha from 0 to 1. Alpha: 0 = fully transparent, 1 = fully opaque
Write CSS for semi-transparent red text using RGBA.
color: rgba(255, 0, 0, 0.5); - 255 red, 0 green, 0 blue = pure red - 0.5 alpha = 50% transparency - Useful for overlays and layered effects
What is hexadecimal color notation and what symbol indicates it’s hexadecimal?
Hexadecimal uses base-16 notation (0-9, A-F) to represent RGB values. Uses hashtag (#) symbol in front to indicate hexadecimal. Format: #RRGGBB where each pair represents red, green, blue components
Write CSS to make an h1 element dark green using hexadecimal notation.
h1 { color: #006400; } - #006400 represents dark green - 00 = no red, 64 = moderate green, 00 = no blue - Hexadecimal is compact and widely supported
Convert this RGB value to its hexadecimal equivalent: rgb(255, 0, 0)
FF0000 - 255 in decimal = FF in hexadecimal - rgb(255, 0, 0) = pure red - #FF0000 = FF red, 00 green, 00 blue
Which color format would you choose for: a) Simple styling b) Transparency effects c) Precise color matching?
a) Color names (simple, readable) b) RGBA (has alpha channel for transparency) c) Hexadecimal (precise, compact, design-friendly) - Choose format based on specific needs
What’s wrong with this CSS color code: color: rgb(300, 150, 50);
RGB values cannot exceed 255. Should be rgb(255, 150, 50) - Each RGB component must be 0-255 - Values over 255 may cause errors or unexpected behavior
Write CSS for a semi-transparent dark blue background using RGBA.
background-color: rgba(0, 0, 139, 0.7); - 0 red, 0 green, 139 blue = dark blue - 0.7 alpha = 70% opacity - Good for overlay backgrounds
How do you make a color fully transparent vs fully opaque using RGBA?
Fully transparent: alpha = 0 (rgba(255, 0, 0, 0)) Fully opaque: alpha = 1 (rgba(255, 0, 0, 1)) - Alpha 0 = invisible, Alpha 1 = solid - Values between 0-1 create varying transparency
Compare the advantages of each color format: names, RGB, RGBA, hexadecimal.
Names: Simple, readable, limited colors. RGB: Precise control, intuitive mixing, no transparency. RGBA: Same as RGB plus transparency control. Hexadecimal: Compact, design-standard, precise, no transparency built-in
