CODEWITHSUNDEEP
colors
smash85
smash85

Reputation:

Smooth transition between two colors

I am trying to figure out how to achieve a smooth transition between two colors.

I.E. this image is taken from Wikipedia.

enter image description here

When I try to do the same using my code (C++), first idea that came to mind is using the HSV color space, but the annoying in-between colors show-up.

enter image description here

What is the good way to achieve this ?

Upvotes: 2

Views: 3648

Answers (4)

Daniel
Daniel

Reputation: 1

I dont know what your using to display (DirectX, Windows display or whatever ) but try just having two images, one solid color and a single color with a fade from solid to transparent infront. That might work.

Upvotes: 0

John
John

Reputation: 12193

This is caused by a lack of color in between, as black (or grey in your case) = desaturated. It is like putting two transparent fade images together, there is a see through area in the middle as 2 50% transparencies don't equal 100% solid color.

To avoid this, I'd suggest placing one color above the other and fading that to transparent. That way there is a solid color base with the transition above.

Upvotes: 0

SKOOP
SKOOP

Reputation: 364

This is going to sound weird, maybe... but vertex shaders will do this nicely. If that's a quad (two tris) then place one colour on the left 2 vertices, and the other on the right, and it should blend across nicely.

Caveat: Assumes you're using some kind of OpenGL.

Upvotes: 1

curious
curious

Reputation: 155

The only part of your question I feel I can answer is that you must somehow be transitioning through too many values in the H part of HSV.

  • H is for hue (different colors, like the rainbow effect in your gradient). In this case, it looks to me like you are only merging 2 different hues.
  • S is for saturation (strength of color from highly saturated to gray)
  • L is for lightness (more or less luminosity (from your color to its most white)

Upvotes: 0

Related Questions