I need to convert custom syntax into a <span> with a color attribute.

Example input:

First {text with link}{https://www.stackoverflow.com/}. Followed by {colored text}{#85144B}.

For now I used in Javascript:

line = line.replace(/\{(.*?)\}\{(#[0-9,A-F,a-f]{3}|#[0-9,A-F,a-f]{6})\}/g, '<span style="color:$2">$1</span>');

which matches/replaces if there is only one occurence of those brackets {}.

However, with the example above it matches all the other brackets too (greedy?):

Being still a Regex rookie I cannot figure out how to ONLY match the first group (enclosed in brackets) before the hexcolor block.

I tried lookahead assertion and negative lookahead assertion but failed.