Calculate shades of theme colors

[gcampanine]

Hi everyone!

I was taking a look at PowerBI themes these days and started wondering about how does it calculate the shades of the colors on the theme. 

When we create a theme, we provide the hex codes for the "main" colors, and then PowerBI creates shades for these colors (60% lighter, 40% lighter, 20% lighter, 25% darker and 50% darker).

I tried searching how to calculate the percentage of a hex value, but had no success.

I was wondering that maybe it is done by converting the hex values to HSL values and then modifying the L to a lighter value, but I had no success trying this convertion either.

Anyone have any idea about how it is done?

Thank you!

[v-gizhi-msft]

Hi,

After some research, I don’t find any document or blog to explain to calculate these shade colors.

For your issue, I would suggest you create a support ticket:

Here is the link: https://powerbi.microsoft.com/en-us/support/

Best Regards,

Giotto Zhi

[gcampanine]

Thank you very much @v-gizhi-msft  ! This is not really and issue, I was just curious about it, so no need to create a support ticket, I guess 😅

[v-gizhi-msft · Accepted solution]

Hi,

After my research, I find its algorithm.

1)I create a json file to test:

{

  "name": "Valentine's Day",

  "dataColors": [ "#990011", "#cc1144", "#ee7799", "#eebbcc", "#cc4477", "#cc5555", "#882222", "#A30E33" ],

  "background": "#FFFFFF",

  "foreground": "#ee7799",

  "tableAccent": "#990011"

}

2)After a lot of calculation, I find that the 60%/40%/20%lighter color is related to ‘S’(Saturation) and ‘V’(value) of ‘HSV’ of the specified color just like ‘#990011’.

   And 25%/50% darker color is related to ‘V’(value) of ‘HSV’.

   I choose some sample specified color to calculate its data of ‘HSV’:

Tips: HEX convert to HSV:

         https://codebeautify.org/hex-to-hsv-converter

HEX	Category	RGB	HSV
#cc1144	Specified color	(204,17,68)	344,92,80
#eba0b4	60% lighter	(235,160,180)	344,32,92
#e0708f	40% lighter	(224,112,143)	343,50,88
#d64169	20% lighter	(214,65,105)	344,70,84
#990d33	25% darker	(153,13,51)	344,92,60
#660922	50% darker	(102,9,34)	344,91,40

The formula of lighter shows:

‘S’ of color(60% lighter) = [‘S’ of specified color]*(1-60%)

‘S’ of color(40% lighter) = [‘S’ of specified color]*(1-40%)

‘S’ of color(20% lighter) = [‘S’ of specified color]*(1-20%)

‘V’ of color(60% lighter) = [V’ of specified color]*(1-60%)+100*60%

‘V’ of color(40% lighter) = [V’ of specified color]*(1-40%)+100*40%

‘V’ of color(20% lighter) = [V’ of specified color]*(1-20%)+100*20%

And the ‘H’ of ‘HSV’ is the same with specified color.

The formula of darker shows:

‘V’ of color(25% darker) = [‘V’ of specified color]*(1-25%)

‘V’ of color(50% darker) = [‘V’ of specified color]*(1-50%)

And the ‘H’/’S’ of ‘HSV’ are the same with specified color.

After calculating the ‘HSV’ of other five colors, they can be unique correspond to ‘HEX’.

All above calculated results are approximate values but the deviation is small.

Here are some other sample data for you to test:

Group1:

HEX	Category	RGB	HSV
#ee7799	Specified color	(238,119,153)	343,50,93
#f8c9d0	60% lighter	(248,201,214)	343,19,97
#f5adc2	40% lighter	(245,173,194)	343,29,96
#f192ad	20% lighter	(241,146,173)	343,39,95
#b35973	25% darker	(179,89,115)	343,50,70
#773c4d	50% darker	(119,60,77)	343,50,47

Group2:

HEX	Category	RGB	HSV
#eebbcc	Specified color	(238,187,204)	340,21,93
#f8e4eb	60% lighter	(248,228,235)	339,8,97
#f5d6e0	40% lighter	(245,214,224)	341,13,96
#f1c9d6	20% lighter	(241,201,214)	341,17,95
#b38c99	25% darker	(179,140,153)	340,22,70
#775e66	50% darker	(119,94,102)	341,21,47

Best Regards,

Giotto Zhi

[gcampanine]

@v-gizhi-msft this was just PERFECT! Thank you very much!