Limit the random color generator function to only produce a predetermined color in JavaScript

Question

Limit the random color generator function to only produce a predetermined color in JavaScript

By utilizing the following function, I am able to create random colors:

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

However, I have a requirement to exclude "#A9A9A9" or any shades of grey from the generated colors. Simply adding an if condition after generating the color and calling the function again does not appear to be an efficient solution. Can you provide suggestions on how this can be achieved?

javascript colors

Answer 1

Answer №1

In order to eliminate true grey from your color palette, you can make some adjustments to your code. One option is to use the HSL color space:

var color = 'hsl(' + Math.round(Math.random() * 359) + ',100%,50%)';

By setting specific ranges for Hue and ensuring Saturation/Lightness are at reasonable levels, you can avoid generating grey, black, or white colors. For those who prefer RGB, it's possible to convert HSL to RGB using libraries like https://github.com/Qix-/color-convert.

To demonstrate a more advanced approach, here is a function that generates non-green colors based on defined hue ranges:

randomNonGreenColor = function () {
    //skip green
    var ranges = [[0, 60], [180, 359]];

    var total = 0, i;
    for (i = 0; i < ranges.length; i += 1) {
        total += ranges[i][1]-ranges[i][0] + 1;
    }

    var randomHue = Math.floor(Math.random() * total);

    var pos = 0;
    for (i = 0; i < ranges.length; i += 1) {
        pos = ranges[i][0];
        if (randomHue + pos <= ranges[i][1]) {
            randomHue += pos;
            break;
        } else {
            randomHue -= (ranges[i][1] - ranges[i][0] + 1);
        }
    }

    return 'hsl(' + randomHue + ',100%,50%)';
}

Answer 2

In order to eliminate true grey from your color palette, you can make some adjustments to your code. One option is to use the HSL color space:

var color = 'hsl(' + Math.round(Math.random() * 359) + ',100%,50%)';

By setting specific ranges for Hue and ensuring Saturation/Lightness are at reasonable levels, you can avoid generating grey, black, or white colors. For those who prefer RGB, it's possible to convert HSL to RGB using libraries like https://github.com/Qix-/color-convert.

To demonstrate a more advanced approach, here is a function that generates non-green colors based on defined hue ranges:

randomNonGreenColor = function () {
    //skip green
    var ranges = [[0, 60], [180, 359]];

    var total = 0, i;
    for (i = 0; i < ranges.length; i += 1) {
        total += ranges[i][1]-ranges[i][0] + 1;
    }

    var randomHue = Math.floor(Math.random() * total);

    var pos = 0;
    for (i = 0; i < ranges.length; i += 1) {
        pos = ranges[i][0];
        if (randomHue + pos <= ranges[i][1]) {
            randomHue += pos;
            break;
        } else {
            randomHue -= (ranges[i][1] - ranges[i][0] + 1);
        }
    }

    return 'hsl(' + randomHue + ',100%,50%)';
}

Limit the random color generator function to only produce a predetermined color in JavaScript

Answer №1

Similar questions

Choosing just the element that was clicked and added to the DOM

Using Javascript REGEX, transform an array into a string where each element is enclosed in curly braces

Persistently Undefined Angular Attribute

Evaluate the functionality of an Angular controller method that interacts with the Document Object Model (

Uploading files with node.js and express

AngularJS is unable to properly display (parse) data fetched using $http.get from Laravel5

What is the process for connecting a Wii Remote with Three.js?

What is the procedure for populating a listbox with items selected from an array?

"Oops! Looks like there is an issue with the configuration of the builder. Try running `npm run storybook

Attempting to output properties from an Express/Mongo API by utilizing a React.js frontend

Merging two-dimensional arrays conditionally

Having difficulty fetching data from a RESTful API to generate a JSON object using Node.js

Implementing React selectors to manage the state changes on page load and when a user

Having issues with ToggleClass and RemoveClass functionalities not functioning properly

Clearing cookies in Express.js can be a challenging task

Modify the appearance of certain text within an input field

Notifying when a refreshed PHP interactive clock has detected new input

Tips for importing a Multimaterial .dae file in three.js?

"Previewing multiple images before uploading for a better visual experience

What is the best way to showcase an ajax response on an HTML webpage?