Css - (Colors|Colours)
Description
Color in css.
A valid color is either :
- or a numerical RGB specification.
Value Type
Name
The list of colour is:
| Color Name | numerical RGB |
|---|---|
| aqua | #00ffff |
| black | #000000 |
| blue | #0000ff |
| fuchsia | #ff00ff |
| gray | #808080 |
| green | #008000 |
| lime | #00ff00 |
| maroon | #800000 |
| navy | #000080 |
| olive | #808000 |
| orange | #ffA500 |
| purple | #800080 |
| red | #ff0000 |
| silver | #c0c0c0 |
| teal | #008080 |
white (white  ) | #ffffff |
| yellow | #ffff00 |
Example(s):
body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }
RGB color
The RGB color model is used in numerical color specifications. These examples all specify the same color:
Example(s):
em { color: #f00 } /* #rgb */
em { color: #ff0000 } /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }
The format of an RGB value in hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters.
Rgb hexadecimal String
The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ')'.
A numerical RGB is a valid color if:
- it is exactly seven characters long,
- the first character is a # (U+0023) character,
- the remaining six characters are all ASCII hex digits,
- with a RGB coordinates where:
- the first two digits represents the red component,
- the middle two digits represents the green component,
- and the last two digits represents the blue component, in hexadecimal.
Short notation with three digit:
- #rgb expands to #rrggbb For example, #fb0 expands to #ffbb00.
- white #ffffff can be specified #fff
Rgb function
The integer value 255 corresponds to :
- 100%,
- F or FF in the hexadecimal notation
Ie white can be specified so:
rgb(255,255,255) = rgb(100%,100%,100%) = #FFF
Whitespace characters are allowed around the numerical values.
Values outside
Values outside the device gamut should be clipped or mapped into the gamut when the gamut is known: the red, green, and blue values must be changed to fall within the range supported by the device.
For a typical CRT monitor, whose device gamut is the same as sRGB, the four rules below are equivalent:
em { color: rgb(255,0,0) } /* integer range 0 - 255 */
em { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */
em { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
Other devices, such as printers, have different gamuts than sRGB; some colors outside the 0..255 sRGB range will be representable (inside the device gamut), while other colors inside the 0..255 sRGB range will be outside the device gamut and will thus be mapped.
Transparent black
The term “transparent black” refers to the color with red, green, blue, and alpha channels all set to zero.
Dynamic Colorization
See http://codepen.io/noahblon/pen/ZbjmbK
With Custom Value
- Set custom properties on the root (Ref)
:root {
--blue: #075ebb;
--info: #17a2b8;
}
#box {
width:50%;
margin: 0 auto;
text-align: center;
padding: 2rem
}
- Use them with the var function.
<div id="box" style="background-color:var(--info)">
A box with the info color variable
</div>
Transparency / Opacity
See CSS - How to set an opacity (on any element, background image included)