What is HUE, Saturation, Brightness and Luminance!
Summary
TLDRIn this educational video, Steven explains the concept of hue, a fundamental aspect of color representation that is independent of brightness or saturation. He discusses the use of a color wheel to visualize hues and their scientific basis in light frequency. Steven covers the RGB model, the absence of pink in the visible light spectrum, and how hue interacts with saturation and brightness to create any color. He also demonstrates practical applications in Photoshop for image manipulation and in web development for creating color variations with CSS filters, showcasing the efficiency and versatility of using hue.
Takeaways
- 🌈 Hue (H) is a single value that represents the color of an object without considering brightness or luminance, typically measured in degrees on a color wheel.
- 🎨 A color wheel is a useful tool for understanding hue, with primary colors like red, green, and blue positioned at 0, 120, and 240 degrees respectively.
- 🔬 Hue follows the science of light, where the frequency of light determines color, with red having the lowest frequency and moving through the spectrum to violet.
- 💡 Magenta is a color that does not exist as a frequency of light but is perceived by our minds and included in the color wheel for the sake of completeness.
- 🌈 The concept of hue is used in digital formats like RGB, where the sequence of colors follows the hue model, and it's represented in degrees for computer programming convenience.
- 📷 In image editing, adjusting the hue of an image involves shifting all the hue values of its pixels around the color wheel, which can create dramatic effects.
- 🖼️ Hue, saturation, and brightness (HSB) are the three components of color that can be manipulated to create or alter any color in digital imaging.
- 🔢 Hue is often represented in digital formats from 0 to 360 degrees, with 0 and 360 technically being the same color, and primary colors at 0, 120, and 240 degrees.
- 🔧 In Photoshop, hue can be adjusted using sliders that represent the color wheel, allowing for precise color selection and image manipulation.
- 🛠️ For developers, understanding hue can lead to more efficient use of resources, such as changing the hue of a single image to create multiple colored versions without needing multiple image files.
- 📚 The video script provides practical examples of how hue can be used in both image editing and web development to enhance visual appeal and optimize performance.
Q & A
What does 'hue' represent in the context of color?
-Hue represents the pure color of something, without considering brightness or luminance, and is typically measured in degrees on a color wheel.
How is hue commonly represented?
-Hue is commonly represented using a color wheel, which provides a circular representation of colors starting and ending at the same point, indicating the cyclical nature of color perception.
What are the primary colors on the hue color wheel mentioned in the script?
-The primary colors on the hue color wheel mentioned are red, green, and blue, which are positioned at the top and at 120-degree and 240-degree angles respectively.
How does the frequency of light relate to hue?
-The frequency of light is directly related to hue. As the frequency of light increases, the hue transitions from red to orange, yellow, green, and so on, up to purple and magenta.
Why is magenta not an actual frequency of light?
-Magenta is not an actual frequency of light because it does not exist as a unique frequency in the visible light spectrum; it is a color that our minds perceive and create.
What is the significance of the color wheel in understanding color contrast?
-The color wheel is significant in understanding color contrast because it allows us to identify the exact opposite of a certain color, which is essential for creating striking and attention-grabbing images.
How are degrees used in color wheels?
-Degrees are used in color wheels to measure the angle of a color, with the wheel typically ranging from 0 to 360 degrees, representing the full spectrum of hues.
What is the range of values for a byte in digital formats?
-In digital formats, a byte has a range of values from 0 to 255, which is used to represent different shades and colors.
Why is the range of 0 to 240 used instead of 0 to 255 for hue representation in some models?
-The range of 0 to 240 is used to make it easier to calculate main and in-between colors, as it aligns with the division by three, which corresponds to the primary colors of red, green, and blue.
How does the hue value adjust in Photoshop when working with images?
-In Photoshop, adjusting the hue value shifts the colors of an image around the hue wheel, changing the color of each pixel according to its position on the wheel relative to the adjustment.
What are the three components of color representation in digital formats?
-The three components of color representation in digital formats are hue, saturation, and brightness (or value), which together allow for the creation and manipulation of any color.
How can hue be used in computer programming to save space and resources?
-Hue can be used in computer programming to save space and resources by adjusting the hue value of a single image to create multiple color variations, instead of loading multiple images of the same object in different colors.
Outlines
🌈 Understanding Hue in Color Theory
Steven introduces the concept of hue as a single value representing the pure color of an object, independent of brightness or luminance. He prefers using a color wheel to represent hue, starting with red at the top and followed by green and blue at 120 and 240-degree angles, respectively. The hue model is linked to the science of light, with red having the lowest frequency and colors progressing through the visible spectrum to violet. The concept of magenta, a non-existent frequency of light, is also discussed, explaining its presence in the color wheel due to human perception. The video script also touches on RGB and CMYK color models and how they relate to hue, as well as the practical application of hue in creating color contrast in images.
🎨 Hue in Digital Formats and Photoshop
The script explains how hue is represented digitally, with bytes being the standard unit for saving color values. It discusses the 8-bit color range, which limits the hue value to 0 to 240 degrees for easier calculation of main and in-between colors. The video script also covers how hue is used in Photoshop for both selecting new colors and adjusting the hue of an entire image. The importance of understanding hue, saturation, and brightness (HSB) when working with colors in digital formats is emphasized, with examples of how these values can be manipulated to achieve desired effects in images.
🖌️ Practical Applications of Hue in Image Editing
Steven demonstrates the practical use of hue in image editing, particularly in Photoshop, where adjusting the hue of specific colors in an image can dramatically alter its appearance. He shows how to use the HSL sliders to modify the hue of grass to make it appear more vibrant and seasonal. The video script also explains how to create color contrast within an image by adjusting the saturation and brightness of different colors, thus enhancing the visual impact without changing the overall luminance.
🌐 Utilizing Hue in Computer Programming and Web Development
The final paragraph discusses the application of hue in computer programming and web development. Steven presents a web app example where the hue value of an image is manipulated using CSS filters to create different colored dots without the need for multiple image files. This method is highlighted for its efficiency in terms of memory usage, bandwidth, and ease of development. The script concludes with a summary of how understanding and applying hue can be valuable in various fields, and an invitation for viewers to like and subscribe for more content.
Mindmap
Keywords
💡Hue
💡Color Wheel
💡RGB
💡Frequency of Light
💡Saturation
💡Brightness
💡HSL/HSV
💡Color Contrast
💡8-bit Color
💡CSS Filters
💡Chroma
Highlights
Hue is a single value representing the color of an object without considering brightness or luminance.
Hue can be represented using a color wheel, starting at red and moving through the sequence of RGB.
The hue model on a color wheel typically has red at the top, followed by green at 120 degrees and blue at 240 degrees.
Hue follows the science of light, with red being the lowest frequency and colors progressing through the spectrum to violet.
Magenta is considered a non-existent frequency of light but is included in the color wheel due to its visibility.
Hue is used in color contrast to create popping images in Photoshop by selecting the exact opposite color on the wheel.
Computers often use a byte to represent hue values, with 8-bit color ranging from 0 to 255.
For easier calculation, hue values can be adjusted to range from 0 to 240, aligning with the RGB sequence.
Hue values can be adjusted in Photoshop to shift an entire image's colors around the color wheel.
Saturation represents how true a color is to its pure form, with high saturation being far from gray.
Brightness is the measure of how light or dark a color is, with white being the brightest and black the darkest.
Hue, saturation, and brightness together form the HSB model, which can recreate any color.
In Photoshop, HSB values can be used to select a color or adjust an existing image's colors.
HSL sliders in Photoshop allow for adjustments to an image's hue, saturation, and luminance.
Adjusting hue can change the color of specific elements in an image, such as making grass greener.
Saturation can be increased to make colors pop or decreased to create a more muted effect.
Brightness adjustments can create contrast within an image, enhancing the visual impact.
In web development, hue can be used to dynamically change the color of elements using CSS filters.
Using hue adjustments can save memory and bandwidth by avoiding the need to load multiple images of the same element in different colors.
Transcripts
hi guys this is Steven yeah and today we
are going to be talking about you you is
basically a single value that represents
the color of something not necessarily
the brightness or the luminance the pure
color of something it's a single value
it usually gets measured in degrees now
there's a lot of ways to represent you
the one of the ways that I like the most
is using a color wheel because it gives
you the impression that you is basically
something that starts at the point ends
at a point but it is linked so it goes
in a circle you also get a lot of other
color wheels out there that doesn't
really follow the you model but the you
model that I like based the color wheel
that represents you the most accurately
that I think is the one with red on top
and then at 120 degree angles we have
green and at 240 degree angles we have
blue so that gives us the whole circle
that goes from red green and blue your
RGB so it follows that same sequence now
one of the very interesting things about
you is that you follow science and the
science of light is all or the color of
life is all linked to the frequency of
the light where your lowest level
frequency of light is red which is right
on the top and then as your frequency of
light increases it will go red orange
yellow green and then obviously blue and
then it goes to your purples and your
magenta back to red now as we know
technically your magenta doesn't really
exist because it's not really an actual
frequency of light but obviously we can
still see it our mind makes that up so
that why they include it in the color
wheel that is the you color wheel now a
very another very interesting thing is
obviously because it follows science it
actually means that when you look at a
rainbow you will see all the colors that
represent you always starting with red
on top so that's why I like the whole
raid on top idea and interesting enough
also if you look at the rainbow there is
no
once again proving to us that pink
doesn't really exist
it's purely a fiction of color made up
by our minds and also the nice thing
about hue is it I don't think it's sex
technically you I think it's RGB RGB
follows you so it's in that order
RGB it goes as the angle increases it is
our G and B same with Seymour K
obviously K is the shortcut so we'll
just remove the K and we said with C my
seem wise obviously the whole circle
just sort of flipped around so you would
start at the bottom which is your cyan
or magenta and your yellow so it follows
the same order so it actually all makes
a lot of sense and also if you look at
the opposites of color if you ever work
with color contrast if you want to make
an image in Photoshop pop a bit you need
color contrast and in order to do color
contrast you need the exact opposite of
a certain color and if you use the you
color wheel that also makes sense so the
opposite of red would be cyan it's an
opposite end of the wheel the opposite
of yellow would be blue it's on the
opposite end of the wheel so it's very
easy to get the opposite of a color will
you just find the color on the wheel and
then you look at exactly the other side
will that would be your opposite color
and with that you can create very
interesting and very shocking a very
popping images that really like grabs
your attention now most of the color
wheels out there it works
in degree so your degrees is on top and
it's obviously an angle and measured in
degrees so the grease is on top and it
goes to 90 degrees 180 degrees 270
degrees and back to 360 degrees
now when computers came along obviously
we wanted to save this value somewhere
in a digital format now the most
convenient way to save it would be in a
byte which is sort of nicely truncated
it's almost exactly the right size we
need except a byte Falls a little bit
short by being 8 bits so obviously you
hear 8-bit color a lot so what would
happen a byte
goes from zero to 255 that's the only
range of bytes and cover so if you want
anything more than that you kind of have
to use two bytes which is double the
space so what they do is instead of
saying okay let's use 0 to 255 it's not
a nice value to use because it's not
really divisor ball especially when you
divide divided by three which is where
your your main colors lie your are your
do your B if you divided by 3 you get 2
like a weird number and then they
decided to let's make it rather zero to
240 because that means every 800 slots
or 800 points you get a main color and
then it's very easy to calculate main
colors as well as the in-between colors
so that means R will be 0 green will be
80 and blue would be hundred and 60 and
thus you get your full circle that goes
to 240 obviously every 40 degrees would
be your yellow and your cyan and magenta
which actually makes it very easy to use
so that's why some of the models that
you get works from 0 to 240 and other
models works from 0 to 260 the 0 to 360
is more your conditional model and your
0 to 240 is more purely for programming
and computers so that is the basics of U
U is simply a single value that
represents a color it is there's no the
data that we give in that value there is
no brightness so we don't actually
specify brightness we don't specify a
saturation it's purely the color or as a
refer to in science the chroma of that
color and it's measured in degrees in
the traditional model and obviously when
using computers it goes from 0 to 240
and every eye T there is obviously a
main color
so obviously views all model the 360
degree model or the traditional model
that means that every 120 degrees there
is a main color there's 2 ways where you
can use you
when it comes to Photoshop and one is to
simply select the color so you start
with nothing and you just want to
basically add a new color then you can
use you the other thing is if you
actually start with a base image and you
want to adjust the U of the image what
that will do is it will load the U of
every single pixel of that whole image
and then whatever you you select to
judge you you select whatever you value
you select to adjust it with it will
take all those u values and adjust that
so the whole image will shift around the
you wheel but obviously the pains on
where every single pixel sits in the you
wheel so if a pixel sets at a certain
location and you said adjust the wheel
by ten it that picks a little just about
ten degrees the pixel right makes that
mice at another location in the you
wheel and you tell it to adjust also by
opposite ten degrees so just about ten
degrees so that way your whole image
will sort of shift and the colors will
change at a hundred and eighty degrees
you will get a full negative of the
image but this is purely a color
negative it's not a luminance or
brightness negative so it's not going to
look exactly like a negative if you
would have taken an image image and
making negative but the colors will be a
negative so it's sort of halfway to a
negative saturation is how true the
color is or how far the color is away
from gray and if something has got a
high saturation it's very far away from
gray so let's say we have red but the
Rays got a high saturation it means it's
a deep deep deep red if it's got a low
saturation it's closer to gray so it's
like a Gray's red and that's basically
what saturation is it's fairly
straightforward if you have a color
wheel some color wheels include
saturation some color wheels you have
the wheel and in the middle
you actually have grace as you have the
colors it sort of fades to gray and then
where your color sits around the wheel
is yoryu and how far it sits from the
center is your saturation the last one
obviously is the brightness the brighter
pick a value is the closer it is to
white and the darker is the closer is
through black so with those three with
you saturation and brightness you can
make up any color that exists first of
all is the color which is the you that's
the base the raw actual color then how
follows from the center the saturation
how true that calories and then lastly
how bright it is is the closer to white
or is the very dark color and with that
you can use any color you want and that
is called the hue saturation or
brightness so now what I'm going to do
is I'm going to go into the computer and
I'm going to show you how to use this
information obviously if you you might
be working in Photoshop or you might be
a computer programmer and in both cases
you can actually use you if you
understand it properly so the first
thing is that you end saturation and
brightness can also help you to pick a
certain color especially if you know
that the color should be green or
halfway between green and blue or
whatever you want to pick so obviously
in Photoshop you just click your color
picker you just click on the colorway
and then you'll see that the three
values that this displayed yeah HSB is
your used saturation and brightness now
your U which is the topmost one that is
determined purely by the slider yeah so
you can see as I slide it everything
that actually changes you you what you
actually see yeah is your true color
with a hundred percent saturation and a
hundred percent brightness it's actually
the color you see in this boy yeah it is
upside-down whereas the zero degrees is
at the bottom and as you move up degrees
increases so it's basically upside down
rainbow with rainbowfish your radius on
top then it's your yellow your green and
your then obviously your side and your
blue so that's one way to adjust your
use so you can pick the color you want
you'll see obviously everyone
20 degrees there's a primary color so
that would be red which is at zero
because we cost start counting and Syrah
and at 120 degrees if I type 120 in a I
would get a green if I add another 120
240 you would get blue
so that's your RGB you obviously get
your in-between colors which is a c-more
ok
they obviously because they're exactly
the opposite that I started 0 they
started 180 which is the other side of
the circle so that's where your cm or
case thought so your C which is your Sai
had which is not 180 you obviously also
add 120 which will put you at 300 which
is your M your magenta and then
obviously it goes around because it's a
circle it'll go back to 60 degrees which
is your yellow so yeah you can see also
you'll see my representativeness Channel
yeah so basically if you based if you
start at 0 every 60 degrees you would
get you would hit either a normal color
or a main color or a auxiliary color so
every 60 degrees you would hit either
red yellow green cyan obviously blue etc
etc I'm not gonna go through the whole
thing now obviously you've got this
little block of a yeah now this block
actually serves the purpose in that it
is it's not just what you see is what
you get the horizontal well the left and
right access of this block is your
saturation which is that value T so if
you are on the left side your saturation
is on zero which is gray as I discussed
earlier if your saturation is on 100
then you get the food color the true
blue so that's your saturation it's
basically just a gradient between your
color and gray and then obviously last
is your brightness your brightness is
the up/down side so if you go up and
down you'll see that it'll actually
change only your rightness nothing else
will change so your brightness being a
scale basically between your color and
black so the one I sort of between your
color and white and other ones between
your color
black which is your brightness and your
saturation you can obviously change it
yeah it will give you different
representations so if you choose
saturation yet scale yeah is your
saturation and your left and right is
the new you and your up and down is your
brightness so you can switch between
these values and see what you get it's
really interesting obviously whatever
values select yeah if you select
brightness yeah it means that the scale
is your brightness if you select you
yeah the scale use your you so whatever
you select yeah is basically this scale
you can even select your you yeah go
tool it's a green let's get a full green
it start on tweeny
and then if you switch to saturation it
still retains the same color so you use
stays there then you can adjust your
saturation you can decide how much green
you want maybe let's say like 80% green
and then you can switch to brightness
and you can adjust purely the brightness
over that green so yeah just another way
to help you pick a certain color and
usually if you want to make
manipulations to an image so you have an
image and you just want to manipulate it
you usually use H is I'll use saturation
and luminance because you're just think
something that already exists now in
this image you'll see the grass on the
side yeah it's not a very deep green and
also it was a little bit dry so it's not
exelon oh I saw and I'm gonna make that
more green so what I can do is I can
just switch to the HSL sliders yeah I
remember I said HS owl is what you used
when you actually are changing an image
and HSB is used when you are picking a
color so you start with nothing and you
are simply sitting in color now if we go
to the HSL all of these that you see
yeah they basically are sliders based on
a certain u range so you'll see this is
basically the colors of a rainbow if you
look in the middle down red orange
yellow green cyan blue purple and
magenta so these are sort of the colors
of the rainbow officially we don't
happen
because that doesn't exist technically
these are this is actually the exactly
the rainbow as you'll see it and doesn't
matter which tab you go to you see those
colors so if I do like a slider change
yet well look at that color that is in
the image and just change the U of that
specific color now what I like to do
yeah is with the use selected I can
actually J a change the green and love
it I just increase it like a little bit
and you'll see the grass or actually
become more green if I push to push it
the other way it'll be more yellow so
I'll actually just push it slightly and
then if your image doesn't contain a lot
of yellows that are not that's not gross
like in this image all the yellows in
the image pretty much is gross so I can
even increase the yellow one and make
that more green as well so you see if I
if I obviously take it to the extremes
you can see it changes the color of the
grass here at the back and the spot of
it yeah
so I'll just boost it a little bit and
then you get nice green grass around
obviously everywhere where there is any
vegetation and it's just nice and green
it just looks like it was taken at a
different season what I what you can
also do is to make the green a little
bit more obviously poppies you can
increase the saturation of the greens a
little bit and sometimes we can even do
it with the yellow so that's also a
little bit popped the luminance you can
sometimes bring down if you bring it
down you'll actually see that it makes
the green a bit dark and also do it to
the yellows ok the yellow doesn't work
that well so we'll leave the yellow as
it is as it is we can't even bring the
yellows up slightly so it creates a bit
of instead of just color contrast
between the grass and the chicken we can
actually create contrast inside the
grass itself itself so you don't really
create color contrast you create
brightness contrast by pushing the
yellow up and the green down so just
another way of yeah making it me just
pop a little bit more simply
understanding how you works so here's
another example how you can use you in
computer programming simply to save some
space and save less images and all the
using existing images
just use changes to the yuan that image
to create more images so what we've done
this is a web app this is a dot indicate
where the location of the vehicle is and
what we've done is we've created this
dot it's got lots of shades and stuff on
it but if you look at the the u-value of
every single pixel in here we try to
keep it as close to zero as possible
remember 360 is technically zero so
you'll see as I move it around and you
look yeah everything stays very close to
160 so there you everywhere is a red and
obviously the black will be zero so we
don't really have any other use values
in this picture except for red and what
we can do now is as soon as we load this
image in a web app we can with special
CSS filters we can change the you in
this image and that means we can create
different colored dots as long as we use
the same you throughout the image when
we create the image it's easy to change
this so now simply by adjusting it yeah
I can change this dot any colored dot I
want I can go to yeah from cyan green I
can get a yellow dots like somewhere
yeah I orange dot red dot of his Lee
magenta purple blue and back to Sahana
game so this is a very interesting way
how you can instead of creating or
loading the same image 50 times of
different colors you can simply just
change the U on that image and only have
one so it uses less memory it uses less
bandwidth and it's a lot easier to
develop as well so that's another way we
can use you okay guys I hope that has
been very valuable I hope it you've
learned something new and you can
actually use this information and apply
it in your daily life
there's no matter what you do if you
fancy this video then please like it if
you want to see more of my videos then
subscribe it until next time ciao
Ver Más Videos Relacionados
Come controllare il colore con Darktable
Lighting, Coloring & Shading : The Holy Trinity Explained
Color Theory for Noobs | Beginner Guide
El MISTERIO del COLOR en el CINE y VIDEOCLIPS ft. @GemaVadillo
The Basics of Color Theory for Beginners | Canva Live
How to Use a TCS3200 Color Sensor with Arduino (Lesson #38)
5.0 / 5 (0 votes)