CSS Colors, Units & Values

What are CSS values?

A CSS declaration combines a property with a value. The value tells the browser what result you want.

h1 {
  color: #0b7cff;
  font-size: 2rem;
  margin-bottom: 16px;
}

Keyword values

Some CSS values are words defined by CSS, such as color names or special keywords.

.message {
  color: navy;
  background-color: transparent;
}

.icon {
  color: currentColor;
}

transparent means fully transparent color. currentColor uses the element's computed color value and can be useful for borders, icons and outlines.

Hex colors

Hexadecimal colors start with # and are commonly written with six hexadecimal digits.

.heading {
  color: #0b1f3a;
}

.button {
  background-color: #0b7cff;
  color: #ffffff;
}

RGB and alpha

RGB expresses a color using red, green and blue channels. An alpha value controls transparency.

.title {
  color: rgb(11, 124, 255);
}

.overlay {
  background-color: rgb(15 23 42 / 0.7);
}

The alpha value 0.7 makes the background partially transparent.

HSL colors

HSL describes color using hue, saturation and lightness. It can feel intuitive when creating lighter or darker variations.

.badge {
  background-color: hsl(212 100% 52%);
}

.badge-soft {
  background-color: hsl(212 100% 95%);
}

Color and readability

Good color choice is not only about appearance. Text and background need enough contrast so content remains readable.

.notice {
  background-color: #eaf3ff;
  color: #0b2a4f;
}

Absolute length: px

px is a CSS pixel unit. It is useful when you need a predictable small dimension such as borders, icon sizes or exact spacing values.

.card {
  border: 1px solid #dbe4ee;
  padding: 20px;
  border-radius: 12px;
}

rem unit

rem is relative to the root element's font size. It is commonly useful for typography and consistent spacing systems.

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

.card {
  padding: 1.5rem;
}

With a 16px root font size, 2rem computes to 32px and 1.5rem computes to 24px.

em unit

em is relative to the relevant font size for the property. For font-size, it relates to the parent's computed font size; for many other properties, it relates to the element's own font size.

.button {
  font-size: 1rem;
  padding: 0.75em 1.25em;
}

Percentage values

Percentages are relative values, but what they are relative to depends on the property.

.content {
  width: 80%;
}

.progress-bar {
  width: 65%;
}

For common width usage, the percentage is based on the containing block's available width.

Viewport units

vw and vh are based on viewport width and height. 1vw is 1% of viewport width, while 1vh is 1% of viewport height.

.hero {
  min-height: 60vh;
}

.hero h1 {
  font-size: 5vw;
}

Other useful relative units

.text-column {
  max-width: 65ch;
}

.square {
  width: 20vmin;
  height: 20vmin;
}

• ch is based on the width of the zero glyph and is useful for readable text line lengths.
• vmin uses the smaller viewport dimension.
• vmax uses the larger viewport dimension.

calc() and clamp()

CSS functions can combine or limit values. calc() performs calculations, while clamp() sets a minimum, preferred and maximum value.

.layout {
  width: calc(100% - 2rem);
}

.hero-title {
  font-size: clamp(2rem, 5vw, 4rem);
}

Unitless values

Not every numeric CSS value needs a unit. Some properties accept or commonly use unitless numbers.

body {
  line-height: 1.6;
}

.card {
  opacity: 0.9;
}

A unitless line-height scales with the element's font size and is often convenient for readable typography.

How to choose a unit

• px: borders, icons, small fixed details and exact values.
• rem: scalable typography and consistent global spacing.
• em: component-relative spacing that should scale with local text.
• %: sizes relative to a containing context.
• vw/vh: viewport-related layout or responsive effects.
• ch: readable text width.
• clamp(): bounded responsive sizing.

Common beginner mistakes

• Zero ke saath unnecessary unit likhna, jaise margin: 0px.
• Har spacing aur font size ko fixed pixels me lock kar dena.
• em nesting se unexpected scaling ignore karna.
• Percentage ka reference context samjhe bina use karna.
• Text aur background me poor contrast rakhna.
• Viewport font sizes ko min/max limit ke bina use karna.
• Color ko hi error/success ka only signal banana.