How to pick a random color from an array using CSS and JavaScript ? Last Updated : 30 Mar, 2023 Comments Improve Suggest changes Like Article Like Report The task is to pick a random color from an array using CSS. There is no way to do this using CSS only. CSS doesn't support logical statements because CSS is purely deterministic (there is nothing like array etc in CSS). We can use client-side JavaScript to select a random color from the array. Below Program illustrates the solution using client-side JavaScript: Example: html <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Pick a random color from array</h3> <h3 id="pick" style="color:red;"> Sample Text </h3> <br><br> <button onclick="pickColor()"> Click to change color </button> <script> // JavaScript code to pick // a random color from array function pickColor() { // Array containing colors var colors = [ '#ff0000', '#00ff00', '#0000ff', '#ff3333', '#ffff00', '#ff6600' ]; // selecting random color var random_color = colors[(Math.floor( Math.random() * colors.length))]; var x = document.getElementById('pick'); x.style.color = random_color; } </script> Output: How to pick a random color from an array using CSS and JavaScript ? Apart from above solution, We can use CSS preprocessors like SASS. Even if you use SASS you have to pre-process your stylesheets which means that you have to compile it. To know more about SASS, click here. Comment More infoAdvertise with us Next Article How to pick a random color from an array using CSS and JavaScript ? S Sunitamamgai Follow Improve Article Tags : JavaScript Web Technologies CSS JavaScript-Questions Similar Reads How to randomly change image color using HTML CSS and JavaScript ? In this article, we will create a webpage where we can change image color randomly by clicking on the image using HTML, CSS, and JavaScript. The image color will change randomly using the JavaScript Math random() function.Approach:First of all select your image using HTML <img> tag.In JavaScri 2 min read Random Choice Picker using HTML CSS and JavaScript The Random Choice Picker is a fully functional project that lets you enter some choices and then it will randomly pick any one of them. You can create this super useful project using HTML, CSS, and JavaScript. The basic idea is to input all your choices separated by 'commas', here choices can be any 4 min read How to find an average color of an image using JavaScript ? The average color of an image can be found with JavaScript by drawing the image on a canvas element. The following steps have to be performed to get the average color of an image: 1. The image is first drawn on the canvas using the method context.drawImage() of the Canvas 2D API. This method takes i 3 min read Design Random Color Generator using HTML CSS and JavaScript A Random Color Generator app is used to create random colors with a simple button click, displaying both HEX and RGB codes that users can copy. It's built using HTML, CSS, and JavaScript, making it a handy tool for designers or developers who need quick color ideas. The app can also include a Dark M 3 min read How to Generate a Random Boolean using JavaScript? To generate a random boolean in JavaScript, use Math.random(), which returns a random number between 0 and 1.Approach: Using Math.random() functionCalculate Math.random() function.If it is less than 0.5, then true otherwise false.Example 1: This example implements the above approach. JavaScript// Fu 1 min read How to create a Color Generator using HTML CSS and JavaScript ? In this article, we will develop a Color Generator application using HTML, CSS, and JavaScript.In this application, we have created the Multi Format color generator. Users can select Colour Types like RGB, HEX, and CMYK. Use the sliders to customize the color and Inout field in case of HEX and color 6 min read How to get a Random Element from an Array using Lodash ? In JavaScript, when you have an array and need to select a random element from it, you can achieve this easily using the Lodash library. Lodash provides a variety of utility functions to simplify common programming tasks, including selecting random elements from arrays. Let's explore how to accompli 2 min read How to add a specific color to an element using CSS ? In this article, we will discuss elements and how to add a specific color to an element using CSS properties. Basically, the HTML element is the collection of start and end tags with the content inserted in between them. Elements can be nested. <tagname> Content </tagname> Note: Please r 2 min read How to create RGB color generator using HTML CSS and JavaScript ? In this article, we will create a RGB color generator using HTML, CSS, and JavaScript. Using RGB color generator, we can construct all the colors from the combination of Red, Green, Blue colors. Each color is represented by the range of decimal numbers from 0 to 255 (256 levels for each color). So, 3 min read How to Generate a Random Password using JavaScript? Creating a random password generator is an excellent beginner-friendly project that can be useful in real-world applications. Passwords are vital for securing accounts, and strong, randomized passwords enhance security significantly. How to Generate a Random Password using JavaScriptWhat We're Going 5 min read Like