Convert Hex to RGB in AEM 6.5

[sunitac93243435]

Dear All,

I am getting my hex color from dialog to Html by using below.

dialog

<navBackGroundColor
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldDescription="Enter the Navigation component background color Hex code"
fieldLabel="Navigation Component Background Color Hex Code"
hexvalidator="hexvalidation"
name="./navigationBackGroundColor"/>

HTL

<style>
.sunitaNavigation .stickyNav {
background-color: rgb(${properties.navigationBackGroundColor @CONTEXT='styleString'});
}
</style>

<td class="mandatoryField">
${properties.navigationBackGroundColor}
<p style="background-color:${properties.navigationBackGroundColor @ context='scriptString'}">${properties.navigationBackGroundColor}</p>
</td>

Now in my css (already i called in HTL in above) , I want rgb like below.

<style>
.sunitaNavigation .stickyNav {
background-color: rgb(${properties.navigationBackGroundColor @CONTEXT='styleString'});
}
</style>

But my color is not coming in rgb..it is coming in hex only. Do I need to convert Hex to RGB ?

How can I achieve this ?

Please suggest.

[Manu_Mathew_ · Accepted solution]

@sunitac93243435 

You can try something like-

<style> .sunitaNavigation .stickyNav { background-color: rgb( ${properties.navigationBackGroundColor.substring(1, 3) @ context='styleString'} | ${properties.navigationBackGroundColor.substring(3, 5) @ context='styleString'} | ${properties.navigationBackGroundColor.substring(5, 7) @ context='styleString'} ); } </style>

or could write a function:

function hexToRgb(hex) {
    // Remove the '#' if it exists
    hex = hex.replace(/^#/, '');

    // Parse the r, g, b values
    let bigint = parseInt(hex, 16);
    let r = (bigint >> 16) & 255;
    let g = (bigint >>  & 255;
    let b = bigint & 255;

    return `rgb(${r}, ${g}, ${b})`;
}