Release GSC RGBa Generator (Source)

vRice

Insane-Known Member
Messages
57
Points
368
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:
You do not have permission to view link Log in or register now.

Source Files:
HTML & jQuery
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>
CSS
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;
}

You do not have permission to view link Log in or register now.
 
Last edited:

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
4,590
Points
828
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:
You do not have permission to view link Log in or register now.

Source Files:
HTML & jQuery
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=Open+Sans" 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 hexVal = "#";
             
                for(i = 0; i < 3; i++){
                    newVal[i] = parseFloat((element[1][i].value / 255).toFixed(2));
                    hexVal += fillSpace(parseInt(element[0][i].value, 10).toString(16));
             
                    element[1][i].value = 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);
             
                element[3].style.opacity = value / 100;
                element[1][3].value = value;
             
                $('#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">
                    <h3>RED</h3>
                    <h5>
                        <output class="value">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">
                    <h3>GREEN</h3>
                    <h5>
                        <output class="value">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">
                    <h3>BLUE</h3>
                    <h5>
                        <output class="value">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">
                    <h3>ALPHA</h3>
                    <h5>
                        <output class="value">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>by vRice</h5>
            </div>
        </div>
    </body>
</html>
CSS
Code:
*{
    padding: 0px;
    margin: 0px;
    font-family: "Open Sans";
}

* 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;
}

.colour-info{
    display: inline-block;
    vertical-align: top;
    width: 100px;
    margin: 10px;
}

.slider{
    padding: 20px;
    margin-left: 10px;
}

#red-container{
    color: red;
}

#green-container{
    color: green;
}

#blue-container{
    color: blue;
}

You do not have permission to view link Log in or register now.
Good job :y:! It looks quite good (also your portfolio site and logos :handok:)
The only criticism in my opinion is that the slider max/min got space:

I personally would remove this space, it's a bit confusing.
 

vRice

Insane-Known Member
Messages
57
Points
368
Good job :y:! It looks quite good (also your portfolio site and logos :handok:)
The only criticism in my opinion is that the slider max/min got space:

I personally would remove this space, it's a bit confusing.
Yeah that's the padding for the slider elements, I'll probably change it to margin though which means the spaces will be no more! haha

EDIT - The website has been updated, a couple of little back-end changes and the front-end has been redesigned a little!
 
Last edited:

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
4,590
Points
828
Yeah that's the padding for the slider elements, I'll probably change it to margin though which means the spaces will be no more! haha

EDIT - The website has been updated, a couple of little back-end changes and the front-end has been redesigned a little!
Good job, now it's better. :y:
 

candy

G59 Terrorist
Staff member
Premium Member
Donator
Messages
1,307
Points
748
Yeah that's the padding for the slider elements, I'll probably change it to margin though which means the spaces will be no more! haha

EDIT - The website has been updated, a couple of little back-end changes and the front-end has been redesigned a little!
Tho I wont use this to be honest, I do like the look of it. Good work.
 

TryRed

Member
Messages
14
Points
8
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:
You do not have permission to view link Log in or register now.

Source Files:
HTML & jQuery
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>
CSS
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;
}

You do not have permission to view link Log in or register now.
I tried to use it on my smartphone and it didn't worked... Do you know why? (I have the OnePlus One)
 

vRice

Insane-Known Member
Messages
57
Points
368
I tried to use it on my smartphone and it didn't worked... Do you know why? (I have the OnePlus One)
Ayy OnePlus buddies, I've got the OnePlus 3!

I'm unsure why it doesn't work though, this was a quick project and I didn't make the website dynamic so it's only for desktops at the moment unfortunately!
 

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
4,590
Points
828
I tried to use it on my smartphone and it didn't worked... Do you know why? (I have the OnePlus One)
Ayy OnePlus buddies, I've got the OnePlus 3!

I'm unsure why it doesn't work though, this was a quick project and I didn't make the website dynamic so it's only for desktops at the moment unfortunately!
Got the One. :grinning: OnePlus buddies!
 

Top