Kent Wynn Kent Wynn
  • Frontend Lang
    • HTML +
    • CSS SCSS LESS +
    • JavaScript ES6 TS
    • RxJS Library
    • Angular Framework
    • Ionic Framework
    • JavaFX Framework
    • Java Spring Framework
  • Frontend Dev
  • WordPress
  • UI/UX Designs
  • SEO
  • Tech Follows
Kent Wynn's Promotion Card
  • Kent Wynn’s Shop$10
  • My Account
  • Cart
  • Checkout
544
393
844
20K
0
Kent Wynn Kent Wynn

Software Engineer | UI/UX & Frontend Architect

Become Frontend Master
Kent Wynn Kent Wynn
  • Frontend Lang
    • HTML +
    • CSS SCSS LESS +
    • JavaScript ES6 TS
    • RxJS Library
    • Angular Framework
    • Ionic Framework
    • JavaFX Framework
    • Java Spring Framework
  • Frontend Dev
  • WordPress
  • UI/UX Designs
  • SEO
  • Tech Follows
  • CSS
  • Frontend Lang

Become A Master of CSS Color Values: Simple Explanation

  • July 25, 2021
  • 2.6K views
  • 4 minute read
Become A Master of CSS Color Values - Simple Explanation
Total
0
Shares
0
0
0
0
0
0
0
0
Table of Contents Hide
  1. #RRGGBB
  2. #RGB
  3. #RRGGBBAA
  4. #RGBA
  5. rgb(rrr,ggg,bbb)
  6. rgb(rrr.rr%,ggg.gg%,bbb.bb%)
  7. hsl(hhh.hh,sss.ss%,lll.ll%)
  8. rgba(rrr,ggg,bbb,a.aa), rgba(rrr.rr%,ggg.gg%,bbb.bb%,a.aa), hsla(hhh.hh,sss.ss%,lll.ll%,a.aa)
  9. <keyword>
  10. currentColor
  11. transparent

The CSS color values can be expressed in a variety of ways. Learn how to become a master of color values in CSS and apply them to your project.

#RRGGBB

This is a hex-pair notation familiar to authors using traditional HTML. In this format, the first pair of digits corresponds to the red level, the second pair to the green, and the third pair to the blue.

Each pair is in hexadecimal notation in the range 00–FF (decimal 0–255). Thus, a “pure” blue is written #0000FF, a “pure” red is written #FF0000, and so on.

#RGB

This is a shorter form of the six-digit notation described previously. In this format, each digit is replicated to arrive at an equivalent six-digit value; thus, #F8C becomes #FF88CC.

#RRGGBBAA

An extension of the #RRGGBB notation which adds an alpha channel. As with the R, G, and B values, the A (alpha) value is in hexadecimal notation in the range 00– FF.

These are mapped from hexadecimal to decimal in the range 0–1; thus, #00FF0099 is equivalent to the color #00FF00 (light green) with an opacity of 0.6.

The opacity here is derived by converting hexadecimal 99 to decimal 153, and then dividing 153 by 255 to get 0.6. Put another way, #00FF0099 is exactly equivalent to rgba(0,255,0,0.6).

Note: support for this notation first emerged in early 2016.

#RGBA

This is a shorter form of the eight-digit #RRGGBBAA notation described previously. In this format, each digit is replicated to arrive at an equivalent eight-digit value; thus, #F8C6 becomes #FF88CC66.

Note: support for this notation first emerged in early 2016.

rgb(rrr,ggg,bbb)

This format allows the author to use RGB values in the range 0–255; only integers are permitted. Not coincidentally, this range is the decimal equivalent of 00–FF in hexadecimal.

In this format, “pure” green is rgb(0,255,0), and white is represented as rgb(255,255,255).

rgb(rrr.rr%,ggg.gg%,bbb.bb%)

This format allows the author to use RGB values in the range 0% to 100%, with decimal values allowed (e.g., 75.5%).

The value for black is thus rgb(0%,0%,0%), whereas “pure” blue is rgb(0%,0%,100%).

hsl(hhh.hh,sss.ss%,lll.ll%)

This format permits authors to specify a CSS color by its hue angle, saturation, and lightness (HSL). A hue angle is always a unitless number or a <degree> value in the range 0 to 360, and the saturation and brightness values are always percentages.

