CSS Colors

CSS Colors
Nikhil
Published on 2021-07-08 14:40:34

CSS color currentColor


currentColor returns the computed color value of the current element.

Use in the same element

Here currentColor evaluates to red since the color property is set to red:

div {
color: red;
border: 5px solid currentColor;
box-shadow: 0 0 5px currentColor;
}

In this case, specifying currentColor for the border is most likely redundant because omitting it should produce identical results. Only use currentColor inside the border property within the same element if it would be overwritten otherwise due to a more specific selector.

Since it's the computed color, the border will be green in the following example due to the second rule overriding the first:

div {
color: blue;
border: 3px solid currentColor;
color: green;
}

Inherited from the parent element

The parent's color is inherited, here currentColor evaluates to 'blue', making the child element's border-color blue.

.parent-class {
color: blue;
}
.parent-class .child-class {
border-color: currentColor;
}

currentColor can also be used by other rules which normally would not inherit from the color property, such as background-color. The example below shows the children using the color set in the parent as its background:

.parent-class {
color: blue;
}
.parent-class .child-class {
background-color: currentColor;
}

Possible Result:

color tutorial

 

Color Keywords


Most browsers support using color keywords to specify a color. For example, to set the color of an element to blue, use the blue keyword:

.some-class {
color: blue;
}

CSS keywords are not case sensitive—blue, Blue and BLUE will all result in #0000FF.

Color HTML / CSS Name Hex Code

#RRGGBB

Decimal Code

(R,G,B)

  Black #000000 (0,0,0)
  White #FFFFFF (255,255,255)
  Red #FF0000 (255,0,0)
  Lime #00FF00 (0,255,0)
  Blue #0000FF (0,0,255)
  Yellow #FFFF00 (255,255,0)
  Cyan / Aqua #00FFFF (0,255,255)
  Magenta / Fuchsia #FF00FF (255,0,255)
  Silver #C0C0C0 (192,192,192)
  Gray #808080 (128,128,128)
  Maroon #800000 (128,0,0)
  Olive #808000 (128,128,0)
  Green #008000 (0,128,0)
  Purple #800080 (128,0,128)
  Teal #008080 (0,128,128)
  Navy #000080 (0,0,128)
Color Color Name Hex Code

#RRGGBB

Decimal Code

