Monday, September 30, 2013

CSS3 Color: List of Value Syntax

Monkey Raptor CSS logo
This is the syntax list of color code with short explanation on each. You'll also find helpful links at the bottom of this post.


Color Code with Keyword
We can declare the color style with keyword, e.g blue, grey, red, purple, pink, lightblue, darkgreen, etc. The color keyword is case-insensitive : you can use capital or lowercase letters or mix them up.

Color Code with Numeric
Hexadecimal
Hexadecimal color map
Simple Color Map
It's a very common method to use this. There are 24.24.24.24.24.24 = 224 = 16,777,216 (16 millions) possibilities to create color with Hexadecimal. All this CSS3 syntax color numeric and color coordinate system (which you're about to see below this) were built to facilitate the "True Color" - 24 bit color depth. All modern computer screen can display that color depth, and equipped with even more capabilities.


Shorthand, compacting :

Decimal
This one is used in RGB/RGBA and HSL/HSLA. The idea is just like hexadecimal (base 16) but translated to decimal (base 10). You'll see the syntax below. The decimal number can also be substituted with percentage value.

Color Code with RGB and RGBA
RGB (Red-Green-Blue)
RGB color model
RGB Color Model
The RGB color model is an additive color model in which red, green, and blue lights are added together in various ways to reproduce a broad array of colors (source : RGB Color Model - Wikipedia). RGB is hardware oriented. It reflects the use of CRT (Cathode Ray Tube) screen.

Basic syntax for RGB :
The decimal value (val_1, val_2, val_3) ranges from 0 - 255. The val_1, val_2, and val_3 specify the amount of red, blue, and green (lime), respectively.
The percentage value (val_1, val_2, val_3) ranges from 0% - 100%.
The CSS3 syntax for RGB (numeric - decimal) :


The CSS3 syntax for RGB (percentage) :



RGBA (Red-Green-Blue-Alpha)
It's the same concept with RGB but with alpha addition. The "alpha" defines the opacity of the color. The alpha value ranges from 0 to 1. Some older browsers will ignore the opacity (alpha), since this is a "new" feature.

Basic syntax for RGBA - the alpha is placed at the end :

The CSS3 syntax for RGBA (numeric) :


The CSS3 syntax for RGBA (percentage for RGB color) :

Color Code with HSL and HSLA
HSL (Hue-Saturation-Lightness)
HSL color model
HSL Color Model

This color value is based on cylindrical-coordinate system for representing the RGB color. At first, this syntax will be more complicated to remember than using "vanilla" RGB (to me, hexadecimal is the simplest one). But, once you've memorized the position of the basic color, e.g blue, green, yellow, red, etc, you'll find that using HSL is more "intuitive" than RGB and Hex. Useful for drawing elements with CSS. Tinkering the gradient and all.

And just like standard RGB syntax, HSL also has HSLA : additional alpha (opacity). The alpha value also ranges from 0 to 1.

Basic syntax for HSL :

The hue degree value ranges from 0 to 360 (circle).
The saturation and lightness values range from 0% to 100%.

For example, this is the HSL syntax for (bright) RED color :

HSL syntax for LIME color :


HSLA (Hue-Saturation-Lightness-Alpha)

Basic syntax for HSLA :

As you can see the syntax above, the usage of HSLA is just like HSL, but with additional alpha (opacity) declaration.

For example, this is the HSLA value for (bright) RED color with full opacity (solid) :

This is the HSLA value for (bright) RED color with half opacity (transparent) :

The color value syntax can be declared in background, background-color, border-color, box-shadow color, etc. Any CSS property that has color value.


Transparent Value
This is using keyword : transparent - it basically has the same look as "none" value. But "physically" different, because the color is still there, but it's transparent. It's useful for color manipulation on text/box/background.
Basic syntax :
FYI, the transparent keyword value is rgba(0,0,0,0) in RGBA value.
Example :

Blurred Text


CSS for that is :

If we use "none" for color property, this what will happen :

Blurred Text


As you can see "none" is "interpreted" as the default color, that is black (I'm using Chrome here).

This is the CSS of that text :

In conclusion, using different syntax above depends on your taste. Some people are more familiar with RGB than HSL, some probably prefer HEX than using RGB or HSL. I, myself, like HEX color because it's easier to type (or copy-paste), no other reason.

Alright, that's about it, neat structured different coloring methods in CSS3.


References :

Helpful Links :

No comments:

Post a Comment

Tell me what you think...