Colors

Color Names

With CSS, colors can be set by using
color names:

Color	Name
	Red
	Yellow
	Cyan
	Blue
	Magenta

If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero. Click on the hexadecimal values, if you want to analyze the color in our color picker.

Red Light	HEX	RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256). Most modern monitors are capable of displaying at least 16384 different colors.

Web Safe Colors?

Many years ago, when computers supported maximum 256 different colors, alist of 216 “Web Safe Colors” was suggested as a Web standard (reserving 40 fixed system colors). This is not important now, since most computers can display millions ofdifferent colors. This 216 hex values cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette:

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

HSL Colors

HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl(hue, saturation, lightness).

Hue

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Hue is just another word for color.

Saturation

Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. aturation is about intensity. Highly saturated colors are bright. Desaturated colors have less pigment.

Lightness

Lightness is also a percentage; 0% is black, 100% is white.

Color Value (Lightness / Darkness)

Color value is a term for how light or dark dark a color is (from white to black)

 

(Hue, Whiteness, Blackness) is a suggested standard for CSS4. HWB is not supported in HTML (yet), but it is suggested as a new standard in CSS4.

CMYK Colors

CMYK colors is a combination of CYAN, MAGENTA, YELLOW , and BLACK. Computer screens display colors using RGB color values. Printers often presents colors using CMYK color values. CMYK is not supported in HTML, but it is suggested as a new standard in CSS4.

 

Hue hue  Hex Rgb Hsl 0  #ff0000 rgb(255, 0, 0) hsl(0, 100%, 50%) 15  #ff4000 rgb(255, 64, 0) hsl(15, 100%, 50%) 30  #ff8000 rgb(255, 128, 0) hsl(30, 100%, 50%) 45  #ffbf00 rgb(255, 191, 0) hsl(45, 100%, 50%) 60  #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%) 75  #bfff00 rgb(191, 255, 0) hsl(75, 100%, 50%) 90  #80ff00 rgb(128, 255, 0) hsl(90, 100%, 50%) 105  #40ff00 rgb(64, 255, 0) hsl(105, 100%, 50%) 120  #00ff00 rgb(0, 255, 0) hsl(120, 100%, 50%) 135  #00ff40 rgb(0, 255, 64) hsl(135, 100%, 50%) 150  #00ff80 rgb(0, 255, 128) hsl(150, 100%, 50%) 165  #00ffbf rgb(0, 255, 191) hsl(165, 100%, 50%) 180  #00ffff rgb(0, 255, 255) hsl(180, 100%, 50%) 195  #00bfff rgb(0, 191, 255) hsl(195, 100%, 50%) 210  #0080ff rgb(0, 128, 255) hsl(210, 100%, 50%) 225  #0040ff rgb(0, 64, 255) hsl(225, 100%, 50%) 240  #0000ff rgb(0, 0, 255) hsl(240, 100%, 50%) 255  #4000ff rgb(64, 0, 255) hsl(255, 100%, 50%) 270  #8000ff rgb(128, 0, 255) hsl(270, 100%, 50%) 285  #bf00ff rgb(191, 0, 255) hsl(285, 100%, 50%) 300  #ff00ff rgb(255, 0, 255) hsl(300, 100%, 50%) 315  #ff00bf rgb(255, 0, 191) hsl(315, 100%, 50%) 330  #ff0080 rgb(255, 0, 128) hsl(330, 100%, 50%) 345  #ff0040 rgb(255, 0, 64) hsl(345, 100%, 50%) 360  #ff0000 rgb(255, 0, 0) hsl(0, 100%, 50%)

