15- Learn CSS Fundamentals / Color

IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Color

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
NAMED COLORS
With this code all paragraphs are shown in green.
The color property sets the foreground color of an element's text content, and its decorations.
p { color: green }

HEX
COLORS
NAMED 
COLORS
HSL/HSLA
COLORS
RGB/RGBA
COLORS

NAMED COLORS
Pink Hex RGB
Red Hex RGB
Orange Hex RGB
Yellow Hex RGB
White Hex RGB Gray & black Hex RGB Green Hex RGB

NAMED COLORS
Blue Hex RGB Purple Hex RGBCyan Hex RGB Brown Hex RGB

HTML CSS
Browser
NAMED COLORS
<body>
CSS rocks!
</body>
p { color: red; }
Web page title
index.html
CSS rocks!

HEX COLORS
p { color: #000000 }
Red Green Blue

HEX COLORS
#
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
RED GREEN BLUE

HEX COLORS
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
#
RED
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
GREEN
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
BLUE
= #ff0000

HEX COLORS
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
#
RED
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
GREEN
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
BLUE
= #00ff00

HEX COLORS
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
#
RED
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
GREEN
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
BLUE
= #0000ff

HEX COLORS
#000000
#000
#ffffff
#fff
#ff0000
#f00
#00ff00
#0f0
#0000ff
#00f

HTML CSS
Browser
HEX COLORS
<body>
CSS rocks!
</body>
p { color: #f00; }
Web page title
index.html
CSS rocks!

GAME: GUESS THE COLOR

RGB / RGBA COLORS
p { color: rgb(0,0,255) }
Red Green Blue
255
0
255
0
255
0
With this code all paragraphs are shown in blue.

RGB / RGBA COLORS
rgb(0,0,0)
rgb(255,255,255)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)

HTML CSS
Browser
RGB / RGBA COLORS
<body>
CSS rocks!
</body>
p { color: rgb(0,0,255) }
Web page title
index.html
CSS rocks!

RGB / RGBA COLORS
p { color: rgba(0,0,255,0.5) }
Alpha 
(transparency)
1
0
With this code all paragraphs are shown in blue with 50% transparency.

HTML CSS
Browser
RGB / RGBA COLORS
<body>
CSS rocks!
</body>
p { color: rgba(0,0,255,0.5) }
Web page title
index.html
CSS rocks!

HSL/HSLA COLORS
p { color: hsl(240,100%,50%) }
Hue Saturation Lightness
0 360

HSL/HSLA COLORS
hsl(0,0%,0%)
hsl(0,0%,100%)
hsl(0,100%,50%)
hsl(120,100%,50%)
hsl(240,100%,50%)

HTML CSS
Browser
HSL/HSLA COLORS
<body>
CSS rocks!
</body>
p { color: hsl(240,100%,50%) }
Web page title
index.html
CSS rocks!

HSL/HSLA COLORS
p { color: hsla(240,100%,50%,0.5) }
Alpha 
(transparency)
1
0
With this code all paragraphs are shown in blue with 50% transparency.

HTML CSS
Browser
HSL/HSLA COLORS
<body>
CSS rocks!
</body>
p { color: hsla(240,100%,50%,0.5) }
Web page title
index.html
CSS rocks!

TOOLS: CSS PEEPER
Inspect a color palette used on a website.

TOOLS: COLOR CONVERTER

TOOLS: IMPALETTE
Find the most dominant color in an image

TOOLS: MATERIAL DESIGN PALETTE

TOOLS: BRANDS IN COLOURS

TOOLS: BRANDCOLORS

inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES

We respect your time 
No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use code 
Real code you can just copy and paste into
your real projects.
Step by step guides 
Clear and concise steps to build real use
solutions. No missed points.
inarocket.com

15- Learn CSS Fundamentals / Color

More Related Content

Similar to 15- Learn CSS Fundamentals / Color (20)

More from In a Rocket (10)

Recently uploaded (20)

15- Learn CSS Fundamentals / Color