Colors in #CSS Day05/100

In CSS, colors can be defined in several different ways.

Color Names

The easiest and the most intuitive way to set colors is by name. The most common being:

There is a list of special keywords that can be used to identify colors. The colors are set in CSS : color:red;

Cons:

  • Limited Choice
  • Not possible to get shade combinations

RGB Color Model

Another way is by using decimal RGB values (Red, Green, Blue). An RGB value is set using the rgb() property. The property takes 3 integer values from 0 to 255 or a percentage.

Example of colors using RGB values

Setting the value in CSS: color: rgb(255,255,255)

RGB Calculator can be used to get the desired color.

RGBA : A for Transparency

The RGBA (Red Green Blue Alpha) scheme complements RGB with another number factored for transparency. Its value can be specified from 0 (completely transparent) to 1 (complete opacity).

The previous color setting can be made semi-transparent by setting

color: rgba(255, 255, 255, 0.5);

HEX

HEX is mostly the same as RGB, but it is recorded in the hexadecimal notation. Each pair of characters means the same sequence of colors: red, green, and blue in the range from 00 to FF

Colors in HEX code:

A HEX code generator can be used to get the desired color.

HEX color value is set as color: #FFFF00; The values are not case-sensitive.

The values can be shortened depending on color code

HSL

The color is defined by three parameters: Hue, Saturation, and Lightness.

Hue is an angle on the color wheel:

Color corresponds to a certain number of degrees without any units of measurements for a shade.

Saturation of the selected shade is indicated as a percentage in the range from 0% to 100% . The closer the value is to 100% , the more saturated the color looks.

Lightness is measured as a percentage. The closer the value is to 100% , the lighter the color is.

Setting the value looks like this: background-color: hsl(0, 100%, 50%);

HSLA

“A” stands for alpha channel, which determines the opacity of the color, between 0 to 1

background-color: hsla(0, 100%, 50%, 0.5);

I hope you all enjoyed the mini-color session, until tomorrow... 👋

--

--

--

Technical Speaker and an aspiring writer with avid addiction to gadgets, meet-up groups, Kotlin and paper crafts.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

5 tips for building with Webflow, when you’re not a designer…

Person looking at computer with dashboard

Extreme makeover: In-product messaging edition

Reflection: Iconography & Care Labels

Japanese garment tag vs UK garment tag with care instructions

EUvsVirus: Ideating to Tackle the Covid-19 Crisis is not just about Tech

Abstract painting Sonia Delaunay-Terk, Bullier (Simultaneous colors), 1913, oil on canvas, 97 x 139 cm, Bielefeld, Städtische

The Basics of Interaction Design

How I became a User Experience Designer

How to assess your needs from your Landscape and Garden Design?

Reva Saksena, Srishti Mehta, Shruti Bhagwat, Architects, Architecting, Architecture, Architectural, Landscape, Garden, Design, Planning, Sustainable, Green, Landscaping, Sustainability, Greenery, Gardening, Landscaped, Gardened, Zeyka, Zeyka India

Why Data isn’t Enough — Confession of a Digital Marketeer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Henna Singh

Henna Singh

Technical Speaker and an aspiring writer with avid addiction to gadgets, meet-up groups, Kotlin and paper crafts.

More from Medium

CSS: Pseudo Classes

3D Bounce loading animation using CSS -Rare Programmer

How to make full stack e-commerce website using HTML, CSS and JS | Part 01

Create an animated button using CSS