Set paragraph text blue and background light grey, compare HEX, RGB, HSL

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: developer.mozilla.org