Types of Color Values
Color values can be defined in these forms:
- Color names
- RGBa color values. Red, Green, Blue, alpha. alpha is optional. RGB values are 0-255. 0 = black, 255 = highest saturation. alpha values are 0 to 1, with 1 = 100%. rgb(r, g, b) or rgba(r, g, b, a) rgba(255, 255, 255, 1) or rgba(100%, 100%, 100%, 1)
- Hexadecimal values. #RRGGBB. 0-9 A-F (10-15). #RGB doubled up
- HSLa Color values. Hue, Saturation, Lightness/Luminosity. alpha is optional. hsl(h, s, l) or hsla(h, s, l, a). hsla(hue value number 0-360, percentage, percentage, 0-1 decimal)(
Color Name
- white
- gray
- black
- red
- yellow
- lime
- cyan
- blue
- magenta
Hexadecimal
- #FFFFFF
- #808080
- #000000
- #FF0000
- #FFFF00
- #00FF00
- #00FFFF
- #0000FF
- #FF00FF"
RGB and RGBa
- rgb(255,255,255)
- rgb(128,128,128)
- rgb(0,0,0)
- rgb(255,0,0)
- rgb(255,255,0)
- rgb(0,255,0)
- rgb(0,255,255)
- rgb(0,0,255)
- rgb(255,0,255)
- rgba(100%, 100%, 100%, 1)
- rgba(50%, 50%, 50%, 0.9)
- rgba(0%, 0%, 0%, 0.8)
- rgba(100%, 0%, 0%, 0.7)
- rgba(100%, 100%, 0%, 0.6)
- rgba(0%, 100%, 0%, 0.5)
- rgba(0%, 100%, 100%, 0.4)
- rgba(0%, 0%, 100%, 0.3)
- rgba(100%, 0%, 100%, 0.2)
HSL and HSLa
- hsl(0,0%,100%)
- hsl(0,0%,50%)
- hsl(0,0%,0%)
- hsl(0,100%,50%)
- hsl(60,100%,50%)
- hsl(120,100%,50%)
- hsl(180,100%,50%)
- hsl(240,100%,50%)
- hsl(300,100%,50%)
- hsla(0,100%,50%, 50%)
- hsla(120,100%,50%, 0.5)
- hsla(240, 100%, 50%, 50%)
color
This is also known as the 'foreground color'. This value can effect text and borders.
Example:
This is a test. This is also known as the 'foreground color'. This value can effect text and borders. Note that this blockquote was styled with the 'color' property to be green and this has made both the text and the border green.
Gradients
linear-gradient(ndeg, color, color)
background-image: linear-gradient(180deg, aqua, green)
background-image: linear-gradient(to bottom, yellow, orange 25%, purple)
background-image: linear-gradient(to top right, red, orange, yellow, green, blue 50%)
radial-gradient()
You can specify shape, size, and center position of a radial gradient. Shape: circle, ellipse. Size: length units or percentage (width height). Position: center center by default. Keywords: closest-side, closest-corner, farthest-side, farthest-corner.
- background-image: radial-gradient(circle, yellow, green)
- background-image: radial-gradient(200px 80px, aqua, green)
- background-image: radial-gradient(farthest-side at right bottom, yellow, orange 50%, purple)
Repeating Gradients
- background-image: repeating-linear-gradient(to bottom, white, silver 30px
- background-image: repeating-linear-gradient(45deg, orange, orange 12px, white 12px, white 24px
- background-image: repeating-radial-gradient(50px, coral, crimson 50%)
- white
- snow
- ghostwhite
- whitesmoke
- gainsboro
- lightgrey
- silver
- darkgray
- gray
- dimgray
- lightslategray
- slategray
- darkslategray
- black
- mistyrose
- lightpink
- rosybrown
- tomato
- red
- indianred
- crimson
- firebrick
- darkred
- maroon
- lightcoral
- coral
- lightsalmon
- salmon
- darksalmon
- orangered
- bisque
- peachpuff
- burlywood
- tan
- sandybrown
- orange
- darkorange
- chocolate
- sienna
- saddlebrown
- brown
- floralwhite
- seashell
- oldlace
- linen
- ivory
- beige
- lightyellow
- lightgoldenrodyellow
- lemonchiffon
- cornsilk
- antiquewhite
- papayawhip
- blanchedalmond
- moccasin
- navajowhite
- wheat
- palegoldenrod
- khaki
- darkkhaki
- yellow
- gold
- goldenrod
- darkgoldenrod
- peru
- mintcream
- honeydew
- palegreen
- lightgreen
- darkseagreen
- mediumspringgreen
- springgreen
- greenyellow
- chartreuse
- lawngreen
- yellowgreen
- lime
- limegreen
- mediumseagreen
- seagreen
- olivedrab
- olive
- forestgreen
- green
- darkolivegreen
- darkgreen
- azure
- lightcyan
- paleturquoise
- aquamarine
- aqua
- cyan
- turquoise
- mediumaquamarine
- mediumturquoise
- darkturquoise
- lightseagreen
- cadetblue
- darkcyan
- teal
- aliceblue
- lightblue
- powderblue
- lightskyblue
- lightsteelblue
- skyblue
- deepskyblue
- dodgerblue
- cornflowerblue
- mediumslateblue
- royalblue
- steelblue
- slateblue
- blue
- mediumblue
- darkslateblue
- midnightblue
- navy
- darkblue
- lavender
- thistle
- plum
- violet
- orchid
- mediumpurple
- mediumorchid
- darkorchid
- blueviolet
- darkviolet
- purple
- indigo
- lavenderblush
- pink
- hotpink
- palevioletred
- magenta
- fuchsia
- deeppink
- mediumvioletred
- darkmagenta