Hello AMPScript lovers!
The challenge: I have a report that I run for clients at Clarus Group, and I want the report to use the primary color associated with the client’s brand. The same report is in use across all clients, so I want the code to be adaptable, based on the parameters that I enter. In this case, I use the client’s primary color as the background color for my header rows.
This can have some readability challenges, depending on what color the clients use.
The resolution: In order to solve this, I built out AMPScript that will ask for a client’s color code, and then convert their color code from the Hex value into an RGB Value, and then convert all of the data into an Intensity value. From there, we can choose a dividing line that will automatically apply a White or Black Foreground font color, depending on that intensity, so it will always be automatically readable.
The values used and the idea were generated from an amazing stack overflow post here.
The outcome: Now, if there’s a light background, it chooses black font, and if there’s a dark background, it chooses a white font–automatically!
vs.
The Code:
%%[/* Modify to view AMPScript
<div style="display: none;">*/
var @Hex, @HexR1, @HexR2, @HexG1, @HexG2, @HexB1, @HexB2, @R1, @R2, @G1, @G2, @B1, @B2, @RIntensity, @GIntensity, @BIntensity, @RValue, @RGValue, @GValue, @BValue, @FontColor/* Be sure to use leading # in hex value */
set @Hex = "#A2F458"/* Split apart the 6 characters into their respective values */set @HexR1 = Substring(@Hex,2,1)
set @HexR2 = Substring(@Hex,3,1)
set @HexG1 = Substring(@Hex,4,1)
set @HexG2 = Substring(@Hex,5,1)
set @HexB1 = Substring(@Hex,6,1)
set @HexB2 = Substring(@Hex,7,1)/* Convert Hex value to decimal */
if @HexR1 == "A" then
set @HexR1 = 10
elseif @HexR1 =="B"
then set @HexR1 = 11
elseif @HexR1 =="C"
then set @HexR1 = 12
elseif @HexR1 =="D"
then set @HexR1 = 13
elseif @HexR1 =="E"
then set @HexR1 =14
elseif @HexR1 =="F"
then set @HexR1 = 15
endif
set @R1 = Multiply(@HexR1,16)
/* Repeat for each substring */
if @HexR2 == "A" then
set @HexR2 = 10
elseif @HexR2 =="B"
then set @HexR2 = 11
elseif @HexR2 =="C"
then set @HexR2 = 12
elseif @HexR2 =="D"
then set @HexR2 = 13
elseif @HexR2 =="E"
then set @HexR2 =14
elseif @HexR2 =="F"
then set @HexR2 = 15
endif
set @R2 = Multiply(@HexR2,16)
/* Repeat for each substring */
if @HexG1 == "A" then
set @HexG1 = 10
elseif @HexG1 =="B"
then set @HexG1 = 11
elseif @HexG1 =="C"
then set @HexG1 = 12
elseif @HexG1 =="D"
then set @HexG1 = 13
elseif @HexG1 =="E"
then set @HexG1 =14
elseif @HexG1 =="F"
then set @HexG1 = 15
endif
set @G1 = Multiply(@HexG1,16)
/* Repeat for each substring */
if @HexG2 == "A" then
set @HexG2 = 10
elseif @HexG2 =="B"
then set @HexG2 = 11
elseif @HexG2 =="C"
then set @HexG2 = 12
elseif @HexG2 =="D"
then set @HexG2 = 13
elseif @HexG2 =="E"
then set @HexG2 =14
elseif @HexG2 =="F"
then set @HexG2 = 15
endif
set @G2 = Multiply(@HexG2,16)
/* Repeat for each substring */
if @HexB1 == "A" then
set @HexB1 = 10
elseif @HexB1 =="B"
then set @HexB1 = 11
elseif @HexB1 =="C"
then set @HexB1 = 12
elseif @HexB1 =="D"
then set @HexB1 = 13
elseif @HexB1 =="E"
then set @HexB1 =14
elseif @HexB1 =="F"
then set @HexB1 = 15
endif
set @B1 = Multiply(@HexB1,16)
/* Repeat for each substring */
if @HexB2 == "A" then
set @HexB2 = 10
elseif @HexB2 =="B"
then set @HexB2 = 11
elseif @HexB2 =="C"
then set @HexB2 = 12
elseif @HexB2 =="D"
then set @HexB2 = 13
elseif @HexB2 =="E"
then set @HexB2 =14
elseif @HexB2 =="F"
then set @HexB2 = 15
endif
set @B2 = Multiply(@HexB2,16)
/* Add the two substrings together for Red, Greeen, and Blue */
Set @RIntensity = ADD(@R1,@R2)
Set @GIntensity = ADD(@G1,@G2)
Set @BIntensity = ADD(@B1,@B2)
/* Convert the Individual intensities into a single intensity */
Set @RValue = Multiply(@RIntensity,0.299)
Set @GValue = Multiply(@GIntensity,0.587)
Set @BValue = Multiply(@BIntensity,0.114)
Set @RGValue = ADD(@RValue,@GValue)
Set @RGBIntensity = ADD(@RGValue,@BValue)
/* If the intensity is greater than 186, use black font, otherwise, use white. */
Set @FontColor = "#ffffff"
IF @RGBIntensity > 186
THEN SET @FontColor = "#000000"
endif
/*
</div>
*/ ]%%
