CSS Color: #FFFFFF

This page is all about the CSS color #FFFFFF. It incorporates #FFFFFF into various HTML elements to test how it looks.

Click on the color pickers to see how #FFFFFF looks against a secondary color. Also use the chart near the bottom to choose a color other than #FFFFFF. And don't forget to check out these #FFFFFF code examples in the online editor.

Foreground Color

Here are examples of using #FFFFFF for the foreground color (eg, color:#FFFFFF or border-color:#FFFFFF, etc).

Headings

Heading 1 in #FFFFFF.

Heading 2 in #FFFFFF.

Heading 2 in #FFFFFF.

Heading 2 in #FFFFFF.

Heading 2 in #FFFFFF.
Heading 2 in #FFFFFF.

You can also add your own text by typing over the top of the text.

Borders

Solid border, 1px
Dotted border, 1px
Dashed border, 1px
Solid border, 3px
Dotted border, 3px
Dashed border, 3px

Text Size

The font size of this text is 6px.

The font size of this text is 8px.

The font size of this text is 12px.

The font size of this text is 24px.

The font size of this text is 36px.

The font size of this text is 48px.

With a Text Shadow

The font size of this text is 6px.

The font size of this text is 8px.

The font size of this text is 12px.

The font size of this text is 24px.

The font size of this text is 36px.

The font size of this text is 48px.

Background Color

Here's how #FFFFFF looks when it's used as a background color.

You can use either background-color:#FFFFFF or background:#FFFFFF to achieve this effect.

Change the text color to see how the background looks with different text colors.

Try changing the color of this text to see how it looks with the #FFFFFF background color.

You can also add your own text by typing over the top of this text.


Here's some extra text written in a smaller font size (12px).

You can add more text over the top of this to see how it looks at the smaller size.


This text is in White.

You can also add your own text by typing over the top of this text.

This text is in LightGrey.

You can also add your own text by typing over the top of this text.

This text is in Black.

You can also add your own text by typing over the top of this text.

Gradients

Linear

This box has a linear gradient going from White to #FFFFFF.

You can also add your own text by typing over the top of this text.

This box has a linear gradient going from Black to #FFFFFF.

You can also add your own text by typing over the top of this text.

Radial

This box has a radial gradient going from White to #FFFFFF.

You can also add your own text by typing over the top of this text.

This box has a radial gradient going from Black to #FFFFFF.

You can also add your own text by typing over the top of this text.

If you want the code for these gradients or others, see CSS Gradients.

Pattern

Pattern made from a gradient between White and #FFFFFF.

If you want the code for this pattern or other similar patterns, see CSS Patterns.

Color Chart

You can change the selected color using the chart below.

#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00
#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00
#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900
#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600
#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300
#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000
#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00
#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00
#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900
#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600
#CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300
#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000
#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00
#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00
#9999FF #9999CC #999999 #999966 #999933 #999900
#9966FF #9966CC #996699 #996666 #996633 #996600
#9933FF #9933CC #993399 #993366 #993333 #993300
#9900FF #9900CC #990099 #990066 #990033 #990000
#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00
#66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00
#6699FF #6699CC #669999 #669966 #669933 #669900
#6666FF #6666CC #666699 #666666 #666633 #666600
#6633FF #6633CC #663399 #663366 #663333 #663300
#6600FF #6600CC #660099 #660066 #660033 #660000
#33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00
#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00
#3399FF #3399CC #339999 #339966 #339933 #339900
#3366FF #3366CC #336699 #336666 #336633 #336600
#3333FF #3333CC #333399 #333366 #333333 #333300
#3300FF #3300CC #330099 #330066 #330033 #330000
#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00
#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00
#0099FF #0099CC #009999 #009966 #009933 #009900
#0066FF #0066CC #006699 #006666 #006633 #006600
#0033FF #0033CC #003399 #003366 #003333 #003300
#0000FF #0000CC #000099 #000066 #000033 #000000

How to use this Color

Check out some basic code examples for #FFFFFF in the online Scratchpad editor.

Also, below are quick code examples of using CSS to apply this color to various HTML elements.

Text/Foreground Color

Background Color

You can also use it with the background shorthand property, like this:

Border Color

You can also use it with the border shorthand property, like this:

In these examples, .myExample is simply a made up class name. Just replace that name with your own class name or element name as required.

For example, to apply the style to say, all instances of the h1 element, replace .myExample with h1. Like this: