What is HUE, Saturation, Brightness and Luminance!

Summary

In 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

00:00

🌈 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.

05:05

🎨 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.

10:05

🖌️ 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.

15:07

🌐 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.

Keywords

💡Hue

Hue refers to the pure color of an object without considering its brightness or luminance. In the context of the video, it is a single value measured in degrees and is central to the discussion on color representation. The script explains that hue can be visualized using a color wheel, starting with red at the top and progressing through the sequence of colors in the RGB model, illustrating the concept with the example of a color wheel where red, green, and blue are positioned at 0, 120, and 240 degrees respectively.

💡Color Wheel

A color wheel is a circular chart representing hues arranged according to their perceived spectral order. In the video, the color wheel is used to explain the concept of hue, showing how colors are interconnected and form a continuous spectrum. The script mentions a specific type of color wheel with red at the top and other colors like green and blue at 120 and 240 degrees, respectively, which aligns with the hue model.

💡RGB

RGB stands for Red, Green, and Blue, which are the primary colors used in electronic displays to represent a wide range of colors. The video script discusses how the hue model follows the sequence of RGB, with the color wheel starting at red and moving through green and blue at specific angles, demonstrating the relationship between hue and the RGB color model.

💡Frequency of Light

The frequency of light is a scientific concept that relates to the color of light. The video script explains that hue follows the science of light, with the lowest frequency corresponding to red and increasing frequencies moving through the color spectrum to violet. This concept is used to discuss how colors are perceived and represented in the hue model.

💡Saturation

Saturation refers to the intensity or purity of a color, indicating how far the color is from being a shade of gray. In the video, saturation is described as a measure of how true a color is, with high saturation representing a deep, rich color and low saturation indicating a color closer to gray. The script provides examples of adjusting saturation in Photoshop to change the intensity of colors in an image.

💡Brightness

Brightness is the attribute of a color that determines how light or dark it appears. The video script describes brightness as a scale between a color and white or black, with higher brightness values making the color appear closer to white and lower values closer to black. The concept is used to explain how adjusting brightness can change the appearance of colors in an image.

💡HSL/HSV

HSL stands for Hue, Saturation, and Lightness, while HSV stands for Hue, Saturation, and Value, both of which are color models that include information about a color's hue, its saturation, and its brightness or lightness. The video script mentions HSL and HSV in the context of adjusting colors in Photoshop, explaining that HSL is used for changing an existing image, while HSV is used for selecting a new color.

💡Color Contrast

Color contrast is the difference in color and brightness between elements in an image, which can make the image more visually appealing. The video script discusses using the hue color wheel to find the exact opposite of a certain color to create color contrast, enhancing the visual impact of an image. An example provided is adjusting the hue of an image to make the colors pop more.

💡8-bit Color

8-bit color refers to a color depth that uses 8 bits to represent each color channel (red, green, and blue), resulting in 256 possible values per channel and millions of colors overall. The video script explains the concept of 8-bit color in the context of digital representation, mentioning how a byte, which is 8 bits, is used to store hue values, with the range from 0 to 255.

💡CSS Filters

CSS filters are effects that can be applied to HTML elements using the filter property in CSS. In the video, CSS filters are mentioned as a method to change the hue of an image dynamically on a web page, allowing for the creation of different colored elements without the need to load multiple images. The script provides an example of changing the color of a dot indicator on a web app by adjusting the hue.

💡Chroma

Chroma, in the context of the video, refers to the colorfulness of a color, which is distinct from its brightness or lightness. The script uses the term to describe the aspect of color that is represented by hue, emphasizing that hue alone defines the chroma without considering the color's luminance or saturation.

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