Web Frontend Colors

Posted on Edited on In ,

CSS Colors

Colors in CSS can be specified by the following methods:

  • Hexadecimal colors
  • Hexadecimal colors with transparency
  • RGB colors
  • RGBA colors
  • HSL colors
  • HSLA colors
  • Predefined/Cross-browser color names
  • With the currentcolor keyword

Hexadecimal Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.

For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

Hexadecimal Colors With Transparency

A hexadecimal color is specified with: #RRGGBB. To add transparency, add two additional digits between 00 and FF.

#p1a {background-color: #ff000080;}   /* red transparency */
#p2a {background-color: #00ff0080;}   /* green transparency */
#p3a {background-color: #0000ff80;}   /* blue transparency */

RGB Colors

An RGB color value is specified with the rgb() function, which has the following syntax:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).

For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.

Also, the following values define equal color: rgb(0,0,255) and rgb(0%,0%,100%).

#p1 {background-color: rgb(255, 0, 0);}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgb(0, 0, 255);}   /* blue */

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.

An RGBA color is specified with the rgba() function, which has the following syntax:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

HSL Colors

HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.

HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the object.

Predefined/Cross-browser Color Names

140 color names are predefined in the HTML and CSS color specification.

For example: blue, red, coral, brown, etc:

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}

The currentcolor Keyword

The currentcolor keyword refers to the value of the color property of an element.

#myDIV {
  color: blue; /* Blue text color */
  border: 10px solid currentcolor; /* Blue border color */
}

Color Schemes

  • Achromatic Color Schemes
  • Monochromatic Color Schemes. Monochromatic schemes use different tones from the same angle on the color wheel (the same hue).
  • Analogous Color Schemes. Analogous color schemes are created by using colors that are next to each other on the color wheel.
  • Complementary Color Schemes. Complementary schemes are created by combining colors from opposite sides of the color wheel.
  • Triadic. Triadic schemes are made up of hues equally spaced around color wheel.
  • Compound (aka Split Complementary) Color Scheme. Compound schemes are almost the same as complementary schemes. Instead of using colors that are opposites, it uses colors on both sides of the opposite hue.

Color Psychology

  • Colors can influence human behavior.
  • Colors can influence human perceptions.
  • Colors can influence the taste of food.
  • Colors can influence attractiveness.
RED
Red attracts the human eye

Energy: power, strength, excitement.

Danger: fire, blood, urgency, traffic stop.

Passion: appetite, emotion, love.

GREEN
Green is the most restful color

Nature: Fertility, Freshness, New Growth.

Safety: Good Health, Healing Power, Free Traffic.

Harmony: Peace, Easiness, Calmness.

BLUE
Blue is the most used office color

Sea: Water, Ocean, Depth, Wealth.

Quality: Stability, Conservatism, Productivity, Wisdom, Intelligence.

Sky: Truth, Peace, Heaven.

Yellow
Yellow is a Happy Color

Sunshine: Light, Clarity, Energy, Warmth.

Optimism: Happiness, Positivity, Cheerfulness, Youngfulness.

Black
Black is Authority and Mystery

Authority: Power, Elegance, Formality.

Mystery: Evil, Fear, Death.

Gray
Grey is Conservative

Security
Reliability
Classic Knowledge
Professional Wisdom

White
White is Purity
Cleanliness Neutrality Goodness Innocence

Common Colors

  • Color Names Supported by All Browsers
  • Color Groups
  • Color Shades
  • Fashion Color

Color Names Supported by All Browsers

Color Names Supported by All Browsers

Color Groups

HTML Color Groups

2014 Material Design color palettes

The color system - Material Design

Shades of Gray

