Color

#FAFAFA - hexadecimal color code

  • it consists of three hex digits
  • the higher digit, the lighter color
  • #FAFAFA80 - fourth digit is optional. this is alpha channel which is used for transparency
  • transparency options can be found here. some of them are:
  • 99 - 70%
  • 80 - 50%
  • 4D - 30%


rgb(red green blue) - expresses a color in the sRGB color space

  • e.g. rgb(255 255 255) - accepts one number for each channel (0 to 255). numbers might be comma-separated or not
  • rgb(red green blue / transparencyValue) - transparency value is optional. possible values are 0 to 1
  • rgba(red green blue transparencyValue) - separate command for setting transparency


hsl(hue saturation lightness)

  • hue 0-360, saturation 0-100%, lightness 0-100%
  • hsla()


transparent - value, which is used to set absence of color

currentColor - special value, taking color set to "color" property, i.e. color of text

Gradient

Linear Gradient

linear-gradient(side / corner, startColor, ..., stopColor)

  • to bottom / to right / to bottom right - side values (some of them)
  • 180deg - corner value
  • e.g.
  • 45deg, yellow 57%, transparent 57% 67%, yellow 67% - abrupt transition
  • rgba(255, 0, 0, 0), rgba(255, 0, 0, 1) - opacity is used to create fading effect


repeating-linear-gradient() - is used to repeat linear gradients

gradient belongs to the "image" data type. gradient won't work on "background-color" and other properties that use the "color" data type

Radial Gradient

radial-gradient(<shape>? <size>? at <position>?, <startColor>, ..., <stopColor>) - set gradient of ellipse shape

  • e.g. radial-gradient(circle at 75%, #FAFAFA, #FAFAFA 50%, #3A3A3A 75%, #FAFAFA 75%);


shape

  • ellipse - default
  • circle


size - defines the size of an ellipse

  • farthest-corner - default. ellipse expands until touches farthest corner
  • closest-corner
  • farthest-side - ellipse expands until touches farthest horizontal and vertical sides
  • closest-side
  • note: ellipse end point is 100% based on color stop list, despite of stopColor spreading further then 100%
  • 48px - set explicit radius for a circle. single value is not valid for an ellipse shape
  • 60px 40px - set both horizontal and vertical radii for an ellipse
  • 50% 20% - percents are only allowed for ellipse shape


position - position of ellipse

  • center - default
  • top - ellipse center intersects with top edge
  • 10% 12px - horizontal and vertical length to ellipse center from left top corner
  • once position is changed, size is adjusted accordingly, when set with radial extent keyword (like closest-side)
  • gradient positioning is similar to [background-position] values

all gradient size and position values are relative to the viewport, not element

stopColor

  • it also fills the whole background outside gradient. i.e. 100% +


repeating-radial-gradient() - set repeating gradient of ellipse shape

Dark Mode

<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<style>
  /* Regular styles */

  @media (prefers-color-scheme: dark) {
    /* Dark mode styles */
  }
</style>

Theory

Color Model

color model - is an abstract mathematical system used to describe colors with numeric values

RGB - describes color as a combination of red, green, and blue light. this is additive model

  • additive model - it starts from black, and then adds red, green, blue gradually in order to get different colors


CMYK - color model, which is used for printing. it uses cyan, magenta, yellow and black. this is subtractive model

  • subtractive model - it starts from white, and then subtracts ink from it
  • CMYK can’t reproduce bright, especially neon-like, colors of RGB


HSL - describes color in terms of hue, saturation and lightness

  • it is more intuitive for human

Color Space

color space - is organization of colors. it defines:

  • gamut - range of colors
  • white point
  • gamma curve
  • color profile


sRGB - standard for web, monitors, cameras and printers

  • is used by CSS by default
  • it is important as it provides consistent color appearance across different devices
  • it is introduced in 1996 by HP and Microsoft


Adobe RGB - good for print
Display P3 - used by Apple
DCI-P3 - used for digital cinema
Rec.709 - used for television broadcasting
Rec.2020 - used for UHD video