Saturation sat  Hex Rgb Hsl 100%  #ff0000 rgb(255, 0, 0) hsl(0, 100%, 50%) 95%  #f90606 rgb(249, 6, 6) hsl(0, 95%, 50%) 90%  #f20d0d rgb(242, 13, 13) hsl(0, 90%, 50%) 85%  #ec1313 rgb(236, 19, 19) hsl(0, 85%, 50%) 80%  #e61919 rgb(230, 25, 25) hsl(0, 80%, 50%) 75%  #df2020 rgb(223, 32, 32) hsl(0, 75%, 50%) 70%  #d92626 rgb(217, 38, 38) hsl(0, 70%, 50%) 65%  #d22d2d rgb(210, 45, 45) hsl(0, 65%, 50%) 60%  #cc3333 rgb(204, 51, 51) hsl(0, 60%, 50%) 55%  #c63939 rgb(198, 57, 57) hsl(0, 55%, 50%) 50%  #bf4040 rgb(191, 64, 64) hsl(0, 50%, 50%) 45%  #b94646 rgb(185, 70, 70) hsl(0, 45%, 50%) 40%  #b34d4d rgb(179, 77, 77) hsl(0, 40%, 50%) 35%  #ac5353 rgb(172, 83, 83) hsl(0, 35%, 50%) 30%  #a65959 rgb(166, 89, 89) hsl(0, 30%, 50%) 25%  #9f6060 rgb(159, 96, 96) hsl(0, 25%, 50%) 20%  #996666 rgb(153, 102, 102) hsl(0, 20%, 50%) 15%  #936c6c rgb(147, 108, 108) hsl(0, 15%, 50%) 10%  #8c7373 rgb(140, 115, 115) hsl(0, 10%, 50%) 5%  #867979 rgb(134, 121, 121) hsl(0, 5%, 50%) 0%  #808080 rgb(128, 128, 128) hsl(0, 0%, 50%)

Lightness light  Hex Rgb Hsl 100%  #ffffff rgb(255, 255, 255) hsl(0, 100%, 100%) 95%  #ffe6e6 rgb(255, 230, 230) hsl(0, 100%, 95%) 90%  #ffcccc rgb(255, 204, 204) hsl(0, 100%, 90%) 85%  #ffb3b3 rgb(255, 179, 179) hsl(0, 100%, 85%) 80%  #ff9999 rgb(255, 153, 153) hsl(0, 100%, 80%) 75%  #ff8080 rgb(255, 128, 128) hsl(0, 100%, 75%) 70%  #ff6666 rgb(255, 102, 102) hsl(0, 100%, 70%) 65%  #ff4d4d rgb(255, 77, 77) hsl(0, 100%, 65%) 60%  #ff3333 rgb(255, 51, 51) hsl(0, 100%, 60%) 55%  #ff1a1a rgb(255, 26, 26) hsl(0, 100%, 55%) 50%  #ff0000 rgb(255, 0, 0) hsl(0, 100%, 50%) 45%  #e60000 rgb(230, 0, 0) hsl(0, 100%, 45%) 40%  #cc0000 rgb(204, 0, 0) hsl(0, 100%, 40%) 35%  #b30000 rgb(179, 0, 0) hsl(0, 100%, 35%) 30%  #990000 rgb(153, 0, 0) hsl(0, 100%, 30%) 25%  #800000 rgb(128, 0, 0) hsl(0, 100%, 25%) 20%  #660000 rgb(102, 0, 0) hsl(0, 100%, 20%) 15%  #4d0000 rgb(77, 0, 0) hsl(0, 100%, 15%) 10%  #330000 rgb(51, 0, 0) hsl(0, 100%, 10%) 5%  #1a0000 rgb(26, 0, 0) hsl(0, 100%, 5%) 0%  #000000 rgb(0, 0, 0) hsl(0, 100%, 0%)

 

Natural Colors (NCol)

Natural colors (NCol) is an initiative from W3Schools. The system is designed to make it easier to select HTML colors. NCol specifies colors using a color letter with a number to specify the distance (in percent) from the color. R30 means 30% away from Red , moving towards Yellow. (In other words: Red with 30% Yellow)

Letter	Color	Hues
R	Red	R R25 R50 R75
Y	Yellow	Y Y25 Y50 Y75
G	Green	G G25 G50 G75
C	Cyan	C C25 C50 C75
B	Blue	B B25 B50 B75
M	Magenta	M M25 M50 M75

 

 

R

Y

G

C

B

M

 

Color and distance can also be given in hues (0-360):

R = 000

Y = 060

G = 120

C = 180

B = 240

M = 300

Colour Theory

We will cover 3 different color systems:

• The color system used when producing colors by light (RGB)
• The color system used when printing (CMY)
• The color system used by artist and painters (RYB)

Printing actually uses a four ink color system. CMYK: Cyan, Magenta, Yellow, and Key (black).

