Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Colour tools

  1. #1
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts

    Colour tools

    Because of the thread <http://codingforums.com/showthread.php?s=&postid=163715> I created some RGB-to-HSL and HSL-to-RGB functions for JavaScript that I think might be useful for some of you.
    Code:
    function fnRgbToHsl(r, g, b){ // R G B as integers, 0..255.
        r /= 255;
        g /= 255;
        b /= 255;
        var
            max = Math.max(r, g, b),
            min = Math.min(r, g, b),
            l = (max + min) / 2;
            h = 0,
            s = 0;
        if(max != min){
            s = (l < .5)?
                (max - min) / (max + min):
                (max - min) / (2 - max - min)
            h = (max != r)?
                (max != g)?
                    4 * (r - g) / (max - min):
                    2 * (b - r) / (max - min):
                (g - b) / (max - min);
        }
        h *= 60;
        if(h < 0)
            h += 360;
        return [h, s, l];
    }
    
    function fnHslToRgb(h, s, l){ // H as degrees 0..360, S L as decimals, 0..1.
        h /= 360;
        function fnHueToRgb(x, y, h){
            if(h < 0)
                h += 1;
            else if(h > 1)
                h -= 1;
            return ((h * 6 < 1)?
                x +(y - x) * h * 6:
                (h * 2 < 1)?
                    y:
                    (h * 3 < 2)?
                        x + (y - x) * (2 / 3 - h) * 6:
                        x);
        }
        var
            y = (l > .5)?
                l + s - l * s:
                l * (s + 1),
            x = l * 2 - y,
            r = fnHueToRgb(x, y, h + 1 / 3) * 255,
            g = fnHueToRgb(x, y, h) * 255,
            b = fnHueToRgb(x, y, h - 1 / 3) * 255;
        return [r, g, b];
    }
    If I get the time, I'll build some tools around them, such as methods of getting triad colours, complementary and split complimentary colours, analogous colours, saturation variations, luminance variations (tints and shades) and hue variations (chromatic variations).
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    477
    Thanks
    0
    Thanked 51 Times in 50 Posts
    lol, i'm working on this very thing in my spare time... unfortunately since i recently bought a house i have very little of that.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Surprisingly enough I was thinking about doint the same thing. I get sick of opening up photoshop to color create.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •