Learn CSS fundamentals really fast, online and free.
FULL COURSE: http://inarocket.com
Learn front end development fast, step-by-step and with ready-to-use code.
IN THIS MODULE YOU'LL LEARN:
- How to use the color property to set the foreground color of an element's text content, and its decorations.
- Methods to apply colors in CSS: named colors, HEX, RGB/RGBA and HSL/HSLA.
- Color tools: CSS Peeper, color converter, material design palette, etc.
READY-TO-USE CODE:
https://inarocket.com/courses/css/css-fundamentals/color.php
REFERENCES:
- The color CSS property by MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/color
- Game: What the Hex? http://yizzle.com/whatthehex/
- CSS Peeper: Inspect styles in a simple and well-organized way. https://csspeeper.com/
- RapidTables Color Conversion. https://www.rapidtables.com/convert/color/index.html
- Impalette: Scan images for dominant pantone colors. https://www.impalette.com/
- Material Design Palette. https://www.materialpalette.com/
- Brands in colours: Brands colour reference. https://loriskumo.github.io/Brands-In-Colours/
- BrandColors: Collection of official brand color codes. https://brandcolors.net/
BEST BOOKS TO LEARN CSS:
- CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT
- HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i
- CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf
- CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh
GDG Cloud Southlake 32: Kyle Hettinger: Demystifying the Dark Web
Learn CSS color fundamentals at rocket speed
1. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Color
2. 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 }
3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HEX
COLORS
NAMED
COLORS
HSL/HSLA
COLORS
RGB/RGBA
COLORS
4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
NAMED COLORS
Pink Hex RGB
Red Hex RGB
Orange Hex RGB
Yellow Hex RGB
White Hex RGB Gray & black Hex RGB Green Hex RGB
5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
NAMED COLORS
Blue Hex RGB Purple Hex RGBCyan Hex RGB Brown Hex RGB
6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
NAMED COLORS
<body>
<p>CSS rocks!</p>
</body>
p { color: red; }
Web page title
index.html
CSS rocks!
7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HEX
COLORS
NAMED
COLORS
HSL/HSLA
COLORS
RGB/RGBA
COLORS
8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HEX COLORS
p { color: #000000 }
Red Green Blue
9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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
10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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
11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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
12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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
13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HEX COLORS
#000000
#000
#ffffff
#fff
#ff0000
#f00
#00ff00
#0f0
#0000ff
#00f
14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
HEX COLORS
<body>
<p>CSS rocks!</p>
</body>
p { color: #f00; }
Web page title
index.html
CSS rocks!
15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
GAME: GUESS THE COLOR
16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HEX
COLORS
NAMED
COLORS
HSL/HSLA
COLORS
RGB/RGBA
COLORS
17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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.
18. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RGB / RGBA COLORS
rgb(0,0,0)
rgb(255,255,255)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
19. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
RGB / RGBA COLORS
<body>
<p>CSS rocks!</p>
</body>
p { color: rgb(0,0,255) }
Web page title
index.html
CSS rocks!
20. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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.
21. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
RGB / RGBA COLORS
<body>
<p>CSS rocks!</p>
</body>
p { color: rgba(0,0,255,0.5) }
Web page title
index.html
CSS rocks!
22. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HEX
COLORS
NAMED
COLORS
HSL/HSLA
COLORS
RGB/RGBA
COLORS
23. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HSL/HSLA COLORS
p { color: hsl(240,100%,50%) }
Hue Saturation Lightness
0 360
24. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HSL/HSLA COLORS
hsl(0,0%,0%)
hsl(0,0%,100%)
hsl(0,100%,50%)
hsl(120,100%,50%)
hsl(240,100%,50%)
25. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
HSL/HSLA COLORS
<body>
<p>CSS rocks!</p>
</body>
p { color: hsl(240,100%,50%) }
Web page title
index.html
CSS rocks!
26. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
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.
27. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
HSL/HSLA COLORS
<body>
<p>CSS rocks!</p>
</body>
p { color: hsla(240,100%,50%,0.5) }
Web page title
index.html
CSS rocks!
29. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: CSS PEEPER
Inspect a color palette used on a website.
30. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: COLOR CONVERTER
31. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: IMPALETTE
Find the most dominant color in an image
32. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: MATERIAL DESIGN PALETTE
33. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: BRANDS IN COLOURS
34. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: BRANDCOLORS
35. Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES
36. 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.
Learn front-end development at rocket speed
inarocket.com
37. IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Color