menu
color is the CSS property that controls the color of your text content and also SVG shapes.
taught by Tina May
You can use one of the 147 predefined CSS color names. The options are a bit limited, so you generally use this just for playing around with code.
color:
Tip: All 147 color names and visual examples can be seen here.
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can use hexadecimal (HEX) color code, the universal six-digit code used to define over 16 million color options. Remember that it always begins with the # symbol.
color:
Tip: Each digit represents a value from 0 to 9 and A to F, and it accepts both uppercase and lowercase.
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can use any rgb() values, which represents red, green, and blue. Each of them can have a value between 0 to 255.
color:
Tip: Setting all three codes to the same value will give you shade of grey and you can increase/decrease this to make it lighter/darker, or tweak the tone slightly.
Oh hey there fellas!
What's brewing, good looking?
You miss 100% of the shots you never take.
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
<div>
<h2>Oh hey guys!</h2>
<p>What's brewing, good looking?</p>
</div>What's brewing, good looking?
/* Change your heading color*/
h2 { color: HotPink; }
/* Change your paragraph color*/
p { color: rgba(81, 62, 201, 0.75); }
Try changing the color of each of the following elements. Below we’ve put a heading and a paragraph so test out what happens when you give them a HEX, RGB or HSL values, or one of the 147 color names.
Try these (or anything else!):
Copyright 2023