CSS Colors

CSS CODES & EXAMPLES

CSS Colors

Learn how to use colors in CSS with practical examples. Understand color names, HEX, RGB, RGBA, HSL, HSLA, opacity, gradients, text colors and background colors.

← CSS Selectors Start Learning →

What are CSS Colors?

Adding color to HTML elements

CSS colors are used to define the visual appearance of HTML elements. You can change text color, background color, border color and many other visual properties using CSS.

Common CSS color formats:Color Name HEX RGB RGBA HSL HSLA

Color Names

Use predefined CSS color names

CSS supports many predefined color names such as red, blue, green, orange, purple and black.

color-name.css

h1 {
  color: blue;
}

p {
  color: green;
}

.warning {
  color: red;
}

Blue Heading

Green paragraph text.

Red warning text.

HEX Colors

Six-digit hexadecimal color values

HEX colors use hexadecimal values beginning with the # symbol.

hex.css

h1 {
  color: #1769d5;
}

.card {
  background-color: #f3f8ff;
}

.button {
  background-color: #0d4e9f;
}

#1769D5 Blue

#0D4E9F Dark Blue

#22A06B Green

#F59E0B Orange

RGB Colors

Red, Green and Blue values

RGB stands for Red, Green and Blue. Each value normally ranges from 0 to 255.

rgb.css

.red {
  color: rgb(255, 0, 0);
}

.green {
  color: rgb(0, 128, 0);
}

.blue {
  color: rgb(0, 0, 255);
}

RGBA Colors

RGB with transparency

RGBA adds an Alpha value to RGB. The alpha value controls transparency from 0 to 1.

rgba.css

.box {
  background-color:
    rgba(23, 105, 213, 0.5);
}

.overlay {
  background:
    rgba(0, 0, 0, 0.6);
}

50% Transparent Blue

HSL Colors

Hue, Saturation and Lightness

HSL represents a color using Hue, Saturation and Lightness.

hsl.css

.blue {
  color: hsl(215, 81%, 47%);
}

.green {
  color: hsl(150, 70%, 40%);
}

.orange {
  color: hsl(35, 90%, 50%);
}

HSLA Colors

HSL with transparency

hsla.css

.overlay {
  background:
    hsla(215, 81%, 47%, 0.6);
}

Text Color

Change the color of text

text-color.css

body {
  color: #172337;
}

h1 {
  color: #1769d5;
}

.description {
  color: #66758a;
}

CSS Colors

Different text colors improve readability and visual hierarchy.

Background Color

Change the background of elements

background-color.css

body {
  background-color: #f4f8fc;
}

.card {
  background-color: white;
}

.header {
  background-color: #1769d5;
}

Blue Background

Light Background

Border Color

Change the color of borders

border-color.css

.card {
  border: 2px solid #1769d5;
}

.warning {
  border: 2px solid #e11d48;
}

Blue Border

Red Border

Opacity

Control element transparency

The opacity property accepts values from 0 to 1. A value of 1 is completely visible, while 0 is fully transparent.

opacity.css

.normal {
  opacity: 1;
}

.transparent {
  opacity: 0.5;
}

.hidden {
  opacity: 0;
}

100%

50%

20%

Linear Gradient

Create smooth color transitions

linear-gradient.css

.hero {
  background:
    linear-gradient(
      135deg,
      #071a31,
      #1769d5
    );
}

Linear Gradient

Radial Gradient

Create circular color transitions

radial-gradient.css

.circle {
  background:
    radial-gradient(
      circle,
      #1769d5,
      #071a31
    );
}

Radial Gradient

Multiple Colors

Use several colors in one gradient

multiple-colors.css

.banner {
  background:
    linear-gradient(
      90deg,
      #1769d5,
      #22a06b,
      #f59e0b
    );
}

Multiple Colors

CSS Color Variables

Store colors for reusable styling

variables.css

:root {
  --primary: #1769d5;
  --dark: #071a31;
  --light: #f3f8ff;
  --text: #172337;
}

button {
  background: var(--primary);
  color: white;
}

.card {
  background: var(--light);
}

Modern Color Function

Using color-mix()

Modern CSS also provides the color-mix() function for mixing colors.

color-mix.css

.box {
  background:
    color-mix(
      in srgb,
      #1769d5 70%,
      white
    );
}

Professional Color Palette

Example education website palette

Dark Navy#071A31

Primary Blue#1769D5

Success Green#22A06B

Accent Orange#F59E0B

Light Blue#F3F8FF

CSS Colors Live Preview

Interactive color demonstration

LIVE PREVIEW

CSS Color Quick Reference

Common color formats

Format	Example	Use
Color Name	`blue`	Predefined color
HEX	`#1769d5`	Hexadecimal color
RGB	`rgb(23,105,213)`	Red, Green, Blue
RGBA	`rgba(23,105,213,.5)`	RGB + transparency
HSL	`hsl(215,81%,47%)`	Hue, Saturation, Lightness
HSLA	`hsla(215,81%,47%,.5)`	HSL + transparency
Gradient	`linear-gradient()`	Color transition