Up next in 10
Build a RGB & HEX Color Code Finder From ColorPicker Web App in Browser Using JavaScript
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/4e32ad357cc7c4092d109ec0fad1edc1
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we'll looking at how to
0:04
build out this color code finder kind of
0:06
application where you have a Color
0:08
Picker and you can select any color from
0:11
this Color Picker and then you will get
0:13
this hexa decimal code value and the RGB
0:16
value so many of times you need to have
0:20
find out your favorite color you can use
0:22
this Color Picker and then as you change
0:25
select your color these values will
0:28
change accordingly and and from your
0:30
Color Picker you can pick your favorite
0:32
color and depending upon that you can
0:35
get the hexad decimal value you can
0:37
simply click these buttons to copy the
0:39
hexad decimal value to copy to clipboard
0:42
similar to RGB value red green red green
0:45
blue Alpha value so all these values you
0:48
can I will show you how to build this uh
0:51
tool right in the browser itself we are
0:54
using bootstrap for user interface and
0:57
plain JavaScript for the logic of this
1:01
application so all the source code will
1:03
be given in the description of this
1:05
video so let's start building this
1:07
application
1:08
so so what I will do I will simply
1:11
delete everything and start from
1:17
scratch so I just included the CDN of
1:22
bootstrap right in my brows uh in this
1:25
application in the HTML file just you
1:27
include that and now you can actually
1:31
bake the
1:32
interface you can actually use the
1:34
container class of
1:37
bootstrap inside card we can use the
1:40
card
1:41
class padding and Shadow
1:45
classes inside this you'll have a simple
1:48
heading which will simply say color code
1:51
finder it will be actually be giving an
1:54
class to it of text Center font size FS
1:59
3
2:00
FW is
2:02
font weight and it will be bold margin
2:05
bottom
2:07
four so after that we will be
2:10
giving having a simple form where we'll
2:13
be allowing the user to Simply select
2:16
the color so input type here will be
2:18
color we'll be giving an ID to it of
2:20
Color Picker so here the user will
2:23
select their favorite color we'll
2:26
giveing a bootstrap class of form
2:28
control
2:31
and it should be required and the value
2:34
default value will be black color which
2:37
is hex decimal code is 6
2:42
Z like
2:45
this so if you refresh your application
2:48
it will look something like this you'll
2:50
see that now the user can pick their
2:52
favorite color by default black color is
2:58
selected we also Al have the second
3:01
class here it's
3:02
a color input that's why we have the
3:06
second bootstrap class form control
3:08
color so it will just align it properly
3:11
you can see
3:15
that so we have the card class MX
3:23
Auto so after that uh we will also be
3:26
showing a live preview of the color as
3:30
well which is selected by the
3:32
user and for that we'll be giving a
3:35
class to it of color
3:37
preview margin bottom
3:42
four and we will be giving a background
3:45
color to
3:48
it or black by
3:54
default so inside this we will actually
3:58
have a
4:05
label giving a bootstrap class of form
4:11
label and we will have this
4:15
uh okay this is in the different way uh
4:20
this is
4:23
only this is different thing this is not
4:26
the part of this div just make sure you
4:29
go outside of this div we have another
4:32
div which have the class of margin
4:34
bottom four we have a
4:40
label we have a class of form
4:43
labels and this will be the hexa decimal
4:47
value of the
4:50
color and we'll be showing this all
4:52
these values in the text area we will
4:55
give it an ID to this text area which
4:58
will be hex
5:01
value we'll be giving a class of it of
5:04
form
5:08
control and it will only be read
5:11
only the user can't change the
5:14
value the value will be simply this one
5:18
by default black
5:21
color read
5:23
only so you have this text area black
5:27
color would be there so
5:30
after this text area we will be having
5:36
a button of copy to clipboard so that
5:40
the user
5:41
can copy this value very
5:45
easily and
5:48
uh be having this BTN BTN primary margin
5:53
top
5:56
two so similarly we'll be copying this
5:59
so one more time and secondly you'll be
6:02
having another one this time will be RGB
6:07
value RGB value giving an
6:11
ID and we'll be saying copy
6:18
RGB we will have two buttons out there
6:20
if you see
6:26
that so now you'll be writing the
6:28
JavaScript code
6:36
in a separate file so we have the
6:38
script.js
6:41
file so first of all we will get access
6:44
to all the things in the Dom so for that
6:47
we'll be using get element by
6:53
ID so Color Picker color preview
6:59
so all these elements we have given
7:01
these IDs so we're just targeting them
7:04
XX
7:22
value so we have got all the references
7:26
now we can actually bind a
7:30
event handler to the Color Picker event
7:34
field you can add event list now so when
7:37
the color changes we will execute this
7:40
function update color so we need to
7:43
Define this function update
7:45
color you can simply say hi so what
7:49
should happen if I change this you will
7:51
see that as I CH as the value changes in
7:55
this input
7:56
field this function will execute so
7:59
right right here in this update color
8:01
function what we need to do we now need
8:05
to update the color of the
8:07
preview whatever is the Color Picker
8:10
value you can get this value like
8:13
this and then color Pi color preview
8:16
style do background
8:23
color we need to make sure whatever is
8:26
the color
8:28
selected and decimal value value is
8:33
actual color and RGB
8:36
value dot
8:39
value and here we need to convert the
8:42
hexa decimal value which is
8:45
coming for this we need to write a
8:47
function hexa decimal to
8:49
RGB and we'll be passing this value
8:52
which is coming of this color
8:55
value so if you see now uh if you
8:58
changes you will see that the color
9:00
preview value will reflect whatever
9:02
color that we and also the hexadecimal
9:05
as
9:06
well so whatever color that we are
9:08
choosing so you will see the hexadecimal
9:10
value has been changing and also the
9:12
preview as well now we need the RGB
9:14
value we need to convert this
9:16
hexadecimal value which is coming to
9:18
RGB so how we can do
9:22
that so we need to define a function for
9:25
that which is uh take the hexadecimal
9:29
value and as a
9:32
argument and for converting this we have
9:35
to write some
9:36
formula let me introduce three variables
9:40
r g and B so we'll be initializing all
9:44
these three variables to zero and you'll
9:47
simply say if the
9:50
hexadecimal length is uh 4
9:55
characters then in that case we need to
9:57
process it so we need to extract the r r
10:01
content for that we'll be using the
10:04
parent
10:06
function
10:09
hex this is actually the formula that we
10:12
are
10:13
using the base is 16 for hexadecimal if
10:16
you all know it is 16 correctors so
10:21
similarly we can use the same formula to
10:24
get the second value in RGB
10:31
the base is again 16 and similarly for b
10:35
as
10:44
well so after we got R RGB values now we
10:52
can just write the scenario if the
10:55
length is equal to 7 because
11:00
in hexad decimal you can even write like
11:03
this this also same is the same or and
11:06
this also is the
11:09
same so both these lengths are it comes
11:12
out to be four and this comes out to be
11:14
seven so we need to write scenarios for
11:17
both the situations so we this is for
11:21
four and this is for
11:24
seven and once again the same formula
11:27
will be there
11:43
so let me paste the formula right here
11:45
so this will be the formula right here
11:47
for
11:48
that and at last we just need to return
11:51
the RGB
11:54
value we have a function
12:00
inside
12:03
RGB and here we can
12:21
actually let me paste
12:27
it so you can see that we
12:30
are simply returning this RGB value from
12:34
this function
12:39
so if you refresh the application now if
12:42
you change it now you will see that as
12:46
you are changing the value you are
12:47
getting hexa decimal and RGB value as
12:49
you are changing it the values are keep
12:51
on changing so you can select your
12:54
favorite color right
12:55
here so now for these copy to clipboard
12:59
we can simply
13:02
bind you can simply write a function uh
13:06
you can Define this function which is
13:07
copy to
13:11
clipboard can give it an ID as an
13:16
argument and
13:18
uh first of all you need to get the
13:21
reference of the text area so whatever
13:25
we are passing it in this function as a
13:28
ID
13:31
so we need to select everything using
13:33
the select
13:36
function and then we need to execute the
13:39
copy
13:44
command and then we need to Simply alert
13:47
the
13:54
user copy to clipboard
14:05
that's all so now we need to actually
14:07
call this function in the
14:10
HTML so we need to Simply bind this uh
14:13
to both these buttons copy buttons so we
14:16
can sit on click listener so when we
14:19
click this button we will call this
14:21
function copy to
14:24
clipboard and here you'll be
14:27
passing the ID which which
14:29
is RGB value whatever ID that you have
14:33
given to your input field you can see we
14:36
are passing this
14:41
value and similarly this
14:47
one this will be
14:51
for hex value
15:20
so if you test this application once
15:23
again uh just select your favorite color
15:25
and you will see you can copy the RGB
15:30
hexadecimal values so in this way you
15:32
can make this color code finder web app
15:34
in the browser using
15:36
JavaScript and apart from that you can
15:39
check out my website free mediat
15:40
tools.com where you have various
15:43
thousands of thousands of free tools
15:46
available so you can visit this website
15:48
I update tools on regular basis and
15:51
thank you very much for watching this
15:53
video please hit that like button
15:55
subscribe the channel and I will be
15:56
seeing you in the next one