Convert Hex to RGB in AEM 6.5 | Community
Skip to main content
S
sunitac93243435
Level 2
January 29, 2020
Solved

Convert Hex to RGB in AEM 6.5

  • January 29, 2020
  • 1 reply
  • 1366 views

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 @2941342='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 @2941342='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.

 

 

Best answer by Manu_Mathew_

@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})`; }

1 reply

Manu_Mathew_
Community Advisor
Manu_Mathew_Community AdvisorAccepted solution
Community Advisor
November 26, 2024

@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})`; }
    Terms & ConditionsAccessibility statement

    Loading footer...