0 votes

how to change saturation for one channel color (RGB)? any idea, demo, or tool, or shader code?

Godot version 3.3.4
in Engine by (45 points)

I mean like this picture
enter image description here
how to show all color gray Except one color?

1 Answer

+1 vote
Best answer

Method is quite simple, altough you need to implement some color maths to achieve it. Generally steps are these (loop over every pixel of an image, or write a fragment shader if you need it real time):

Convert color into hsv (hue saturation value)
If hue is in certain range, leave color as is.
Else set saturation to 0 and convert color back into rgb.

Godot has inbuilt tools to convert to and back from hsv in Color class, but if you want to make it with shader, you need to write the conversion yourself. You can google for rgb to hsv conversion algorithms, there's good explanations and code examples how to achieve this.

by (906 points)
selected by

Expanding on your answer, shader-wise, there is a base here for desaturation effect, should give you something to experiment with:


shader_type canvas_item;

uniform float saturation;

void fragment() {
    vec4 tex_color = texture(TEXTURE, UV);

    COLOR.rgb = mix(vec3(dot(tex_color.rgb, vec3(0.299, 0.587, 0.114))), tex_color.rgb, saturation);
    COLOR.a = tex_color.a;

I remember some old shader codes that was interesting to experiment on previous versions of godot made by Juan, I think it was for 2.x, but I didn't found them on my stuff.

Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.