Hue angles 0 and 360 are equivalent and are both red. Hue angles greater than 360 can be declared, but they are normalized to the 0–360 range; thus, setting a hue angle of 454 is equivalent to setting an angle of 94.

Read more: Become A Master of CSS Length Values: Simple Explanation

Any HSL value, regardless of color angle, will be rendered as a shade of gray if the saturation value is 0%; the exact shade will depend on the lightness value.

Any HSL value, regardless of the hue angle, will be rendered solid black if lightness is 0% and solid white if lightness is 100%. The “normal” lightness value—that is, the value associated with most common colors—is 50%.

rgba(rrr,ggg,bbb,a.aa), rgba(rrr.rr%,ggg.gg%,bbb.bb%,a.aa), hsla(hhh.hh,sss.ss%,lll.ll%,a.aa)

These extend the previous three formats to include an alpha (opacity) value. The alpha value must be a real number between 0 and 1 inclusive; percentages are not permitted for the alpha value.

Thus, rgba(255,0,0,0.5) and rgba(100%,0%,0%,0.5) and hsla(0,100%,50%,0.5) are all equivalent half-opaque red.

<keyword>

One of 16 recognized keywords based on the original Windows VGA colors.

These keywords are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

CSS-Color-Names

Browsers generally also recognize the 148 color keywords documented in the CSS Color Module Level 4 specification, referred to for historical reasons as “the X11 colors” (though the list does not precisely replicate X11’s colors).

currentColor

A special keyword that represents the current computed value of the element’s CSS color property.

This means you can declare background-color: currentColor and set the element’s background to be the same color as its foreground (not recommended).

When applied to the color property, it is equivalent to declaring color: inherit. It can also be used on borders; border: 1px solid is equivalent to border: 1px solid currentColor. This can be quite useful when (un)setting a border’s color via DOM scripting.

transparent

A special keyword that is (just barely) a shorthand for rgba(0,0,0,0), which is the computed value any time transparent is used.

Total
0
Shares
0
0
0
0
0
0
0
Kent Wynn

I'm Kent Wynn, from Vietnam, currently working as a Software Engineer, UI/UX Designs & Frontend Architect. With years of working and project experiences, I decided to develop KentWynn.Com, a technical article-based website for sharing and learning.

Related Topics
  • css
  • css color
Previous Article
#STOP: @Import and #START: @Use, @Forward In SASS
  • CSS
  • Frontend Lang

Stop Using @import & Start Using @use, @forward In Sass

  • July 22, 2021
View Post
Next Article
Become A Master of CSS Length Values: Simple Explanation
  • CSS
  • Frontend Lang

Become A Master of CSS Length Values: Simple Explanation

  • July 25, 2021
View Post

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • What is HTML6? HTML6’s New Structural Patterns
  • How to safely upload SVG files to WordPress
  • How to Create a Blog | A Guide to Complete Blogging Success
  • Top 20 Best Free Website Speed Test Tools
  • How To Debug WordPress: A Complete Beginner’s Guide
Subscribe To Us

Get New Posts Delivered To Your Inbox

Stay Updated!

Subscribe now to our newsletter to receive latest articles, frontend trends and more!

Connect Me

I’m truly myself.

For me, success means the people we know and together what we are working on. I believe in teamwork and hard work, not magic!
About Me
Quick Navigation
  • Frontend Lang
    • HTML +
    • CSS SCSS LESS +
    • JavaScript ES6 TS
    • RxJS Library
    • Angular Framework
    • Ionic Framework
    • JavaFX Framework
    • Java Spring Framework
  • Frontend Dev
  • WordPress
  • UI/UX Designs
  • SEO
  • Tech Follows
Our Services
  • Become Frontend Master Courses
  • Marketing Services$150
  • Website Services$200
Shop Connect
  • Kent Wynn’s Shop$10
    • Wordpress Themes/Plugins
    • UI/UX Software
    • macOS Software
    • eBooks
    • Others
  • My Account
  • Cart
  • Checkout
Kent Wynn Kent Wynn
  • Contact Me
  • Hire Me
  • Donate Me
© 2021 Kent Wynn - Software Engineer | UI/UX & Frontend Architect | All Rights Reserved.

Input your search keywords and press Enter.