Skip to content
preservelog

Colors and Units

CSS provides several ways to define colors, allowing flexibility in how colors are specified and used in web design.

  1. Hexadecimal (Hex)
  • Uses a six-digit hexadecimal number to represent color.
  • Syntax: #RRGGBB where RR, GG, and BB are two-digit hexadecimal numbers (00 to FF).
  • Example:
{color: #ff5733;} /* Bright orange */
  • Shortened version: #RGB for shorthand notation.
  • Example:
{color: #f53; }/* Equivalent to #ff5533 */
  1. RGB
  • Uses the RGB color model to specify color by indicating the intensity of red, green, and blue light.
  • Syntax: rgb(red, green, blue) where red, green, and blue are integers between 0 and 255.
  • Example:
{color: rgb(255, 87, 51);} /* Bright orange */
  1. RGBA
  • Extends the RGB model to include an alpha channel for opacity.
  • Syntax: rgba(red, green, blue, alpha) where alpha is a number between 0 (completely transparent) and 1 (completely opaque).
  • Example:
{color: rgba(255, 87, 51, 0.5); }/* Semi-transparent bright orange */
  1. HSL
  • Uses the HSL (Hue, Saturation, Lightness) model to specify color.
  • Syntax: hsl(hue, saturation, lightness) where hue is a degree on the color wheel (0 to 360), saturation is a percentage (0% to 100%), and lightness is a percentage (0% to 100%).
  • Example:
{color: hsl(9, 100%, 60%); }/* Bright orange */
  1. HSLA
  • Extends the HSL model to include an alpha channel for opacity.
  • Syntax: hsla(hue, saturation, lightness, alpha) where alpha is a number between 0 and 1.
  • Example:
{color: hsla(9, 100%, 60%, 0.5);} /* Semi-transparent bright orange */

Length Units

Section titled “Length Units”

CSS supports a variety of units to specify lengths and sizes, offering flexibility in design and layout.

  1. Pixels (px)
  • An absolute unit, representing a fixed size.
  • Example:
{width: 100px;}
  1. Em
  • A relative unit, based on the font size of the element.
  • 1em is equal to the current font size.
  • Example:
{padding: 2em; }/* 2 times the font size */
  1. Rem
  • A relative unit, based on the font size of the root element (<html>).
  • Example:
{margin: 1.5rem; }/* 1.5 times the root element's font size */
  1. Percentage (%)
  • A relative unit, based on the size of the parent element.
  • Example:
{width: 50%; }/* 50% of the parent element's width */
  1. Viewport Height (vh)
  • A relative unit, based on 1% of the viewport’s height.
  • Example:
{height: 100vh;} /* Full height of the viewport */
  1. Viewport Width (vw)
  • A relative unit, based on 1% of the viewport’s width.
  • Example:
{width: 100vw; }/* Full width of the viewport */

Other Units

Section titled “Other Units”

CSS also provides other units for specifying various properties, such as angles, time, and resolution.

  1. Degrees (deg)
  • Used for specifying angles.
  • Example:
{transform: rotate(45deg);} /* Rotate element by 45 degrees */
  1. Seconds (s) and Milliseconds (ms)
  • Used for specifying time.
  • Example:
{transition-duration: 2s; /* Transition takes 2 seconds */
animation-delay: 500ms; /* Animation starts after 500 milliseconds */
}
  1. Radians (rad)
  • Another unit for specifying angles, where 1 radian is approximately 57.3 degrees.
  • Example:
{transform: rotate(1rad); /* Rotate element by 1 radian */}
  1. Gradians (grad)
  • A unit for angles, where 1 grad is 1/400 of a full circle.
  • Example:
{transform: rotate(100grad); /* Rotate element by 100 gradians */}
  1. Turns (turn)
  • A unit for angles, where 1 turn equals 360 degrees.
  • Example:
{transform: rotate(0.5turn); /* Rotate element by half a turn (180 degrees) */}
  1. DPI (dots per inch), DPCM (dots per centimeter), DPPX (dots per pixel)
  • Used for specifying resolution.
  • Example:
{image-resolution: 300dpi; /* Set image resolution to 300 dots per inch */}