Find answers, ask questions, and connect with our
community around the world.

Forums Forums Web Design Find color that known color would be X% transparency of?

  • Find color that known color would be X% transparency of?

     brianwebs updated 2 years, 7 months ago 2 Members · 2 Posts
  • brianwebs

    Member
    February 12, 2020 at 11:54 pm

    Not sure if this is the right place but is there a way to find a color that a color you already have would be X% transparency of (assuming a white background)???

    For example let’s say I have a light blue and I want to find the darker blue, that at 30% transparency over a white background would yield the same light blue.

  • fallenwater

    Guest
    February 12, 2020 at 11:54 pm

    Using HSL values might achieve this – use the same hue for both colours but increase the saturation and decrease the lightness of the original colour to get your darker colour. You should then be able to add transparency over white to get back to the starting colour.

  • Healyhatman

    Guest
    February 12, 2020 at 11:54 pm

    Would just taking 30% (or some other number whatever it may be) off of the rgb values work?

  • kylo365

    Guest
    February 12, 2020 at 11:54 pm

    For a 30% transparency on a white background, couldn’t you just times each RGB value by 1.3?

  • plasticsparks

    Guest
    February 12, 2020 at 11:54 pm

    Sorry I’m no help but I thought this was a pretty interesting question.

  • starF7sh

    Guest
    February 12, 2020 at 11:54 pm

    what context? if we’re talking css, you could throw your rgb values into the rgba color function, and drop the alpha down 30% (a value of 0.7)

  • mousemke

    Guest
    February 12, 2020 at 11:54 pm

    On mobile so can’t write a more specific thing, but maybe something along these lines? This is a color layering util I wrote a while back. Maybe blending with white etc may lead you down the right path

    “`
    /**
    * ## hex2rgba
    *
    * transforms hex to rgb for later adjustments
    *
    * @param {string} hex color
    *
    * @return {Array<string>} array of rgb channel values
    */
    export const hexToRgb = (h: string): Array<number> => {
    h = h.replace(‘#’, ”);

    if (h.length === 3) {
    h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
    }

    if (h.length !== 8) {
    h += ‘ff’;
    }

    const matches = h.match(new RegExp(`(.{${h.length / 4}})`, ‘g’));

    return (matches || []).map(c => {
    return parseInt(c.length === 1 ? c + c : c, 16);
    });
    };

    /**
    * ## blendColors
    *
    * given 2 overlaying colors, this find the value of the combined color
    *
    * @param {string} foreground hex color
    * @param {string} background hex color
    *
    * @return {string} CSS rgba value
    */
    export const blendColors = (foreground: string, background: string) => {
    const fore = hexToRgb(foreground);
    const back = hexToRgb(background);
    const fAlpha = fore[3] / 255;

    const mixed = fore.map((f, i) => {
    if (i === 3) return f;

    return parseInt(f * fAlpha + back[i] * (1.0 – fAlpha));
    });

    return `rgba(${mixed.join(‘,’)})`;
    };

    “`

  • thefryscorer

    Guest
    February 12, 2020 at 11:54 pm
Viewing 1 - 8 of 8 replies
Reply to: brianwebs
Your information:

Cancel
Original Post
0 of 0 posts June 2018
Now