Home/ Questions/Q 7723645
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T04:29:38+00:00

Im trying to generate a color gradient using ColdFusion. My current code below works

  • 0

Im trying to generate a color gradient using ColdFusion. My current code below works but it basically will only display the start color till the very last line then it will show the end color. No gradient. Just a big block of red then one line of blue. What am i not seeing wrong with my code? 

<cfset BoxNumber = RandRange(100,1000) >

<cfset Start_Red = 255 >
<cfset Start_Green = 0 >
<cfset Start_Blue = 0 >

<cfset End_Red = 0 >
<cfset End_Green = 0 >
<cfset End_Blue = 255 >

<div id="color-band">

<cfloop index = "i" from = 0 to = #BoxNumber# >

<cfset Percent = i \ (BoxNumber - 1) >

<cfset Red = int(((End_Red - Start_Red) * Percent) + Start_Red) >
<cfset Green = int(((End_Green - Start_Green) * Percent) + Start_Green) >
<cfset Blue = int(((End_Blue - Start_Blue) * Percent) + Start_Blue) >

<div style="background-color:rgb(<cfoutput>#Red#</cfoutput>, <cfoutput>#Green#  </cfoutput>, <cfoutput>#Blue#</cfoutput>)">&nbsp;</div>

</cfloop>

</div>

I do know a ColdFusion server can be hard to come by sometimes so i can test the code if need be.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <cfset Percent = i \ (BoxNumber - 1) >
...
<cfset Red = int(((End_Red - Start_Red) * Percent) + Start_Red) >

    At least one problem is the percent formula returns zero (0) most of the time. So the colors never increment because the code is just adding 0 to the starting value. I think the color formula is off as well.

    Unless this is a learning exercise, you might want to look for an existing function or method rather than reinventing the wheel. (Edit: For example, take a look at Craig’s suggestion). Otherwise, you might take a look at cflib.org for inspiration. The fadeList function shows the basic concept for generating a gradient (albeit with hex). This is not exactly right, but something along these lines

    ...    
<cfset RedOffset = (Start_Red - End_Red) / BoxNumber>
<cfset GreenOffset = (Start_Green - End_Green) / BoxNumber>
<cfset BlueOffset = (Start_Blue - End_Blue) / BoxNumber>

<div id="color-band">
<cfloop index="i" from="0" to ="#BoxNumber#">
    <cfset Red = int(Start_Red - (RedOffset * i))>
    <cfset Green = int(Start_Green - (GreenOffset * i))>
    <cfset Blue = int(Start_Blue - (BlueOffset * i))>
    <cfoutput>
    <div style="height: 5px; background-color:rgb(#Red#, #Green#, #Blue#)">&nbsp;</div>
    </cfoutput>
</cfloop>
</div>
    • 0