Up next in 10
CSS Made Easy Instantly Visualize Colors with Color Highlight & Live Preview in VS Code
Jan 9, 2025
CSS Made Easy Instantly Visualize Colors with Color Highlight & Live Preview in VS Code
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a very
0:04
nice extension which is color
0:06
highlighting in real time with live
0:09
preview so you have written CSS
0:14
basically you put properties of colors
0:17
where you provide the color background
0:19
color so the nice thing about this
0:21
extension is that it will show you the
0:23
preview of the color that you are
0:25
selecting in a nice little manner so you
0:28
can clearly see which color you are
0:30
apply write in the code itself you don't
0:33
need to refresh the page and see in the
0:34
browser which color you have selected
0:37
you can directly see in the editor
0:39
itself so if I change this color in the
0:41
Color Picker if I select this blue color
0:44
you will actually see this
0:46
color so you can provide hexadecimal
0:49
code or you can apply rgba which is
0:53
opacity included now as you can see it's
0:56
a white color you can change to any
0:58
color of your choice you will
1:01
see so this is actually the CSS file so
1:04
where we Define these properties so you
1:06
will actually see this color
1:08
highlighting appearing so the extension
1:11
name is very simple you need to go to
1:13
extension and just type color highlight
1:16
this is the name of the extension color
1:21
highlight so you can see it is developed
1:23
by this person so let me uninstall it
1:25
and install it once again
1:30
so if you basically now see this is the
1:33
default behavior of a CSS file so you
1:36
select a
1:39
color you have this uh Color
1:48
Picker you basically see this uh very
1:51
short little preview of the color but
1:54
this extension when I install this
1:57
extension the color preview will will
2:00
become bigger so you can clearly see
2:02
which color you are applying so this
2:04
default preview is very small and it is
2:08
not up to the mark so now if I activate
2:12
this extension now click the install
2:14
button and now this extension is uh
2:18
enabled globally now if you see your
2:21
same file so now if you see the
2:26
colors you can see now these colors are
2:29
here
2:32
in in a far better way you can see the
2:35
color
2:43
highlighting so clearly now you can
2:45
actually see which color you highlighted
2:48
using the Color Picker in the CSS files
2:52
so it's a realtime color highlighting in
2:54
CSS files with the light preview of the
2:56
colors so this makes it far more easier
3:01
to detect which colors that you selected
3:03
and you can Rectify it debug it right in
3:06
the code itself you don't need to open
3:08
the browser to see the color being
3:10
applied so this will save you a lot of
3:13
time
3:15
and
3:16
in while you're designing your
3:19
application you can clearly see which
3:21
color you are
3:23
applying using this nice little color
3:25
highlighting applic uh extension you
3:27
should definitely install it so my this
3:30
is my personal favorite I definitely use
3:33
it so this will save you a lot of time
3:37
and make your
3:39
code if far more easier to read as well
3:44
especially the CSS because you
3:47
use these colors a lot in CSS while
3:51
designing web pages so this extension
3:54
will make that process far more easier
3:57
so you should definitely install it
4:00
again the extension name is color
4:02
highlight just type this and this is the
4:05
extension so install it and thank you
4:09
very much for watching this video please
4:10
hit that like button subscribe the
4:12
channel as well and do check out my
4:14
website free medat tools.com as well
4:17
which contains thousands of free tools
4:19
related to audio image and video and I
4:23
will be seeing you in the next video
#Other