Set paragraph text blue and background light grey, compare HEX, RGB, HSL
CSS color syntax and tradeoffs between HEX, RGB, and HSL.
Set color and background-color; HEX is compact, RGB is explicit, HSL is intuitive for lightness/hue.
Claiming HEX lacks transparency or equating RGB and HSL.
What's really being asked
This question tests whether you can apply CSS color properties correctly and explain the ergonomic and technical distinctions between the three most common color formats in web development. Interviewers want to see that you know HEX is a hexadecimal representation of sRGB channels, RGB is a functional notation for those same channels, and HSL reorganizes those channels into a cylindrical color model that humans find easier to reason about for theming and accessibility.
The full answer
First, the exact declarations: color: blue and background-color: lightgrey, or using any equivalent valid color value such as color: #0000FF and background-color: #D3D3D3. Second, a clear breakdown of HEX as a compact string of six or eight characters where each pair represents red, green, and blue in base sixteen, optionally followed by an alpha pair. Third, RGB as rgb(0 0 255) or rgb(0, 0, 255) with optional slash-separated alpha, which makes each channel explicit and easy to animate or generate programmatically. Fourth, HSL as hsl(240 100% 50%) where the first argument is an angle for hue, the second is saturation percentage, and the third is lightness percentage; this format is especially useful for building design systems because you can hold hue constant and vary lightness to generate a monochromatic scale. Fifth, a note on transparency: modern HEX supports eight-digit notation with alpha, such as #0000FF80, and all three formats support an alpha channel in modern browsers.
The mistakes people make
Claiming that HEX does not support transparency is a frequent mistake; eight-digit HEX and the deprecated four-digit shorthand have been widely supported since 2017. Another red flag is saying RGB and HSL are just different syntaxes with no practical difference; this misses the point that HSL decouples luminosity from chroma, making it far easier to create accessible contrast ratios by adjusting only the lightness parameter. A third error is forgetting that background-color is the property that controls the element fill, not background, which is a shorthand for images and other background layers.
What usually comes next
An interviewer might ask how you would programmatically generate a hover state from a base color, which favors HSL because you can calc the lightness parameter. They might also ask about wide-gamut colors or the newer color-mix and relative color syntax in CSS Color Module Level 5, or how you would ensure a text color meets WCAG contrast against a light grey background.
A concrete example
Suppose you need a paragraph with blue text on a light grey background that darkens on hover. You could write the base styles as color: hsl(240 100% 50%) and background-color: #D3D3D3. For the hover state, you might change the background to hsl(0 0% 50%) or darken the text with hsl(240 100% 40%). Using HSL makes the 10 percent lightness drop obvious, whereas achieving the same perceptual shift in RGB requires recalculating multiple channels.
Interview question
When creating lighter and darker shades of a single brand color, why is HSL typically preferred over HEX?
- a.HSL separates lightness from hue, allowing you to adjust shade with one value.Correct
- b.RGB and HSL are functionally identical, so the choice is purely stylistic.
- c.HSL is more compact than HEX, reducing the size of your CSS files.
- d.HEX does not support transparency, so it cannot create subtle shade variations.
Why? this is the answer
HSL keeps hue and saturation separate from lightness, so you can darken or lighten a color by adjusting a single percentage. Option D is a common misconception—modern HEX supports transparency in eight-digit notation, and D ignores that HSL reorganizes color data to make lightness adjustments intuitive.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles