CSS Colors

A value is not the painted thing

CSS uses color values in many properties. color normally establishes an element’s foreground text color; background-color paints a background; border-color paints a border. The same value, such as #1d4ed8, can appear in each property, but the property tells the browser where to apply it. Keeping that distinction straight helps when a rule seems to “do nothing”: a text color will not paint a background, and an inherited text color can affect descendants even when they have no own color declaration. The color property is inherited, so child text commonly receives its parent’s computed foreground color unless a more specific rule supplies another value.

CSS accepts several ways to describe a color. A keyword such as rebeccapurple is readable but offers a fixed named palette. Hexadecimal notation such as #2563eb represents red, green, and blue channels in sRGB notation. Its pairs are 25, 63, and eb in base 16. The shorter #fff is a compact form of white because each digit is duplicated: #fff means #ffffff. Functional notation makes the channels more explicit. rgb(37 99 235) gives red, green, and blue components; hsl(221 83% 53%) describes hue, saturation, and lightness. These are alternative descriptions, not separate kinds of paint.

Alpha changes the visible result

A color can include an alpha component, which controls opacity. Modern functional syntax places it after a slash: rgb(37 99 235 / 0.5) and hsl(221 83% 53% / 50%) both request a half-opaque color. Hex has alpha forms too: #RRGGBBAA, where the final pair is alpha; #00000080 is black with an alpha value of hexadecimal 80. Alpha does not mean “make the original color lighter.” It makes the foreground partly transparent, so the browser composites it with what lies behind it. The same semi-transparent blue can look different over white, gray, and a photograph.

That fact has a practical consequence: do not judge a translucent color from its token alone. Inspect it over its intended background and in the actual state where it appears. A badge background may be translucent while its text remains opaque; a disabled-looking treatment may need more than reduced opacity to remain understandable. This lesson does not calculate accessibility conformance. Later accessibility material addresses testing contrast and non-color cues. Here, the narrower rule is to treat a color declaration as part of a stack of layers, not a guarantee of a single visible result.

Use currentColor to keep related parts aligned

currentColor is a CSS keyword whose value is the computed value of the element’s color property. It can be used where a CSS color is accepted. That makes it useful when an ornament should follow the text color without repeating a literal value. For example, .notice { color: #0f3d8a; border: 2px solid currentColor; } gives the notice text and its border the same computed color. If another rule later changes the notice’s color, the border follows automatically. This is a relationship, not a global variable: it takes the color computed for the particular element.

Use this pattern deliberately. A border tied to currentColor is easier to keep visually coherent, but it may not be the right choice if the border must retain a different semantic role or remain visible when text color changes. Likewise, centralizing repeated colors with custom properties is useful, but custom-property design is separate from this lesson. Before choosing notation, decide what must share a color, what must stay independent, and which CSS property owns each visual part. Then check the result in a browser rather than relying only on the code’s appearance.

Choosing notation for communication

No notation automatically communicates intent. A team may choose hex for compact design tokens, RGB when channel values or alpha are useful, and HSL when a hue-oriented adjustment is easier to reason about. The browser evaluates a valid CSS color value; readers of a stylesheet still need clear names, component boundaries, and tests that show the intended relationship. Prefer one documented convention in a codebase, but do not confuse visual consistency with proof that a color works in every context.