馃攳
How Do Hex Color Code and RGB Color Work? - YouTube
Channel: GoDaddy Pro
[0]
- [Instructor] To some of
you hex codes and RGB color
[3]
may seem like a foreign language.
[5]
But if you go below the fold,
[7]
you'll realize they function quite simply.
[10]
So, how do they work
[11]
and how did we end up with
them as development tools?
[15]
(dramatic music)
[28]
Color codes communicate the precise levels
[31]
of red, green, and blue
that pixels display
[34]
in order to produce any given color.
[37]
RGB color codes use three
numerals of up to three digits.
[42]
The hexadecimal or hex value
uses three pairs of characters
[46]
proceeded by a hash.
[48]
In Markup, you'll see RGB
color codes written like this,
[53]
and hex values like this.
[56]
When we see a color digitally,
[58]
it's a combination of
red, green, and blue light
[61]
transmitted from pixels on the screen.
[64]
And depending on the
intensity of each pixel,
[66]
a different color can be rendered.
[69]
With displays today
[70]
capable of higher and higher resolutions,
[73]
a truly staggering range
of colors is available
[76]
to web designers and developers.
[78]
Hex colors are expressed
as six digit combinations
[81]
of numbers and letters.
[83]
These color codes are basically
shorthand for RGB values.
[88]
They serve the same function
with a little bit of
[91]
math conversion thrown
in for good measure.
[95]
Instead of letters, RGB color
values use the three sets
[99]
of three numbers with a
range between zero and 255.
[104]
For example, let's look at teal.
[107]
Okay, that's too much teal.
[109]
Let's look at our color teal
whose hex code is #61eaea,
[115]
and RGB color code is 97, 237, 234.
[120]
These element values may appear
different at first glance
[124]
but the color will be identical
when added to your Markup.
[129]
But how do you look at the
jumble of letters and numbers
[132]
that is a hex value and recognize a color?
[135]
It requires a little mental arithmetic,
[137]
no TI-86 calculator necessary.
[141]
To make them shorter, hex
values substitute letters
[144]
when a value reaches two
digits greater than nine
[147]
with A being 10,
[149]
F the highest value is 15.
[153]
Multiply the first character
by 16 and the second by one.
[158]
Add the two totals together
[160]
and repeat this for each of the values
[162]
for red, green, or blue.
[177]
From there, it's straight
forward recognizing
[179]
how the colors combined.
[181]
Dive into the CSS for an
image with color overlay added
[184]
and you'll likely see something like this.
[187]
The last value is the alpha channel,
[190]
which represents opacity.
[192]
A value of 0.0 is fully transparent
[195]
while 1.0 is fully opaque.
[198]
Today, most browsers
support Markup using RGBA.
[202]
So how did we end up with RGB color?
[205]
For that, we have to go back in time.
[208]
The RGB color code dates
back to the mid 1800s
[211]
when red, green, and
blue filters were used
[214]
to produce the first color photos.
[217]
The idea arrived, thanks to
the Young-Helmholtz theory
[221]
of trichromatic color vision
[222]
developed by Thomas Young
and Hermann von Helmholtz.
[227]
Fast forward a couple of centuries
[228]
and the NCSA Mosaic and Netscape Navigator
[232]
became the first browsers
to render RGB color.
[235]
In that era, designers were limited
[237]
to a mere 256 web safe colors.
[241]
However, by the 2000s that was dropped
[244]
in favor of 24 bit true color,
[247]
a direct ancestor of the 48 bit system
[250]
that today can render more
than 280 million colors.
[255]
(funky music)
Most Recent Videos:
You can go back to the homepage right here: Homepage