Primary Colors

Primary colors are the main colors in a given color system. Primary colors can not be produced by mixing other colors a color system. The primary colors for light are Red, Green, and Blue:

RGB

Red

Green

Blue

The primary colors for print are Cyan, Magenta, and Yellow:

CMY	Cyan	Magenta	Yellow

The primary colors for paint are Red, Yellow, and Blue:

RYB	Red	Yellow	Blue

Secondary Colors

Secondary colors are made by mixing two primary colors in a color system There are 3 secondary colors in the color systems described here.

Mixing Light (RGB)

Secondary colors are Yellow, Cyan Magenta.

Red	+	Green	=	Yellow
Green	+	Blue	=	Cyan
Blue	+	Red	=	Magenta

Mixing Ink (CMY)

Secondary colors are Blue, Red, Green.

Cyan	+	Magenta	=	Blue
Magenta	+	Yellow	=	Red
Yellow	+	Cyan	=	Green

Note that mixing the primary colors of CMY produces the primary colors of
light (RGB)

Mixing Paint (RYB)

Secondary colors are Orange, Green, Violet.

Red	+	Yellow	=	Orange
Yellow	+	Blue	=	Green
Blue	+	Red	=	Purple

Tertiary Colors

Tertiary colors are made by mixing one primary and one
secondary color in a color system.

There are six named tertiary colors in RYB:

• Red-Orange
• Yellow-Orange
• Yellow-Green
• Blue-Green
• Blue-Purple
• Red-Purple

Color Wheels

A color wheel is an illustrative organization of colors around a circle,
showing the relationships between primary colors, secondary colors, and
tertiary colors.

Three Important Color Wheels

How many ways can you rearrange the rainbow?

 

The RGB Color Wheel

The RGB (Red, Green, Blue) color wheel represents the 3 light sources used to produce colors on a TV or computer screen.

Primary colors are Red, Green, and Blue.

Secondary colors are created by mixing primary colors:

Red and Green= Yellow
Green and Blue = Cyan
Blue and Red = Magenta

The 12 Main Colors of RGB

RED #FF0000 (255,0,0)	#FF8000 (255,128,0)	YELLOW #FFFF00 (255,255,0)	#80FF00 (128,255,0)	GREEN #00FF00 (0,255,0)	#00FF80 (0,255,128)
CYAN #00FFFF (0,255,255)	#0080FF (0,128,255)	BLUE #0000FF (0,0,255)	#8000FF (128,0,255)	MAGENTA #FF00FF (255,0,255)	#FF0080 (255,0,128)

RGB Green is different from the HTML color named
Green.

RGB Green is different
from the HTML color named Green.

The CMY(K) Color Wheel

The 12 Main Colors of CYM:

CYAN #00FFFF (0,255,255)	#0080FF (0,128,255)	BLUE #0000FF (0,0,255)	#8000FF (128,0,255)	MAGENTA #FF00FF (255,0,255)	#FF0080 (255,0,128)
RED #FF0000 (255,0,0)	#FF8000 (255,128,0)	YELLOW #FFFF00 (255,255,0)	#80FF00 (128,255,0)	GREEN #00FF00 (0,255,0)	#00FF80 (0,255,128)

 

The RYB Color Wheel

The tertiary colors are made by mixing two secondary colors.

The 6 tertiary colors are Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Purple, Red-Purple

The 12 Main Colors of RYB:

RED #FE2712	R-O #FC600A	ORANGE #FB9902	Y-O #FCCC1A	YELLOW #FEFE33	Y-G #B2D732
GREEN #66B032	B-G #347C98	BLUE #0247FE	B-P #4424D6	PURPLE #8601AF	R-P #C21460

RYB is the best color wheel to identify the colors that go well together. The RYB wheel can be used to create pleasing color schemes for the web.

Color Palettes

2018 Palettes

HEX: #a2b9bc

HEX: #b2ad7f

HEX: #878f99

HEX: #6b5b95

HEX: #6b5b95

HEX: #feb236

HEX: #d64161

HEX: #ff7b25

2017 Palettes

HEX: #d6cbd3

HEX: #eca1a6

HEX: #bdcebe

HEX: #ada397

