🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

REFERENCEcss

css Documentation

📖 INDEX

# Align-content

# Animation-delay

# Animation-duration

# Animation-timing-function

# Background-color

# Background-image

# Background-position

# Background-repeat

# Background-size

# Basic-Selectors

# Child-Selectors

# Class-Selectors

# CSS-Attribute-Selectors

# Descendant-Selectors

# Flex-direction

# Grid-template-areas

# Grid-template-columns

# Grid-template-rows

# Include-Css-in-Html

# Justify-content

# Justify-items

# Letter-spacing

# Media-queries

# Pointer-events

# RefDeviceCharacteristics

# RefDimensions

# RefScreenDimensions

# Siblings-Selectors

# Text-transform

# Top, Right, Bottom, Left

# Transition-delay

# Transition-duration

# Transition-timing-function

# Universal-Selectors

# Including-Css-in-Html

LOADING ENGINE...

CSS Colors

Bring your website to life. Learn Hex, RGB, HSL, and named colors.

style.css

body {

background-color: #1a1a1a;

color: rgb(255, 255, 255);

}

/* Result: Dark Mode */

🎨

style.css

1 / 8

🎨

Tutor:CSS Colors can be defined in multiple ways. The simplest is using named keywords. Let's start with a basic `color` property.

⭐ 0 EXP

Color Mastery

Unlock nodes by learning keywords, hex codes, and functions.

Concept 1: Color Keywords

CSS provides 140+ named colors like red, cornflowerblue, and tomato. The color property sets the foreground (text) color.

System Check

Which property is used to change the text color?

background-colorcolortext-colorfont-color

Community Palette

Share Your Schemes

Created an awesome color palette? Share your CSS variables and hex codes.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Colors

Pascual Vila

Frontend Instructor.

The color property defines the foreground color of text content. However, colors in CSS are used everywhere: backgrounds, borders, shadows, and gradients.

Color Formats

CSS supports multiple formats to define colors:

Keywords: Predefined names like red, blue, transparent.
Hexadecimal: A 6-digit code starting with #, e.g., #ff0000.
RGB: Functional notation defining Red, Green, and Blue channels, e.g., rgb(255, 0, 0).
HSL: Hue, Saturation, Lightness. Intuitive for design, e.g., hsl(0, 100%, 50%).

Transparency

Modern CSS allows transparency via the Alpha channel. You can use rgba(), hsla(), or the 8-digit hex code (e.g., #ff000080 for 50% opacity).

Accessibility

When choosing colors, ensure sufficient contrast between the text and background. Tools like the WCAG contrast checker help verify that your content is readable for everyone.

Color Glossary

RGB (Red, Green, Blue): An additive color model where red, green, and blue light are added together to create a broad array of colors.
Hexadecimal (Hex): A base-16 representation of color. It uses the digits 0-9 and letters A-F.
HSL (Hue, Saturation, Lightness): A cylindrical-coordinate representation of points in an RGB color model. Hue is degrees on the color wheel.
Alpha Channel: Defines the opacity of a color. A value of 0 is fully transparent, while 1 is fully opaque.