freeCodeCamp's Adjust the Tone 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=570ryblqCxk


Duration: 2:14
54 views
1

In this lesson from freeCodeCamp's Applied Visual Design section we look at a helpful tip regarding the hsl() property. We learned in the last lesson that hsl() stands for hue, saturation, and lightness. Once we create a color, we might want to create a variation of that color. An easy way to do this would be adjusting the saturation and lightness. In this challenge we adjust the tone of our nav bar to be the same cyan color that surrounds it, but will less saturation and light. This can help give our site a meaningful balance and is easier to produce than with other backgorund color values.



Other Videos By We Will Code


2018-10-04freeCodeCamp's Use CSS Animation to Change the Hover State of A Button, Applied Visual Design
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


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