Color & design

Convert a HEX Color to RGB in a Stylesheet

Replace a HEX color with an equivalent RGB value in a stylesheet while preserving opacity, checking the rendered property and avoiding unsupported alpha inputs.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

To replace a HEX color in a stylesheet, convert its red, green and blue channels and change only the intended color value. For example, #ff6347 and rgb(255, 99, 71) encode the same opaque RGB color. A correct conversion should preserve the component's appearance when its other styling and rendering context remain unchanged.

Identify the property that actually controls the color

Start with the rendered component and inspect the property responsible for the visible color. Text usually uses color, while a panel may use background-color. A border, shadow or gradient can have its own independent color value. Editing a nearby declaration is not enough if a more specific rule or a later declaration supplies the final value.

For a button using a reusable design token, find whether the token is shared with other components. Changing a literal in one rule and changing the token definition have different scope. When the task is only a notation conversion, preserve the token's existing value and avoid changing unrelated states such as hover or disabled styling.

Replace one value with a verified equivalent

.notice {
  background-color: #ff6347;
}

/* Equivalent channel values: */
.notice-rgb {
  background-color: rgb(255, 99, 71);
}

In HEX to RGB, choose HEX → RGB and enter the original value. Verify the RGB line, then use the function value in the intended declaration. The Copy button returns a labeled multi-line result, so copy only the value needed for a CSS property. Labels such as RGB: do not belong inside the property's value.

Use a second color to verify the process independently: #336699 maps to rgb(51, 102, 153). The pairs 33, 66 and 99 represent decimal 51, 102 and 153. If both conversions give the same output, recheck the selected mode and whether the input change actually reached the converter.

Preserve transparency as a separate part of the task

Three-digit and six-digit HEX values describe the channels accepted by this tool. Four-digit and eight-digit forms include an alpha component, which this converter deliberately rejects. Do not drop the extra digits and assume that the original transparency was preserved. Likewise, an existing RGB value with alpha cannot be represented fully by an opaque six-digit result alone.

Check whether transparency comes from the color itself, an opacity property on the element or an ancestor. Converting the color notation does not change those other properties. Moving transparency from an element's opacity to its background color can affect descendants differently, so it is a separate styling change that needs its own review.

Compare the actual rendered component

Place the original and converted declarations on otherwise identical test elements with the same surrounding styles. Inspect their computed background-color values and compare them. Then test the actual component in the application, including any relevant hover, focus and disabled states. A rule that looks correct in isolation can still be overridden in the real stylesheet.

If the appearance changes despite equal channel values, inspect the cascade, inherited properties, overlays and compositing context. Check that the new value is syntactically accepted instead of silently falling back to an earlier declaration. Avoid adjusting the channels by eye before finding why the expected declaration is not being used.

Keep conversion separate from design approval

Equal HEX and RGB channels do not establish that text is readable on its background or that a palette suits the product. Those questions depend on the foreground-background combination and the complete interface. For this task, the completion criterion is narrower and measurable: the intended property uses equivalent channel values, transparency is preserved and the same component states still render as expected.

Syntax reference

MDN's CSS color reference describes the syntax and color formats used by CSS.