How to darken a given color (int)

Question

I have a function that takes a given color and I would like it to darken the color (reduce its brightness by 20% or so). I can't figure out how to do this given just a color (int). What is the proper approach?

public static int returnDarkerColor(int color){
    int darkerColor = .... 
    return darkerColor;
}

Rubbish

Answer 1

A more Android way of doing it:

    public static int manipulateColor(int color, float factor) {
        int a = Color.alpha(color);
        int r = Math.round(Color.red(color) * factor);
        int g = Math.round(Color.green(color) * factor);
        int b = Math.round(Color.blue(color) * factor);
        return Color.argb(a,
                Math.min(r,255),
                Math.min(g,255),
                Math.min(b,255));
    }

You will want to use a factor less than 1.0f to darken. try 0.8f.

Colemancolemanite

Worked pretty well! – Slog

Answer 2

There's even a simpler solution that has not been mentioned before, Android has a class called ColorUtils which can you help you with that here's a Kotlin snippet of an extension function

inline val @receiver:ColorInt Int.darken
    @ColorInt
    get() = ColorUtils.blendARGB(this, Color.BLACK, 0.2f)

the method ColorUtils.blendARGB takes your color as the first parameter and the second color you want to blend, black in this case and finally, the last parameter is the ratio between your color and the black color you're blending.

Nightie

Answer 3

A simpler solution using HSV like RogueBaneling suggested:

Kotlin

@ColorInt fun darkenColor(@ColorInt color: Int): Int {
    return Color.HSVToColor(FloatArray(3).apply {
        Color.colorToHSV(color, this)
        this[2] *= 0.8f
    })
}

Java

@ColorInt int darkenColor(@ColorInt int color) {
    float[] hsv = new float[3];
    Color.colorToHSV(color, hsv);
    hsv[2] *= 0.8f;
    return Color.HSVToColor(hsv);
}

No complex bitwise operations or Math necessary. Move 0.8f to an argument if needed.

Metzgar

what should be to lighten a color? – Allegra

Change the 0.8f parameter to a value larger that 1. – Metzgar

Answer 4

best way use the ColorUtils.blendARGB

Darker:

val newColor = ColorUtils.blendARGB(this, Color.BLACK, 0.5f)

Lighter:

val newColor = ColorUtils.blendARGB(this, Color.WHITE, 0.5f)

Amphoteric

Answer 5

If you want more simple and not accurately, below might help you.

public static int returnDarkerColor(int color){
    float ratio = 1.0f - 0.2f;
    int a = (color >> 24) & 0xFF;
    int r = (int) (((color >> 16) & 0xFF) * ratio);
    int g = (int) (((color >> 8) & 0xFF) * ratio);
    int b = (int) ((color & 0xFF) * ratio);

    return (a << 24) | (r << 16) | (g << 8) | b;
}

Bitolj

1. You're right. I just want show value 0.2f. 2, 3. It's my mistake. I just typed. Thank you for fixing. – Bitolj

This works properly and is much more efficient than the accepted answer – Grano

Works great. Used to set my title bar to a darkened shade of the action bar – Hagio

Answer 6

Convert the color to a HSV array, then reduce the brightness by 20%, then convert HSV array back to RGB with HSVToColor. Note: The value you are looking to change in the array will be the V-value. (i.e., hsv[2])

Umbrian

Answer 7

Based on @Rasoul Miri answer you can create extensions to your main color class in a more kotlinic way. For example, if using the color class from the package androidx.compose.ui.graphics.Color in Android you can add some extensions to it in this way:

fun Color.lighter(factor: Float = 1f) =
  Color(ColorUtils.blendARGB(this.toArgb(), Color.White.toArgb(), factor))

fun Color.darker(factor: Float = 1f) =
  Color(ColorUtils.blendARGB(this.toArgb(), Color.Black.toArgb(), factor))

This is a very handful function that can be used by simply doing

val myNewLighterColor = MaterialTheme.colors.primary.lighter(0.5f)
val myNextDarkerColor = MaterialTheme.colors.primary.darker(0.5f)

Brougham

Answer 8

This way you can select percentage of color and thus fetch a shade darker or a shade lighter

int  color = ((ColorDrawable)c2.getBackground()).getColor();
int  colorLighter = color - color * 40/100;
int  colorDarker = color + color * 40/100;

colorlighter gives us a lighter shade of color from button's background colordarker gives us a darker shade of color from button's background

Kaffiyeh

I think you should set limit value to prevent overflowing color max value(0xFFFFFF) – Agog