R,G,B

  maroon #800000 (128,0,0)
  dark red #8B0000 (139,0,0)
  brown #A52A2A (165,42,42)
  firebrick #B22222 (178,34,34)
  crimson #DC143C (220,20,60)
  red #FF0000 (255,0,0)
  tomato #FF6347 (255,99,71)
  coral #FF7F50 (255,127,80)
  indian red #CD5C5C (205,92,92)
  light coral #F08080 (240,128,128)
  dark salmon #E9967A (233,150,122)
  salmon #FA8072 (250,128,114)
  light salmon #FFA07A (255,160,122)
  orange red #FF4500 (255,69,0)
  dark orange #FF8C00 (255,140,0)
  orange #FFA500 (255,165,0)
  gold #FFD700 (255,215,0)
  dark golden rod #B8860B (184,134,11)
  golden rod #DAA520 (218,165,32)
  pale golden rod #EEE8AA (238,232,170)
  dark khaki #BDB76B (189,183,107)
  khaki #F0E68C (240,230,140)
  olive #808000 (128,128,0)
  yellow #FFFF00 (255,255,0)
  yellow green #9ACD32 (154,205,50)
  dark olive green #556B2F (85,107,47)
  olive drab #6B8E23 (107,142,35)
  lawn green #7CFC00 (124,252,0)
  chart reuse #7FFF00 (127,255,0)
  green yellow #ADFF2F (173,255,47)
  dark green #006400 (0,100,0)
  green #008000 (0,128,0)
  forest green #228B22 (34,139,34)
  lime #00FF00 (0,255,0)
  lime green #32CD32 (50,205,50)
  light green #90EE90 (144,238,144)
  pale green #98FB98 (152,251,152)
  dark sea green #8FBC8F (143,188,143)
  medium spring green #00FA9A (0,250,154)
  spring green #00FF7F (0,255,127)
  sea green #2E8B57 (46,139,87)
  medium aqua marine #66CDAA (102,205,170)
  medium sea green #3CB371 (60,179,113)
  light sea green #20B2AA (32,178,170)
  dark slate gray #2F4F4F (47,79,79)
  teal #008080 (0,128,128)
  dark cyan #008B8B (0,139,139)
  aqua #00FFFF (0,255,255)
  cyan #00FFFF (0,255,255)
  light cyan #E0FFFF (224,255,255)
  dark turquoise #00CED1 (0,206,209)
  turquoise #40E0D0 (64,224,208)
  medium turquoise #48D1CC (72,209,204)
  pale turquoise #AFEEEE (175,238,238)
  aqua marine #7FFFD4 (127,255,212)
  powder blue #B0E0E6 (176,224,230)
  cadet blue #5F9EA0 (95,158,160)
  steel blue #4682B4 (70,130,180)
  corn flower blue #6495ED (100,149,237)
  deep sky blue #00BFFF (0,191,255)
  dodger blue #1E90FF (30,144,255)
  light blue #ADD8E6 (173,216,230)
  sky blue #87CEEB (135,206,235)
  light sky blue #87CEFA (135,206,250)
  midnight blue #191970 (25,25,112)
  navy #000080 (0,0,128)
  dark blue #00008B (0,0,139)
  medium blue #0000CD (0,0,205)
  blue #0000FF (0,0,255)
  royal blue #4169E1 (65,105,225)
  blue violet #8A2BE2 (138,43,226)
  indigo #4B0082 (75,0,130)
  dark slate blue #483D8B (72,61,139)
  slate blue #6A5ACD (106,90,205)
  medium slate blue #7B68EE (123,104,238)
  medium purple #9370DB (147,112,219)
  dark magenta #8B008B (139,0,139)
  dark violet #9400D3 (148,0,211)
  dark orchid #9932CC (153,50,204)
  medium orchid #BA55D3 (186,85,211)
  purple #800080 (128,0,128)
  thistle #D8BFD8 (216,191,216)
  plum #DDA0DD (221,160,221)
  violet #EE82EE (238,130,238)
  magenta / fuchsia #FF00FF (255,0,255)
  orchid #DA70D6 (218,112,214)
  medium violet red #C71585 (199,21,133)
  pale violet red #DB7093 (219,112,147)
  deep pink #FF1493 (255,20,147)
  hot pink #FF69B4 (255,105,180)
  light pink #FFB6C1 (255,182,193)
  pink #FFC0CB (255,192,203)
  antique white #FAEBD7 (250,235,215)
  beige #F5F5DC (245,245,220)
  bisque #FFE4C4 (255,228,196)
  blanched almond #FFEBCD (255,235,205)
  wheat #F5DEB3 (245,222,179)
  corn silk #FFF8DC (255,248,220)
  lemon chiffon #FFFACD (255,250,205)
  light golden rod yellow #FAFAD2 (250,250,210)
  light yellow #FFFFE0 (255,255,224)
  saddle brown #8B4513 (139,69,19)
  sienna #A0522D (160,82,45)
  chocolate #D2691E (210,105,30)
  peru #CD853F (205,133,63)
  sandy brown #F4A460 (244,164,96)
  burly wood #DEB887 (222,184,135)
  tan #D2B48C (210,180,140)
  rosy brown #BC8F8F (188,143,143)
  moccasin #FFE4B5 (255,228,181)
  navajo white #FFDEAD (255,222,173)
  peach puff #FFDAB9 (255,218,185)
  misty rose #FFE4E1 (255,228,225)
  lavender blush #FFF0F5 (255,240,245)
  linen #FAF0E6 (250,240,230)
  old lace #FDF5E6 (253,245,230)
  papaya whip #FFEFD5 (255,239,213)
  sea shell #FFF5EE (255,245,238)
  mint cream #F5FFFA (245,255,250)
  slate gray #708090 (112,128,144)
  light slate gray #778899 (119,136,153)
  light steel blue #B0C4DE (176,196,222)
  lavender #E6E6FA (230,230,250)
  floral white #FFFAF0 (255,250,240)
  alice blue #F0F8FF (240,248,255)
  ghost white #F8F8FF (248,248,255)
  honeydew #F0FFF0 (240,255,240)
  ivory #FFFFF0 (255,255,240)
  azure #F0FFFF (240,255,255)
  snow #FFFAFA (255,250,250)
  black #000000 (0,0,0)
  dim gray / dim grey #696969 (105,105,105)
  gray / grey #808080 (128,128,128)
  dark gray / dark grey #A9A9A9 (169,169,169)
  silver #C0C0C0 (192,192,192)
  light gray / light grey #D3D3D3 (211,211,211)
  gainsboro #DCDCDC (220,220,220)
  white smoke #F5F5F5 (245,245,245)
  white #FFFFFF (255,255,255)

 

