Question

88

Generate Random Color distinguishable to Humans

rated 0 times [ 90] [ 2] / answers: 1 / hits: 77169 / 12 Years ago, wed, april 4, 2012, 12:00:00

I am trying to randomly generate a color in hex in javascript.

However the colors generated are almost indistinguishable from eachother.

Is there a way to improve it?

Here is the code I am using:

function randomColor(){

   var allowed = "ABCDEF0123456789", S = "#";

    

   while(S.length < 7){

       S += allowed.charAt(Math.floor((Math.random()*16)+1));

   }

   return S;

}

I heard something about HSL and HSV color model but can't get
it to work in my code.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

trayvon

Add To Favorites

Follow

Total Points: 35

Total Questions: 117

Total Answers: 88

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

trayvon questions

1 Bootstrap modal UncaughtType Error on modal loading

Sun, Apr 24, 22, 00:00, 2 Years ago

1 Iterate through array of objects using javascript

Wed, Feb 9, 22, 00:00, 2 Years ago

1 Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058

Sun, May 23, 21, 00:00, 3 Years ago

1 Why could window scroll event not being fired

Tue, Jul 14, 20, 00:00, 4 Years ago

1 Error: Connecting to a SFTP server with ssh2-sftp-client in a AWS lambda function throws a time out

Thu, Jun 4, 20, 00:00, 4 Years ago

View All

answered 12 Years ago jeffn · Accepted Answer

You could use a fixed set of colors, such as the ones listed in the jquery.color.js plugin.

List of colors from jquery.color.js plugin:

Colors = {};

Colors.names = {

    aqua: #00ffff,

    azure: #f0ffff,

    beige: #f5f5dc,

    black: #000000,

    blue: #0000ff,

    brown: #a52a2a,

    cyan: #00ffff,

    darkblue: #00008b,

    darkcyan: #008b8b,

    darkgrey: #a9a9a9,

    darkgreen: #006400,

    darkkhaki: #bdb76b,

    darkmagenta: #8b008b,

    darkolivegreen: #556b2f,

    darkorange: #ff8c00,

    darkorchid: #9932cc,

    darkred: #8b0000,

    darksalmon: #e9967a,

    darkviolet: #9400d3,

    fuchsia: #ff00ff,

    gold: #ffd700,

    green: #008000,

    indigo: #4b0082,

    khaki: #f0e68c,

    lightblue: #add8e6,

    lightcyan: #e0ffff,

    lightgreen: #90ee90,

    lightgrey: #d3d3d3,

    lightpink: #ffb6c1,

    lightyellow: #ffffe0,

    lime: #00ff00,

    magenta: #ff00ff,

    maroon: #800000,

    navy: #000080,

    olive: #808000,

    orange: #ffa500,

    pink: #ffc0cb,

    purple: #800080,

    violet: #800080,

    red: #ff0000,

    silver: #c0c0c0,

    white: #ffffff,

    yellow: #ffff00

};

The rest is simply picking a random property from a Javascript object.

Colors.random = function() {

    var result;

    var count = 0;

    for (var prop in this.names)

        if (Math.random() < 1/++count)

           result = prop;

    return result;

};

Using Colors.random() might get you a human-readable color. I even powered an example below.

(function(){

    Colors = {};

    Colors.names = {

        aqua: #00ffff,

        azure: #f0ffff,

        beige: #f5f5dc,

        black: #000000,

        blue: #0000ff,

        brown: #a52a2a,

        cyan: #00ffff,

        darkblue: #00008b,

        darkcyan: #008b8b,

        darkgrey: #a9a9a9,

        darkgreen: #006400,

        darkkhaki: #bdb76b,

        darkmagenta: #8b008b,

        darkolivegreen: #556b2f,

        darkorange: #ff8c00,

        darkorchid: #9932cc,

        darkred: #8b0000,

        darksalmon: #e9967a,

        darkviolet: #9400d3,

        fuchsia: #ff00ff,

        gold: #ffd700,

        green: #008000,

        indigo: #4b0082,

        khaki: #f0e68c,

        lightblue: #add8e6,

        lightcyan: #e0ffff,

        lightgreen: #90ee90,

        lightgrey: #d3d3d3,

        lightpink: #ffb6c1,

        lightyellow: #ffffe0,

        lime: #00ff00,

        magenta: #ff00ff,

        maroon: #800000,

        navy: #000080,

        olive: #808000,

        orange: #ffa500,

        pink: #ffc0cb,

        purple: #800080,

        violet: #800080,

        red: #ff0000,

        silver: #c0c0c0,

        white: #ffffff,

        yellow: #ffff00

    };

    Colors.random = function() {

        var result;

        var count = 0;

        for (var prop in this.names)

            if (Math.random() < 1/++count)

               result = prop;

        return { name: result, rgb: this.names[result]};

    };

    var $placeholder = $(.placeholder);

    $placeholder.click(function(){

        var color = Colors.random();

        $placeholder.css({'background-color': color.rgb});

        $(#color).html(It's  + color.name);

    });

})();

.placeholder {

    width: 150px;

    height: 150px;

    border: 1px solid black;

}

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>

<div class=placeholder></div>

<span id=color>Click the square above.</span>