Skip to content

RAL to HEX Converter: RAL Classic for the Web

Convert RAL Classic codes to HEX values for product pages and CSS.

Last updated

A RAL Classic paint chip converting to a hexadecimal CSS colour declaration.RAL CLASSICRAL 5005Signal Bluebackground:#00539C;CSS-ready HEX
One RAL code, one CSS-ready HEX value — the same paint shown correctly on the product page.

RAL on the web

Industrial brands, parts marketplaces, and architectural visualiser sites all hit the same wall: their products are specified in RAL, but the web is built in CSS. A vehicle modification shop selling powder-coated wheels needs the wheel preview to actually be RAL 9005 Jet Black — not a generic #000000. This tool gives you the HEX form of any RAL Classic code so the on-screen rendering matches what the customer will receive.

The lookup is direct. Every RAL Classic colour has a defined RGB published as part of the standard, and HEX is just a notation for that RGB. Search by code or by name (e.g. "Traffic Yellow"), pick the colour, and copy the 6-digit code. The tool shows both HEX and the underlying RGB so you can use whichever notation your codebase prefers — most modern CSS reads either.

A subtlety to flag for technical writers and brand managers: RAL itself certifies physical colour standards, not digital values. The HEX shorthand is mathematically correct given RAL's published RGB, but the authoritative reference for any contractual brand-colour spec remains the physical RAL fan deck. Always quote the RAL code on the spec sheet, not the HEX. If you're auditing how a printed catalogue compares to the on-screen version, the CMYK to RAL converter closes the loop from print proof back to the manufacturing standard.

Five RAL Classic swatches with HEX codes and CSS usage examples for product pages and parts catalogues.RAL on the Web — HEX & CSSShow RAL-coded products on the web with the right paint colourSwatchRAL CodeHEXCSS ExampleTraffic red3020#BB1E10background: #BB1E10;Signal blue5005#00539Ccolor: #00539C;Moss green6005#0C422Eborder-color: #0C422E;Anthracite7016#293133fill: #293133;Jet black9005#0A0A0Aoutline: 2px solid #0A0A0A;Use the HEX value for screen, but always quote the RAL code on the spec sheet.
Real RAL codes and the CSS lines you'd actually paste into a stylesheet.

Related content

Color Contrast CheckerHow to Calibrate Printer Colors

Was this page helpful?

HEX is a derived notation. The authoritative RAL standard is the physical fan deck — quote the RAL code on spec sheets and contracts. See our methodology and full disclaimer.

Frequently Asked Questions

Can I paste the HEX directly into a CSS variable?

Yes. The 6-digit HEX is valid in any CSS property that accepts a colour: --brand-red: #BB1E10; works in custom properties, Tailwind config, SCSS variables, and styled-components alike.

Should I quote the HEX or the RAL code on a contract?

Always quote the RAL code. RAL certifies physical colour standards, not digital values. The HEX is correct given the published RGB, but if a paint shop and a web developer disagree, the RAL fan deck is the source of truth.

Does HEX shorthand work for any RAL colours?

Rarely. The 3-digit shorthand only applies when each pair of HEX digits is identical (#FFFFFF becomes #FFF). RAL 9010 Pure White and RAL 9005 Jet Black happen to fit that pattern; most RAL codes produce values like #00539C that can't be shortened.