Gray Shades HEX RGB
HTML Black #000000 rgb(0,0,0)
#080808 rgb(8,8,8)
#101010 rgb(16,16,16)
#181818 rgb(24,24,24)
#202020 rgb(32,32,32)
#282828 rgb(40,40,40)
#303030 rgb(48,48,48)
#383838 rgb(56,56,56)
#404040 rgb(64,64,64)
#484848 rgb(72,72,72)
#505050 rgb(80,80,80)
#585858 rgb(88,88,88)
#606060 rgb(96,96,96)
#686868 rgb(104,104,104)
#696969 rgb(105,105,105)
#707070 rgb(112,112,112)
#787878 rgb(120,120,120)
HTML Gray #808080 rgb(128,128,128)
#888888 rgb(136,136,136)
#909090 rgb(144,144,144)
#989898 rgb(152,152,152)
#A0A0A0 rgb(160,160,160)
#A8A8A8 rgb(168,168,168)
HTML DarkGray !!! #A9A9A9 rgb(169,169,169)
#B0B0B0 rgb(176,176,176)
#B8B8B8 rgb(184,184,184)
X11 Gray #BEBEBE rgb(190,190,190)
HTML Silver #C0C0C0 rgb(192,192,192)
#C8C8C8 rgb(200,200,200)
#D0D0D0 rgb(208,208,208)
HTML LightGray #D3D3D3 rgb(211,211,211)
#D8D8D8 rgb(216,216,216)
HTML Gainsboro #DCDCDC rgb(220,220,220)
#E0E0E0 rgb(224,224,224)
#E8E8E8 rgb(232,232,232)
#F0F0F0 rgb(240,240,240)
HTML WhiteSmoke #F5F5F5 rgb(245,245,245)
#F8F8F8 rgb(248,248,248)
HTML White #FFFFFF rgb(255,255,255)

Colors for Alerts

Display Dangers

Danger!

Red often indicates a dangerous or negative situation.

HEX: #FFDDDD

Danger!

Red often indicates a dangerous or negative situation.

HEX: #F44336

Display Warnings

Warning!

Yellow often indicates a warning that might need attention.

HEX: #FFFFCC

Warning!

Yellow often indicates a warning that might need attention.

HEX: #FFEB3B

Display Successs

Success!

Green often indicates something successful or positive.

HEX: #DDFFDD

Success!

Green often indicates something successful or positive.

HEX: #4CAF50

Display Information

Info!

Blue often indicates a neutral informative change or action.

HEX: #DDFFFF

Info!

Blue often indicates a neutral informative change or action.

HEX: #2196F3

More alert colors

Danger!

Red often indicates a dangerous or negative situation.

HEX: #E91E63

Danger!

Red often indicates a dangerous or negative situation.

HEX: #FF9800

Danger!

Red often indicates a dangerous or negative situation.

HEX: #FF5722

Danger!

Red often indicates a dangerous or negative situation.

HEX: #607D8B

Danger!

Red often indicates a dangerous or negative situation.

HEX: #FFC107

Fashion Colors

2019 - Living Coral
HEX: #FF6F61
PANTONE 16-1546
2018 - Ultra Violet
HEX: #6B5B95
PANTONE 18-3838
2017 Greenery
Hex #88B04B
RGB(136, 176, 75)
Pantone 15-0343
2016 Rose Quartz
Hex #F7CAC9
RGB(247, 202, 201)
Pantone 13-1520
2016 Serenity
Hex #92A8D1
RGB(146, 168, 209)
Pantone 15-3919
2015 Marsala
Hex #955251
RGB(149, 82, 81)
Pantone 18-1438
2014 Radiand Orchid
Hex #B565A7
RGB(181, 101, 167)
Pantone 18-3224
2013 Emerald
Hex #009B77
RGB(0, 155, 119)
Pantone 17-5641
2012 Tangerine Tango
Hex #DD4124
RGB(221, 65, 36)
Pantone 17-1463
2011 Honeysucle
Hex #D65076
RGB(214, 80, 118)
Pantone 18-2120
2010 Turquoise
Hex #45B8AC
RGB(68, 184, 172)
Pantone 15-5510
2009 Mimosa
Hex #EFC050
RGB(239, 192, 80)
Pantone 14-0848
2008 Blue Izis
Hex #5B5EA6
RGB(91, 94, 166)
Pantone 18-3943
2007 Chili Pepper
Hex #9B2335
RGB(155, 35, 53)
Pantone 19-1557
2006 Sand Dollar
Hex #DFCFBE
RGB(223, 207, 190)
Pantone 13-1106
2005 Blue Turquoise
Hex #55B4B0
RGB(85, 180, 176)
Pantone 15-5217
2004 Tigerlily
Hex #E15D44
RGB(225, 93, 68)
Pantone 17-1456
2003 Aqua Sky
Hex #7FCDCD
RGB(127, 205, 205)
Pantone 14-4811
2002 True Red
Hex #BC243C
RGB(188, 36, 60)
Pantone 19-1664
2001 Fuchsia Rose
Hex #C3447A
RGB(195, 68, 122)
Pantone 17-2031
2000 Cerulean Blue
Hex #98B4D4
RGB(152, 180, 212)
Pantone 15-4020

Appendixes

Online Tools

References

CSS Colors

Color Schemes, Psychology

Common Colors