23
Converting Colors Hex(FFFFFF)
ConvertingColors
Hex(FFFFFF)
Have a look what the booklet forHex(FFFFFF) contains.
Hex(FFFFFF) 3 ............................................................. Conversions 4 ....................................................... Details 6 ................................................................ Harmonies 10 ........................................................ Previews 12 ........................................................... Color Blindness Simulation 15 ........................... CSS Examples 18 ..................................................
Color
Hex(FFFFFF)
5-10-2020 4/23 convertingcolors.com
Conversions
Conversions Part 1
Format Color
Hex FFFFFF
RGB 255, 255, 255
RGB Percent 100%, 100%, 100%
CMY 0.0000, 0.0000, 0.0000
CMYK 0.00, 0.00, 0.00, 0.00
HSL 0°, 0%, 100%
HSV 0°, 0%, 100%
XYZ 95.0500, 100.0000, 108.9000
5-10-2020 5/23 convertingcolors.com
Conversions
Conversions Part 2
Format Color
RYB 255, 255, 255
Decimal 16777215
CIELab 100.00, 0.01, -0.01
CIELCh 100, 0.012, 296.813
Yxy 100.0000, 0.3127,0.3290
Android(android.graphics.Color)
4294967295(0xFFFFFFFF)
YUV 255.0000, 0.0000,0.0000
5-10-2020 6/23 convertingcolors.com
Details
The Hex color FFFFFF is a light color, and thewebsafe version is hex FFFFFF, and the color nameis white. A complement of this color would beFFFFFF, and the grayscale version is FFFFFF.
A 20% lighter version of the original color isFFFFFF, and C6C6C6 is the 20% darker color. Ifyou saturate the color by 10%, you get FFE6E6,and if you desaturate by 10%, it is FFFFFF.
5-10-2020 7/23 convertingcolors.com
Distribution
RGB
Red (100%)
Green (100%)
Blue (100%)
RYB
Red (100%)
Yellow (100%)
Blue (100%)
CMYK
Cyan (0%)
Magenta (0%)
Yellow (0%)
Black (0%)
CMY
Cyan (0%)
Magenta (0%)
Yellow (0%)
5-10-2020 8/23 convertingcolors.com
Brightness & SaturationGradients
These gradients show how the Hex color FFFFFFchanges by changing the brightness by 10 percent. Thefirst figure shows a shift by +10% for each color and thesecond figure -10%.
Similar to the brightness gradients but the followingsaturation gradients show a change of the Hex colorFFFFFF by changing the saturation by 10% instead.
5-10-2020 9/23 convertingcolors.com
FFFFFF
E2E2E2
C6C6C6
ABABAB
919191
777777
5E5E5E
474747
303030
1B1B1B
FFFFFF
FFE6E6
FFCCCC
FFB3B3
FF9999
FF8080
FF6666
FF4D4D
FF3333
FF1919
5-10-2020 10/23 convertingcolors.com
Harmonies
5-10-2020 11/23 convertingcolors.com
SweetspotThe sweet spot groups the original color and fivecomplimentary colors.
FFFFFF
808080
000000
5-10-2020 12/23 convertingcolors.com
Previews
White Background
This preview shows how the Hex color FFFFFF looks on awhite background.
Color Contrast Check
Large Text (above 18pt) WCAG AA ✕ FailAny Text WCAG AA ✕ FailLarge Text (above 18pt) WCAG AAA ✕ FailAny Text WCAG AAA ✕ Fail
5-10-2020 13/23 convertingcolors.com
Black Background
This preview shows how the Hex color FFFFFF looks on ablack background.
Color Contrast Check
Large Text (above 18pt) WCAG AA ✓ PassAny Text WCAG AA ✓ PassLarge Text (above 18pt) WCAG AAA ✓ PassAny Text WCAG AAA ✓ Pass
If you want to check with other color combinations, trythe Color Contrast Checker.
5-10-2020 14/23 convertingcolors.com
Hex FFFFFF Background
This preview shows how black text looks on abackground with the Hex color FFFFFF.
This preview shows how white text looks on abackground with the Hex color FFFFFF.
5-10-2020 15/23 convertingcolors.com
Color BlindnessSimulation
Color vision deficiency is a very complex topic, and Icould not describe the different causes any better thanWikipedia does, so if you want to learn more, youshould check out their article about color blindness.
Dichromacy
Original ColorFFFFFF
ProtanopiaFFFFFF
DeuteranopiaFFFFFF
5-10-2020 16/23 convertingcolors.com
TritanopiaFFFFFF
5-10-2020 17/23 convertingcolors.com
Trichromacy
Original ColorFFFFFF
ProtanomalyFFFFFF
DeuteranomalyFFFFFF
TritanomalyFFFFFF
Monochromacy
Original ColorFFFFFF
AchromatopsiaFFFFFF
AchromatomalyFFFFFF
5-10-2020 18/23 convertingcolors.com
CSS Examples
Text
The CSS property to change the color of the text to HexFFFFFF is called "color". The color property can be seton classes, ids or directly on the HTML element.
This example shows how text in the color #FFFFFF lookslike.
.text, #text, p{ color:#FFFFFF}
5-10-2020 19/23 convertingcolors.com
If you want to add a text shadow in that color use thetext-shadow property, you can generate a text shadowdirectly with our CSS Text Shadow Generator.
Here you see how black text with a 4 pixel #FFFFFFHere you see how black text with a 4 pixel #FFFFFF
colored shadow looks like.colored shadow looks like.
.shadow{ text-shadow: 4px 4px 2px #FFFFFF}
Border
The CSS property to change the border of an element toHex FFFFFF is called "border". The border property canbe set on classes, ids or directly on the HTML element.
This example shows the color as border, it can beapplied via the CSS property "border" or "border-color".
.border, #border, table{ border:4px solid#FFFFFF }
5-10-2020 20/23 convertingcolors.com
If only the border color should be changed use theproperty border-color.
.border{ border-color:#FFFFFF }
If you want to add a box shadow in that color use:
Here you see how a box with a 4 pixel #FFFFFF coloredshadow looks like.
.boxshadow{ -moz-box-shadow:4px 4px 4px4px #FFFFFF; -webkit-box-shadow:4px 4px4px 4px #FFFFFF; box-shadow:4px 4px 4px4px #FFFFFF }
5-10-2020 21/23 convertingcolors.com
Background
The CSS property to change the background color of anelement to Hex FFFFFF is called "background". Thebackground property can be set on classes, ids ordirectly on the HTML element.
.background, #background, body{background:#FFFFFF }
If only the background color should be changed can beused:
.background{ background-color:#FFFFFF }
This example shows the color as background, it isapplied via the CSS property "background".
To optimize and compress your CSS code, you can useour online CSS compressor and optimizer based oncsstidy. If you want to create a linear or radial gradientas background or border, check our CSS GradientGenerator.
Hey! You found this bookletinteresting? Have a look at my otherbooklet HOWCOLORS.WORK – A CSScolor notation guide.
HOWCOLORS.WORKA CSS color notation guide.Are you new to web developmentand want to know the differentways to express colors in CSS?Then this booklet is for you!
HOWCOLORS.WORK will helpyou understand the syntax ofthe color notations in CSS.You will learn all the current andnew ways to express colors toprepare yourself for the future!
Buy now, starting at $4.99!
Follow meon Twitter!
@ConvertingColor
