Release GSC RGBa Generator (Source)

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:
Please, Log in or Register to view URLs content!

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

Please, Log in or Register to view URLs content!
 
Last edited:

CabCon

Head Administrator
Staff member
Head Staff Team
Messages
5,085
Reaction score
2,880
Points
1,103
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:
Please, Log in or Register to view URLs content!

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

Please, Log in or Register to view URLs content!
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:
qKOHGW9hS6WLQcwtwcUuDQ.jpeg

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

vRice

Veteran
Messages
58
Reaction score
86
Points
793
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:
qKOHGW9hS6WLQcwtwcUuDQ.jpeg

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
5,085
Reaction score
2,880
Points
1,103
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
Donator
Messages
1,322
Reaction score
752
Points
973
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
Reaction score
15
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:
Please, Log in or Register to view URLs content!

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

Please, Log in or Register to view URLs content!
I tried to use it on my smartphone and it didn't worked... Do you know why? (I have the OnePlus One)
 

vRice

Veteran
Messages
58
Reaction score
86
Points
793
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
5,085
Reaction score
2,880
Points
1,103
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