vRice
Veteran
- Messages
- 58
- Reaction score
- 86
- Points
- 793
I'd like to begin by crediting thahitcrew for the original idea. The only reason I created one myself is because I need to learn a lot of jQuery before I go back to uni in September. I've tried to make it look relatively decent and formatted the back-end to make sure it's readable.
Preview:
Source Files:
Preview:
Source Files:
HTML & jQuery
CSS
HTML:
<!DOCTYPE html>
<!--
RGBA Generator by vRice
Original Idea by thahitcrew
-->
<html>
<title>RGB Slider</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!-- Importing the jQuery file for scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
/*
Set some variables to be used throughout
[0] = Slider
[1] = Value
[2] = Border
[3] = Preview
[4] = Header
*/
var element = [];
element[0] = document.getElementsByClassName('slider');
element[1] = document.getElementsByClassName('value');
element[2] = document.getElementsByClassName('colour-container');
element[3] = document.getElementById('preview');
element[4] = document.getElementById('header');
/*
Credit to Onur Yildirim from StackOverflow
https://stackoverflow.com/questions/35969656/how-can-i-generate-the-opposite-color-according-to-current-color
*/
function invertColor(hex, bw) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
var r = parseInt(hex.slice(0, 2), 16),
g = parseInt(hex.slice(2, 4), 16),
b = parseInt(hex.slice(4, 6), 16);
if (bw) {
return (r * 0.299 + g * 0.587 + b * 0.114) > 186
? '#000000'
: '#FFFFFF';
}
r = (255 - r).toString(16);
g = (255 - g).toString(16);
b = (255 - b).toString(16);
return "#" + padZero(r) + padZero(g) + padZero(b);
}
/*
Sets the colours and changes the HTML to display the information
*/
function setColour(){
var newVal = [];
var RGB = "RGB";
var hexVal = "#";
var tempVal;
for(i = 0; i < 3; i++){
tempVal = element[0][i].value;
newVal[i] = parseFloat((tempVal / 255).toFixed(2));
hexVal += fillSpace(parseInt(element[0][i].value, 10).toString(16));
element[1][i].value = RGB[i] + " " + element[0][i].value;
}
$('#preview h5:nth-child(1)').text('RGB (' + newVal[0] + ', ' + newVal[1] + ', ' + newVal[2] + ')');
element[3].style.color = invertColor(hexVal, true);
for(i = 0; i < 4; i++){
element[2][i].style.borderColor = hexVal;
}
element[3].style.backgroundColor = hexVal;
element[3].style.borderColor = hexVal;
element[4].style.backgroundColor = hexVal;
element[4].style.color = invertColor(hexVal, true);
}
/*
Sets the alpha and changes the HTML to display the information
*/
function setAlpha(){
var value = element[0][3].value;
var tempVal;
tempVal = element[0][3].value;
element[3].style.opacity = tempVal / 100;
element[1][3].value = "A " + tempVal;
$('#preview h5:nth-child(2)').text('ALPHA (' + (value / 100) + ')');
}
/*
When the page loads, generate a random colour to make it funky
*/
element[0][3].value = Math.floor(Math.random() * 100);
for(i = 0; i < 3; i++){
element[0][i].value = Math.floor(Math.random() * 255);
}
/*
Pad out the RGB value to make the HEX code valid
*/
function fillSpace(int){
return ((int.length < 2) ? ("0" + int) : int);
}
/*
Add events for all of the RGBa sliders
*/
element[0][3].addEventListener('mousemove', function(){
setAlpha();
}, false);
for(i = 0; i < 3; i++){
element[0][i].addEventListener('mousemove', function(){
setColour();
}, false);
}
setColour();
setAlpha();
});
</script>
<body>
<div id="header">
<p>GSC RGBA GENERATOR</p>
</div>
<div id="container">
<div id="red-container" class="colour-container">
<div class="colour-info">
<h5>
<output class="value">R 0</output>
</h5>
</div>
<input class="slider" type="range" min="0" max="255" id="b" step="1" value="0">
</div>
<div id="green-container" class="colour-container">
<div class="colour-info">
<h5>
<output class="value">G 0</output>
</h5>
</div>
<input class="slider" type="range" min="0" max="255" id="b" step="1" value="0">
</div>
<div id="blue-container" class="colour-container">
<div class="colour-info">
<h5>
<output class="value">B 0</output>
</h5>
</div>
<input class="slider" type="range" min="0" max="255" id="b" step="1" value="0">
</div>
<div id="alpha-container" class="colour-container">
<div class="colour-info">
<h5>
<output class="value">A 0</output>
</h5>
</div>
<input class="slider" type="range" min="0" max="100" id="b" step="1" value="100">
</div>
<div id="preview">
<!--
Preview windoe for the colour
-->
<h5></h5>
<h5></h5>
</div>
<div id="info">
<h5><a href="http://kyleminto.uk/portfolio">by Kyle Minto</a></h5>
</div>
</div>
</body>
</html>
Code:
*{
padding: 0px;
margin: 0px;
font-family: "Raleway";
font-feature-settings: "lnum" 1;
}
* p, * h5{
transition: 1s;
}
body{
background-color: #ececec;
}
#header{
padding: 15px;
color: white;
background-color: rgb(25, 125, 150);
}
#header p{
font-weight: bold;
margin-left: 50px;
}
#preview{
width: 315px;
height: 70px;
display: inline-block;
border: 1px solid;
text-align: center;
vertical-align: middle;
color: white;
}
#preview h5{
margin-top: 11px;
}
.colour-container{
background-color: white;
width: 100%;
margin: 5px 0px;
border: 1px solid rgb(25, 125, 150);
}
#container{
margin: 50px auto;
width: 315px;
}
#info a{
text-decoration: none;
color: black;
padding: 0px;
transition: .5s;
}
#info a:hover{
padding: 0px 15px;
}
.colour-info{
display: inline-block;
padding: 30px 15px;
}
.slider{
display: inline-block;
float: right;
padding: 27px 0px;
margin-right: 15px;
width: 70%;
}
#red-container{
color: red;
}
#green-container{
color: green;
}
#blue-container{
color: blue;
}
Last edited:
! It looks quite good (also your portfolio site and logos 
)
OnePlus buddies!