In addition to the named colors, there is also the keyword transparent, which represents a fully transparent black: rgba(0,0,0,0)

 

Hexadecimal Value


Background

CSS colors may also be represented as a hex triplet, where the members represent the red, green and blue components of a color. Each of these values represents a number in the range of 00 to FF, or 0 to 255 in decimal notation. Uppercase and/or lowercase Hexadecimal values may be used (i.e. #3fc = #3FC = #33ffCC). The browser interprets #369 as #336699. If that is not what you intended but rather wanted #306090, you need to specify that explicitly.

The total number of colors that can be represented with hex notation is 256 ^ 3 or 16,777,216.

Syntax

color: #rrggbb;
color: #rgb

Value Description

rr 00 - FF for the amount of red
gg 00 - FF for the amount of green
bb 00 - FF for the amount of blue

CSS

.some-class {
/* This is equivalent to using the color keyword 'blue' */
color: #0000FF;
}
.also-blue {
/* If you want to specify each range value with a single number, you can!
This is equivalent to '#0000FF' (and 'blue') */
color: #00F;
}

Hexadecimal notation is used to specify color values in the RGB color format, per the W3C's 'Numerical color values.

There are a lot of tools available on the Internet for looking up hexadecimal (or simply hex) color values.

Search for "hex color palette" or "hex color picker" with your favorite web browser to find a bunch of options! Hex values always start with a pound sign (#), are up to six  "digits" long, and are case-insensitive: that is, they don't care about capitalization. #FFC125 and #ffc125 are the same color.

 

rgb() Notation


RGB is an additive color model which represents colors as mixtures of red, green, and blue light. In essence, the RGB representation is the decimal equivalent of the Hexadecimal Notation. In Hexadecimal each number ranges from 00-FF which is equivalent to 0-255 in decimal and 0%-100% in percentages.

.some-class {
/* Scalar RGB, equivalent to 'blue'*/
color: rgb(0, 0, 255);
}
.also-blue {
/* Percentile RGB values*/
color: rgb(0%, 0%, 100%);
}

Syntax

rgb(<red>, <green>, <blue>)

Value Description

  • <red> an integer from 0 - 255 or percentage from 0 - 100%
  • <green> an integer from 0 - 255 or percentage from 0 - 100%
  • <blue> an integer from 0 - 255 or percentage from 0 - 100%

 

hsl() Notation


HSL stands for hue ("which color"), saturation ("how much color") and lightness ("how much white").

Hue is represented as an angle from 0° to 360° (without units), while saturation and lightness are represented as percentages.

p {
color: hsl(240, 100%, 50%); /* Blue */
}

color tutorial

Syntax

color: hsl(<hue>, <saturation>%, <lightness>%);

Value Description

  • <hue> specified in degrees around the color wheel (without units), where 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta, and 360° is red
  • <saturation> specified in percentage where 0% is fully desaturated (grayscale) and 100% is fully saturated (vividly colored)
  • <lightness> specified in percentage where 0% is fully black and 100% is fully white

Notes

  • A saturation of 0% always produces a grayscale color; changing the hue has no effect.
  • A lightness of 0% always produces black, and 100% always produces white; changing the hue or saturation has no effect.

 

hsla() Notation


Similar to hsl() notation, but with an added alpha (opacity) value.

hsla(240, 100%, 50%, 0) /* transparent */
hsla(240, 100%, 50%, 0.5) /* half-translucent blue */
hsla(240, 100%, 50%, 1) /* fully opaque blue */

Syntax

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);

Value Description

  • <hue> specified in degrees around the color wheel (without units), where 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta, and 360° is red
  • <saturation> percentage where 0% is fully desaturated (grayscale) and 100% is fully saturated (vividly colored)
  • <lightness> percentage where 0% is fully black and 100% is fully white
  • <alpha> a number from 0 - 1 where 0 is fully transparent and 1 is fully opaque

ATutorialHub Related Guide

Comments (8)

Leave a Comment

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

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website