ByteForByte
Docs
CSS Docs

CSS Colors

A complete guide to using colors in CSS, covering different color formats, transparency, gradients, and variables.

This guide explains the various ways to define and manage colors in CSS, including advanced techniques like gradients and variables.

🎨 What are CSS Colors?

CSS Colors allow you to set the visual appearance of elements by applying different color values to text, backgrounds, borders, and more. CSS supports multiple color formats to give you flexibility and control.

🌈 Types of Colors in CSS

Predefined color names like red, blue, green, etc.

export default function App() {
  return <h1>Hello world</h1>
}
Open on CodeSandboxOpen Sandbox

Defined using hexadecimal values.

export default function App() {
  return <h1>Hello world</h1>
}
Open on CodeSandboxOpen Sandbox

RGB stands for Red, Green, Blue. RGBA adds an alpha (transparency) channel.

export default function App() {
  return <h1>Hello world</h1>
}
Open on CodeSandboxOpen Sandbox

HSL stands for Hue, Saturation, Lightness. HSLA adds transparency.

export default function App() {
  return <h1>Hello world</h1>
}
Open on CodeSandboxOpen Sandbox

🌟 Color Transparency

CSS supports transparency in colors through RGBA, HSLA, and the opacity property.

export default function App() {
  return <h1>Hello world</h1>
}
Open on CodeSandboxOpen Sandbox

🌈 Gradients in CSS

Gradients create smooth transitions between two or more colors.

export default function App() {
  return <h1>Hello world</h1>
}
Open on CodeSandboxOpen Sandbox

⚡ CSS Variables for Colors

CSS Variables (also known as custom properties) allow you to store color values and reuse them throughout your stylesheet.

export default function App() {
  return <h1>Hello world</h1>
}
Open on CodeSandboxOpen Sandbox

🧪 Try Yourself

export default function App() {
  return <h1>Hello world</h1>
}
Open on CodeSandboxOpen Sandbox
Edit on GitHub

Previous

CSS Selectors

Next

CSS Text Styling

On this page