Random color

Developer
Alejandro Montañez
Size
2,362 Kb
Views
22,264
  1. Random color Previews
  2. Random color HTML Codes
  3. Random color CSS Codes
  4. Random color JS Codes

How do I make an random color?

Generate random colors with a simple and clean script.. What is a random color? How do you make a random color? This script and codes were developed by Alejandro Montañez on 13 October 2022, Thursday.

Random color Previews
IQ Test

Random color - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random color</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='container'> <div id='preview'> <div>#17191B</div> </div> <div id='button'>random color</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Random color - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
html, body{ min-width: 100%; min-height: 100%;
}
body{ margin: 0; padding: 0; background: #0E0F10; color: #a0a0a0;
}
div{ margin: 0; padding: 0;
}
#container{ position: absolute; top: 50%; left: 50%; margin: -147px 0 0 -110px;
}
#preview{ width: 200px; height: 200px; position: relative; margin: 0 auto 25px; border: 10px solid #17191b; border-radius: 20px; background: #19ea92; -webkit-transition: background 300ms; transition: background 300ms;
}
#preview div{ width: 200px; position: absolute; top: 100%; left: 0; margin-top: -40px; padding: 10px 0; text-align: center; letter-spacing: 2px; font: 300 22px/22px 'Open sans condensed', Helvetica; color: #a0a0a0; background: #17191b;
}
#button{ padding: 10px 20px; border-radius: 20px; outline: none; text-align: center; letter-spacing: 3px; font: 300 30px/30px 'Open sans condensed', Helvetica; background: #040505; color: #a0a0a0; cursor: pointer;
}
#button:active{ position: relative; top: 4px;
}

Random color - Script Codes JS Codes

var preview = $('#preview'), text = preview.children('div'), change = function(){ var color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16) preview.css('background',color) text.text(color) };
$('#button').click(change).click()
/* rgb random:
function rand(a, b){ return Math.round( Math.random() * (b - a) + a )
}
// Random color
function randColor(){ var red = rand(0,255), green = rand(0,255), blue = rand(0,255); return 'rgb('+ red +', '+ green +', '+ blue +')';
}
$('#button').click(function(){ var color = randColor(); $('#preview').css({ background : color }) .children('div').text(color)
});
*/
Random color - Script Codes
Random color - Script Codes
Home Page Home
Developer Alejandro Montañez
Username codeams
Uploaded October 13, 2022
Rating 3
Size 2,362 Kb
Views 22,264
Do you need developer help for Random color?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alejandro Montañez (codeams) Script Codes
Name
Such Spinners, Much Loading
Animated scroll in 3 lines of jQuery
Another loading animation
Progressbar test
Auto adjustable hexagon
Loading animation
Loading animation
My favorite colors
Background entrance animation
Bounce-in css animation
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!