Why Computed CSS Colors Become rgb(): Read Values Without False Alarms

Separate the declaration you wrote from the value you read

Your source might contain #00ff00, lime or hsl(120 100% 50%). These describe the same opaque sRGB lime color. A computed CSS color read is not required to preserve all three author spellings. CSS Color 4 defines serialization of sRGB colors, including the use of rgb()/rgba() forms for values without missing components. [1] [2]

Record the authored input and the computed string as different fields. Losing the original spelling in a computed read is not evidence that the browser changed your palette. Conversely, two matching-looking swatches do not establish equality in every context; transparency, inherited values and output spaces matter.

Run a complete computed-value probe

<div id="probe">Color sample</div>
<pre id="record"></pre>
<script>
 const probe = document.querySelector('#probe');
 const authored = '#00ff00';
 probe.style.color = authored;
 document.querySelector('#record').textContent =
   'Authored: ' + authored + '\nComputed: ' + getComputedStyle(probe).color;
</script>

The table below applies each declared value to its own text probe and reads the computed color. Refresh reruns those reads in your browser. It is a record of this example, not a scan of another website or a cross-browser compatibility claim.

If a requested value is rejected by this browser, the record labels that rejection and reports the inherited fallback separately. It does not call the fallback an accepted version of the requested color.

Keep fractional channels and alpha

A returned rgb()/rgba() component is not always an integer. CSS Color 4 explicitly warns scripts reading getComputedStyle to handle numeric components with fractional parts. A parser that accepts only digits separated by commas can reject a valid result or silently round it. [1]

Alpha is another independent component. Opaque sRGB serialization can use rgb() with implicit alpha1; non-unit alpha uses an explicit alpha in the legacy rgba() form when no component is missing. Do not remove the last value before comparison, and do not turn every returned color into six-digit opaque HEX. [1]

Scroll inside the table on a phone. Keyboard readers can focus the region and use the arrow keys.

Keep an explicit color space instead of forcing HEX

The color() form retains its specified color-space name in serialization. A value such as color(display-p3 1 0 0) is not an instruction to rewrite the three numbers as sRGB HEX. That would substitute a different coordinate system, rather than simply tidy the string. Proper conversion needs the input and destination spaces and the handling of out-of-gamut results. [3]

The example requests that Display P3 value and reports what this browser returns. Its appearance or string does not measure the physical display’s gamut, calibration or reproduction accuracy. Treat those as separate observations. The current guide is about reading values, not implementing a general color-management library.

Write a regression check for the intended behavior

For the three exact opaque lime declarations in this demonstration, compare their actual computed reads and note that they resolve to the same sRGB channels. This is a bounded equivalence case, not a rule that any two strings mentioning rgb are interchangeable. Compare alpha and color space as well as the components when the task expands.

When diagnosing a real difference, inspect the actual element, inherited color, state rules and group opacity. The group-opacity guide shows why a computed black text color can still appear faded. The currentColor guide explains a different local dependency.

Keep a short record: selector and state, authored declaration, computed output, browser, relevant backdrop and what was actually compared. Do not change source tokens solely to make a formatting-only test stop failing.

Try two complete review cases

These are original teaching cases, with the assumptions stated in each question.