freeCodeCamp's Adjust the Hue of a Color, Applied Visual Design

Channel:
United States We Will Code
Subscribers:
8,020
Published on ● Video Link: https://www.youtube.com/watch?v=JEBX26fO6ns


Duration: 3:11
43 views
2

In this freeCodeCamp tutorial we are looking at the hsl() property. This is a new one for me and had never looked into how it works before today (that I can recall at the moment anyways). Using hsl() allows us to represent color similar to the color property, rgb property etc. The h in hsl() stands for the hue or "color". This is a number from 0 to 360. Hue utilizes the color wheel concept as opposed to the color spectrum we have encountered. The s in hsl() stands for saturation or how much gray or non-gray something has. This one can be confusing at first but understanding if something is fully saturated (100%) then there is no gray in it. As something loses saturation it becomes grayer. Lastly the l stands for lightness which is how black or white something is. 50% is a normal colors lightness.



Other Videos By We Will Code


2018-10-01freeCodeCamp's Create a More Complex Shape Using CSS and HTML
2018-09-30freeCodeCamp's Create a Graphic Using CSS, Applied Visual Design
2018-09-28freeCodeCamp's Use the CSS Transform Property skewY to Skew
2018-09-28freeCodeCamp's Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
2018-09-27freeCodeCamp's Use the CSS Transform scale Property to Scale an Element on Hover
2018-09-27freeCodeCamp's Use the CSS Transform scale Property to Change the Size of an Element
2018-09-26freeCodeCamp's Create Texture by Adding a Subtle Pattern as a Background Image, url function
2018-09-25freeCodeCamp's Use a CSS Linear Gradient to Create a Striped Element
2018-09-24freeCodeCamp's Create a Gradual CSS Linear Gradient, Applied Visual Design
2018-09-22freeCodeCamp's Adjust the Tone of a Color, Applied Visual Design
2018-09-22freeCodeCamp's Adjust the Hue of a Color, Applied Visual Design
2018-09-21freeCodeCamp's Adjust the Color of Various Elements to Complementary Colors, Applied Visual Design
2018-09-20freeCodeCamp's Learn about Tertiary Colors, Applied Visual Design
2018-09-19freeCodeCamp's Learn about Complementary Colors, Applied Visual Design
2018-09-18freeCodeCamp's Center an Element Horizontally Using the margin Property, Applied Visual Design
2018-09-16freeCodeCamp's Change the Position of Overlapping Elements with the z-index Property
2018-09-15freeCodeCamp's Lock an Element to the Browser Window with Fixed Positioning, Applied Visual Design
2018-09-15freeCodeCamp's Push Elements Left or Right with the float Property, Applied Visual Design
2018-09-15freeCodeCamp's Lock an Element to its Parent with Absolute Positioning, Applied Visual Design
2018-09-14freeCodeCamp's Move a Relatively Positioned Element with CSS Offsets, Applied Visual Design
2018-09-12freeCodeCamp's Change an Element's Relative Position, Applied Visual Design


Tags:
adjust hue of element
hsl() property
hsl property
css hsl()
saturation of element