~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/css/6css-colors

# CSS Colors & Backgrounds

Colors and backgrounds make your designs visually appealing. CSS provides multiple color formats and powerful background options.

## Color Formats

### Named Colors

```css
color: red;
color: blue;
color: green;
```

**140 named colors** — easy to remember but limited.

### Hexadecimal

```css
color: #ff0000;      /* Full 6-digit hex */
color: #f00;         /* Shorthand (3-digit) */
color: #ff000080;    /* With alpha (8-digit) */
```

### RGB

```css
color: rgb(255, 0, 0);         /* Red */
color: rgb(0, 255, 0);         /* Green */
color: rgb(0, 0, 255);         /* Blue */
```

### RGBA (with transparency)

```css
color: rgba(255, 0, 0, 0.5);   /* 50% transparent red */
color: rgba(0, 0, 0, 0.8);     /* 80% opaque black */
```

### HSL (Hue, Saturation, Lightness)

```css
color: hsl(0, 100%, 50%);      /* Red */
color: hsl(120, 100%, 50%);    /* Green */
color: hsl(240, 100%, 50%);    /* Blue */
```

### HSLA (with transparency)

```css
color: hsla(0, 100%, 50%, 0.5); /* 50% transparent red */
```

## Background Properties

### Background Color

```css
background-color: #3498db;
background-color: rgba(52, 152, 219, 0.8);
```

### Background Image

```css
background-image: url('image.jpg');
background-image: url('pattern.png');
```

### Background Repeat

```css
background-repeat: repeat;           /* Repeat both (default) */
background-repeat: repeat-x;         /* Repeat horizontally */
background-repeat: repeat-y;         /* Repeat vertically */
background-repeat: no-repeat;        /* No repeat */
background-repeat: space;            /* Even spacing */
background-repeat: round;            /* Fill container */
```

### Background Position

```css
background-position: center;         /* Center */
background-position: top right;      /* Top right */
background-position: 50% 50%;        /* Center (percentage) */
background-position: 20px 40px;      /* Fixed position */
```

### Background Size

```css
background-size: auto;               /* Original size (default) */
background-size: cover;              /* Fill container */
background-size: contain;            /* Fit inside container */
background-size: 100px 200px;        /* Custom size */
background-size: 50% auto;           /* Percentage */
```

### Background Attachment

```css
background-attachment: scroll;       /* Scroll with page (default) */
background-attachment: fixed;        /* Fixed in viewport */
background-attachment: local;        /* Scroll with content */
```

### Background Clip

```css
background-clip: border-box;         /* Extends to border (default) */
background-clip: padding-box;        /* Extends to padding */
background-clip: content-box;        /* Content only */
background-clip: text;               /* Clips to text */
```

### Background Origin

```css
background-origin: padding-box;      /* Starts at padding (default) */
background-origin: border-box;       /* Starts at border */
background-origin: content-box;      /* Starts at content */
```

## Shorthand

```css
/* background: color image repeat position size */
background: #3498db url('image.jpg') no-repeat center/cover;

/* Multiple backgrounds */
background:
  url('pattern.png') repeat,
  linear-gradient(to bottom, #fff, #eee),
  #333;
```

## Gradients

### Linear Gradient

```css
/* Top to bottom (default) */
background: linear-gradient(blue, green);

/* Left to right */
background: linear-gradient(to right, blue, green);

/* Diagonal */
background: linear-gradient(to bottom right, blue, green);

/* Custom angle */
background: linear-gradient(45deg, blue, green);

/* Multiple stops */
background: linear-gradient(to right, red, orange, yellow, green, blue);
```

### Radial Gradient

```css
/* Center (default) */
background: radial-gradient(circle, blue, green);

/* Ellipse */
background: radial-gradient(ellipse, blue, green);

/* Custom position */
background: radial-gradient(circle at top left, blue, green);
```

### Conic Gradient

```css
/* Color wheel */
background: conic-gradient(red, orange, yellow, green, blue, purple, red);

/* Pie chart */
background: conic-gradient(#3498db 0% 50%, #2ecc71 50% 100%);
border-radius: 50%;
```

## Transparency

### Opacity

```css
.element {
  opacity: 1;    /* Fully visible (default) */
  opacity: 0.5;  /* 50% transparent */
  opacity: 0;    /* Fully transparent */
}
```

**Note:** Opacity affects the entire element and its children.

### RGBA vs Opacity

```css
/* RGBA: Only background is transparent */
.background {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;  /* Text remains opaque */
}

/* Opacity: Everything is transparent */
.element {
  opacity: 0.5;
  color: white;  /* Text becomes transparent too */
}
```

## Complete Example

```css
.hero {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)),
    url('hero.jpg') center/cover no-repeat;
  color: white;
  padding: 100px 20px;
  text-align: center;
}

.card {
  background: white;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background-color: #f5f5f5;
}

.button {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4);
}

.overlay {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
```

## Best Practices

1. **Use HSL** — Easier to adjust colors
2. **Use RGBA for transparency** — More control than opacity
3. **Use cover for backgrounds** — Fills container properly
4. **Use gradients sparingly** — Can be distracting
5. **Test contrast** — Ensure readability

## Common Mistakes

1. **Using opacity instead of RGBA** — Affects children
2. **Not providing fallback color** — For older browsers
3. **Overusing gradients** — Can look unprofessional
4. **Ignoring contrast** — Text must be readable
5. **Using too many colors** — Stick to a palette

No changes yet

cancel