Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Color looping individual colors

Recommended Posts

I would like to set an initial palette of colors (2-3) and then have them all individually cycle and loop through the entire color spectrum. Is this a situation where I just manipulate the individual RGB values from their initial point to 255 and then when that is done start a secondary loop that goes from 0 to 255? Any suggestions on simplest ways of doing this?


Share this post

Link to post
Share on other sites

Hey Shane! Welcome.


Could you describe your goal a little more clearly? Namely:

  1. What format would the initial palette of colors be in?
  2. How do you want to loop it through the entire spectrum - is keeping the S (saturation) and L (light) values but rotating the H (hue) sufficient? or do you need more variance than that?

Share this post

Link to post
Share on other sites

Hey Zach, 

   Great questions. Sorry for being vague. I've only ever really animated directly between two colors so this is the first time I've ever needed to have any colors loop completely through a full rainbow of colors.


1) The project WebGL/three.js. I've basically got 3 texture colors and 2 light colors that area ll set to initial values. There are two primary colors (blue and red) but blue has 3-4 variations of light to dark.. Everything is looking great but I thought that it might be interesting to see the colors slowly rotate through the entire color spectrium over and over.

2) I think this is going to be a loop through the Hue as you said. I did find a little bit of code that essentially does this but because the tween is a tween of the H to 1, at the point that the colors all reached 1 they were all the same color, in sync and don't circle back around to an HSL of 0 to get all of the colors. (Sample code below)


		var colorStarfox = starfoxWireframeMaterial.color.getHSL(starfoxWireframeMaterial.color);
		TweenMax.to(colorArray, 30, {
			h: 1,
			repeat: -1,
			ease: Linear.easeNone,
			onUpdate() {
				starfoxWireframeMaterial.color.setHSL( colorStarfox.h, 1, 0.5);

Basically I was just curious if there was a clever way of going from some initial H value all the way to 1 and then restart at 0 and then keep looping. I have it in my head how to do this but it would be a little messy

Share this post

Link to post
Share on other sites

@ZachSaucier that's because there was literally no color applied at all, so it's treated as transparent.


Here's a simplified version that seems to work for me (unless I'm misunderstanding the goal): 

See the Pen mdyzBXN?editors=0010 by GreenSock (@GreenSock) on CodePen


There are actually a ton of other ways to do this, @shanemielke. Does the above example work well for you or would you like some other options? You probably don't need an onUpdate, though that's perfectly acceptable if you prefer to go that way. 

  • Like 2

Share this post

Link to post
Share on other sites

Both of these definitely have given me the insight I need to create what I'm looking to do. My stumbling point was just figuring out how to take a value that is in between a max/min value (in this case Hue) but have it loop. So often I'm just animating straightforward from/to variables. Not a start at a middle value and then increment/loop between the max/min. Thanks you two ! I should be launching what I have in a couple of days and I'll post the implemented project. :)

  • Like 2

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.