 Menu  Log in

Dark mode
Dark code
  HTML   

CSS HEX Colors

‹ Previous Next ›

A hexadecimal color is specified with:

#RRGGBB, where the RR (red), GG (green) and
BB (blue) hexadecimal integers specify the
components of the color.

HEX Value
In CSS, a color can be specified using a
hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are

hexadecimal values between 00 and ff (same as
decimal 0-255).

For example, #ff0000 is displayed as red, because

red is set to its highest value (ff) and the others are
set to the lowest value (00).

To display black, set all values to 00, like this:

#000000.

To display white, set all values to ff, like this: #ffffff.

Experiment by mixing the HEX values below:

#ff6347

RED

ff

GREEN

63

BLUE

47

Example

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

Try it Yourself »

Shades of gray are often defined using equal values

for all the 3 light sources:

Example

#3c3c3c

#616161

#787878

#b4b4b4

#f0f0f0

#f9f9f9

Try it Yourself »

3 Digit HEX Value

Sometimes you will see a 3-digit hex code in the
CSS source.

The 3-digit hex code is a shorthand for some 6-digit

hex codes.

The 3-digit hex code has the following form:

#rgb

Where r, g, and b represent the red, green, and

blue components with values between 0 and f.

The 3-digit hex code can only be used when both

the values (RR, GG, and BB) are the same for each
component. So, if we have #ff00cc, it can be
written like this: #f0c.

Here is an example:

Example

body {
background-color: #fc9; /* same as
#ffcc99 */
}

h1 {
color: #f0f; /* same as #ff00ff */
}

p {
color: #b58; /* same as #bb5588 */
}

Try it Yourself »

‹ Previous Next ›

NEW

We just launched
W3Schools videos

Explore now

COLOR PICKER



Get certified
by completing
a CSS
course today!

school
w3 s
2
CE

02

TI 2
R

FI
ED .

Get started

CODE GAME

Play Game

Report Error

Spaces

Pro

Buy Certificate

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples

Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate

FORUM | ABOUT

W3Schools is optimized for learning and training. Examples

might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed
to avoid errors, but we cannot warrant full correctness of all
content. While using W3Schools, you agree to have read
and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2022 by Refsnes Data. All Rights Reserved.

W3Schools is Powered by W3.CSS.