HEX: #d5e1df

HEX: #e3eaa7

HEX: #b5e7a0

HEX: #86af49

HEX: #b9936c

HEX: #dac292

HEX: #e6e2d3

HEX: #c4b7a6

HEX: #3e4444

HEX: #82b74b

HEX: #405d27

HEX: #c1946a

2016 Palettes

HEX: #92a8d1

HEX: #034f84

HEX: #f7cac9

HEX: #f7786b

HEX: #deeaee

HEX: #b1cbbb

HEX: #eea29a

HEX: #c94c4c

HEX: #d5f4e6

HEX: #80ced6

HEX: #fefbd8

HEX: #618685

HEX: #ffef96

HEX: #50394c

HEX: #b2b2b2

HEX: #f4e1d2

HEX: #fefbd8

HEX: #618685

HEX: #36486b

HEX: #4040a1

HEX: #b2b2b2

HEX: #f4e1d2

HEX: #f18973

HEX: #bc5a45

2015 Palettes

HEX: #f0f0f0

HEX: #c5d5c5

HEX: #9fa9a3

HEX: #e3e0cc

HEX: #eaece5

HEX: #b2c2bf

HEX: #c0ded9

HEX: #3b3a30

HEX: #e4d1d1

HEX: #b9b0b0

HEX: #d9ecd0

HEX: #77a8a8

HEX: #f0efef

HEX: #ddeedd

HEX: #c2d4dd

HEX: #b0aac0

Rustic Palettes

HEX: #c8c3cc

HEX: #563f46

HEX: #8ca3a3

HEX: #484f4f

HEX: #e0e2e4

HEX: #c6bcb6

HEX: #96897f

HEX: #625750

HEX: #7e4a35

HEX: #cab577

HEX: #dbceb0

HEX: #838060

HEX: #bbab9b

HEX: #8b6f47

HEX: #d4ac6e

HEX: #4f3222

HEX: #686256

HEX: #c1502e

HEX: #587e76

HEX: #a96e5b

HEX: #454140

HEX: #bd5734

HEX: #a79e84

HEX: #7a3b2e

Sky Palettes

HEX: #bccad6

HEX: #8d9db6

HEX: #667292

HEX: #f1e3dd

HEX: #cfe0e8

HEX: #b7d7e8

HEX: #87bdd8

HEX: #daebe8

Sand Palettes

HEX: #fbefcc

HEX: #f9ccac

HEX: #f4a688

HEX: #e0876a

HEX: #fff2df

HEX: #d9ad7c

HEX: #a2836e

HEX: #674d3c

Flower Palettes

HEX: #f9d5e5

HEX: #eeac99

HEX: #e06377

HEX: #c83349

HEX: #5b9aa0

HEX: #d6d4e0

HEX: #b8a9c9

HEX: #622569

Beach Palettes

HEX: #96ceb4

HEX: #ffeead

HEX: #ffcc5c

HEX: #ff6f69

HEX: #588c7e

HEX: #f2e394

HEX: #f2ae72

HEX: #d96459

 

Color Brands

The hex values below are approximate values intended to simulate
branded colors.

Google

HEX: #4285F4

HEX: #FBBC05

HEX: #34A853

HEX: #EA4335

Twitter

HEX: #55ACEE

HEX: #292F33

HEX: #66757F

HEX: #CCD6DD

HEX: #E1E8ED

HEX: #FFFFFF

Facebook

HEX: #3B5998

HEX: #8B9DC3

HEX: #DFE3EE

HEX: #F7F7F7

HEX: #FFFFFF

Microsoft

HEX: #F65314

HEX: #7CBB00

HEX: #00A1F1

HEX: #FFBB00

Intel

HEX: #0F7DC2

Instagram

HEX: #3F729B

IBM

HEX: #006699

Yahoo!

HEX: #7B0099

Amazon

HEX: #FF9900

HEX: #146EB4

Netflix

HEX: #221F1F

HEX: #E50914

HEX: #F5F5F1

Coca-Cola

HEX: #ED1C16

Pepsi

HEX: #E32934

HEX: #004883

IKEA

HEX: #FFCC00

HEX: #003399

Android

HEX: #A4C639

Source: https://www.w3schools.com/colors/