Skip to content
preservelog

Colors and Units

  1. Colors and Units
  • Color values (hex, RGB, RGBA, HSL, HSLA)
  • Length units (px, em, rem, %, vh, vw)
  • Other units (deg, s, etc.)

Colors and Units in CSS

Section titled “Colors and Units in CSS”

Color Values

Section titled “Color Values”

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 */}

By understanding and utilizing these various color values and units, you can create precise and adaptable styles in your CSS, enhancing the visual presentation and responsiveness of your web designs.