NCS to HEX Converter: Notation to Web Colors

A brand book lands on your desk with the primary colour given as NCS S 1070-B and nothing else: no hex, no RGB, just the Natural Colour System notation a paint or interior supplier handed the client. Your stylesheet, your Tailwind config, and your Figma library all speak one language for colour, and it is hex. This converter closes that gap. Type the NCS notation, get the hex code, paste it into a custom property. The NCS to RGB converter resolves the same lookup for engines that want an R, G, B triplet; this page is the version for web and interface work, where a six-digit hex is the value that drops straight into code.

Hex is the format a stylesheet actually wants

The conversion here is not doing anything the RGB lookup can't. An NCS code resolves to one stored colour, and hex and RGB are two ways of writing that same colour. What differs is where the value is going. A hex string is the default token in CSS (--brand: #0065bd), in a Tailwind colour object, in a Figma or Sketch style, and in almost every component library's theme file. Writing rgb(0 101 189) works too, but hex is shorter, it is what the design tools export, and it is what a teammate expects to see in a token named blue-600. When the spec is in NCS and the destination is a stylesheet, going straight to hex saves the step of formatting an RGB triplet by hand.

An NCS code reads like a recipe; hex reads like an instruction

Here is the part worth understanding before you convert. An NCS notation is not an index number the way a RAL or Pantone code is; it is a description you can decode by eye. Take S 3050-Y80R. The first two digits are blackness (30%), the next two are chromaticness (50%, how saturated), and the part after the hyphen is hue: Y80R means yellow shifted 80% of the way toward red, so mostly red with a little yellow warmth. Read together, that is a medium, softly saturated, earthy red. Convert it and you get #B6562A. The hex encodes the identical colour, but as three device-channel values (red 182, green 86, blue 42) that tell a screen how to drive its subpixels, not how the colour looks to a person. Neither notation is arbitrary; the difference is that the NCS code carries perceptual meaning and the hex carries device instructions. Hand someone an NCS code and they can picture it. Hand them #B6562A and they have to render it to know.

The hex is an estimate, not the colour

The conversion has exactly one soft step, and being clear about it will save a support ticket. The final move, RGB to hex, is exact: the encoder takes the stored triplet and writes it losslessly, so every NCS notation returns one hex code, the same one every time. The soft step is upstream. NCS colours are defined by physical, measured samples in an atlas (matte painted chips viewed under a standard light), and there is no single official formula that turns those samples into sRGB. The RGB values this tool holds are common approximate renderings of those chips. So the hex you copy is exact for the RGB we store, but that RGB is itself an estimate of a physical surface colour. Two consequences follow: different NCS-to-hex tools will sometimes disagree by a few values, and the colour on your monitor will not match the painted sample under real light. Use the hex for layout, mockups, and interface work; when a physical print or paint has to match, sign it off against an NCS sample, not the screen.

Check contrast before you ship the colour

Because the output is aimed at screens, the tool shows the hex's contrast ratio against white and black the moment you resolve a colour. That is the number WCAG cares about: body text needs a ratio of at least 4.5:1 against its background, large text at least 3:1. A saturated NCS red like S 1080-R (#D51725) lands at about 5.3:1 on white — past the 4.5:1 body-text minimum with the 3:1 large-text bar well covered — but many vivid NCS hues land lower, so check each one rather than assume. If you are pairing an NCS-derived colour against something other than plain white or black, run both values through the colour contrast checker for the exact ratio. For the reverse trip, pulling a hex you already have back into its channels, hex to RGB handles it.