How to pass values from JS to HTML tags in lightning web component?

I am trying to pass color to the existing style of HTML tag from Javascript. However, it's not working as I am trying. Please help.

Actual HTML

<template if:true={bmirange1}>
	<div style="color: red; position:auto">BMI: {bmiValue}</div>
</template>

What I am trying

<template if:true={bmirange1}>
	<div style="color:"{colorcode}"; position:auto">BMI: {bmiValue}</div>
</template>

You cannot concatenate values in the tempate, but if colorcode has red as default value, you could define a getter that returns the whole content of style attribute:
JS

get divStyle() {
    return `position:auto; color ${this.colorcode}`;
}

HTML

<template if:true={bmirange1}>
    <div style={divStyle}>BMI: {bmiValue}</div>
</template>

You could also define an appropriate class for that color in the CSS file and set the color via a custom property (i.e. --bmi-color):

.dynamicColor {
     color: var(--bmi-color, red);
}

In the JS, when the colorcode property changes, you will have to set this css custom property too:

document.documentElement.style.setProperty('--bmi-color', this.colorcode);

Then your template would be

<template if:true={bmirange1}>
    <div class="dynamicColor" style="position:auto">BMI: {bmiValue}</div>
</template>