Mastering CSS3 Colors

Conjure up stunning web pages using CSS3 Colors
4.5 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
45 students enrolled
70% off
Take This Course
  • Lectures 10
  • Length 1 hour
  • Skill Level Expert Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2016 English

Course Description

Colors have been around the Web since the very early days. Before the birth of CSS, color attributes were baked into HTML or into images. As the Web evolved and moved into a CSS-friendly world, colors were extracted and moved into style files. Colors are at the very heart of display and graphical representations. It's critical for any developer or web designer to understand colors and their relationships in-depth, so that they can be more creative and gain control over the style and design of their websites.

Mastering CSS3 Colors aims to introduce ways you can control color using CSS3 features and shows you how to become artistic to create stunning web pages.

We will start off with understanding how color systems work and more importantly how we need to work with them. We will get to know all about core colors, web-safe colors, and named colors. We'll then dive into creating color profiles in RGB and HSL, and also learn how to incorporate alpha channels into these profiles. We’ll learn all the neat tricks to pick perfect color themes for our pages using external images, Adobe Color CC, and ColorZilla.

Next we'll turn our attention to relative colors and the use of currentColor, transparency, and gradients, making our sites fancier than ever. Finally, we’ll look at web accessibility and make our site user-friendly for everyone.

Before you know it, Mastering CSS3 Colors will have you up-to-speed with the best tricks and hacks to create captivating web pages, faster and more effectively than ever.

About The Author

Ben Fhala discovered his passion for data visualization while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.

He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Among Ben's publications are HTML5 Graphing and Data Visualization Cookbook, and five video courses: jQuery UI Development; Learning Object-Oriented JavaScript; Mastering JavaScript; JavaScript Design Patterns; Web Visualization with HTML5, CSS3, and JavaScript, all for Packt Publishing.

What are the requirements?

  • This video course will help you in extending your working knowledge with colors in CSS to create web pages that stand out.

What am I going to get from this course?

  • Explore core color properties to understand the importance of colors in web designing
  • Use RGB and HSL colors to create millions of color combinations on different digital devices
  • Integrate alpha channels into your colors to extend the usability of RGB and HSL colors
  • Figure out the best design for you using external images, Adobe CC, and ColorZilla
  • Work with dynamic colors in CSS using the currentColor keyword
  • Watch the transparent color feature in action in tandem with gradients to make your sites more appealing
  • Make your sites stand out and more accessible by adding alternative images for visually impaired audiences as well

Who is the target audience?

  • This video course is aimed at web designers and developers who are comfortable building simple websites with HTML and CSS, and may know some JavaScript.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Exploring CSS3 Colors

This video will offer the overview of the course.


There are many ways to describe what a color is. The most basic way is using a name.


Let's learn the common ways to describe colors on digital devices using the color profile options. By the end of this video, you will know how to create color profiles in RGB.


In this video, you will learn a more modern way of representing RGB values. This new way will enable you to incorporate alpha channels.


RGB colors have a few limitations; mainly, they are hardware oriented based on 16 million color assumptions. It's harder to use—it is easy to understand but really hard to figure out colors with this system. There are a few other color profilers out there but the second one that is supported, which is very nattily logical, is the HSL. HSL is far more intuitive, making it easier to control colors in a human-friendly way.


It's one thing to know how to work with colors and another to find color profiles that work together. In this video, we will talk about the easiest way to create color profiles and add a brand meaning to our colors. By the end, you will be a lot more comfortable with colors as you will figure out your own designs.

Section 2: Diving Deeper into CSS3 Colors

So far, we've worked with colors by defining them in absolute terms: by name, RGB or HSL values. We now turn our attention to relative colors. The first of them is currentColor. The currentColor keyword enables us to get a reference to the current color. This can become very handy, and we will explore it in this video.


At first sight, the transparent color seems odd, but it's really powerful when used mainly in combination with the gradient interface in CSS3. In this video, you will be introduced to the transparent color and see it in action using linear-gradient interface.


In our earlier videos, we talked about colors and web safe colors. There are some colors that are reserved for use of the OS/browser. Through the use of CSS2 system colors, we can ask the browser for the system colors. With this color set, we can incorporate system colors into our design.


As we wrap up another title, let's talk about accessibility.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course