So what about colors now?
On this page,
we don't use too many colors at first sight,
and this is also true,
but actually you can keep
three things in mind when working with colors.
And these are all sort of things you see on this page.
The first thing is, gray is always required
because if you look at this page,
you see that the background of this card here is white.
But besides that
we are using a gray background for the entire page.
So if I check out the HTML element
and unselect the background color,
then you obviously see it,
that this gray adds
a different tone to our page,
a different look,
and more importantly,
gray is also used for the fonts for the text in here.
And you might not see this,
but if I go to the h1 element
and then go down
to my properties
and unselect the color property,
then you see that this is not black.
Now it is black, but we use a very dark gray tone,
and we are doing this because well,
pure black tends to look a bit unnatural.
And with this gray tone, well,
we can achieve a more natural look.
And if you undo this, you probably see what I mean.
This gray, I think looks better.
It looks more natural.
It looks more integrated into the page.
And this logic can also be found
in other text parts on this card.
For example, card info,
as you can see it,
this is a gray tone.
If I undo that it will look different
and it would also
move away the focus of the h1 element.
With that, h1 is more the focus.
Same thing for the price.
The price here also has a gray tone.
There, it's a bit hard to see,
but still we have a gray tone.
We don't have pure black in here,
and this can also be found
for all the other elements on this page.
So that's the first color topic.
Gray is actually always required,
and it helps to achieve a more natural,
a more professional look of our website.
Besides gray, first core topic,
we typically also choose a primary color.
What is our primary color here?
Well, our primary color would be this blue tone, probably.
So if we would have a bigger page,
you would find this blue again and again.
An example for such a primary color
can be found here on udemy.com
Udemy.com, well obviously has
this purple tone as primary color.
You can find it up here for this information
at the top of the page.
You can find it here,
if I zoom in a bit,
on top of the logo.
And if I scroll through the courses here,
you can also find it on there
for these highlights of the course topics.
And you can also find it on here
for the additional information.
So this is a primary color,
so the core color you're using on your website,
your corporate identity in the end.
And of course we are not limited to one specific
tone of this blue color here.
Same thing applies for the gray tone as we saw it,
but we'll dive into the different iterations,
the different colors we have
inside such a color schemer in a few minutes.
The important thing at this point is that we have the
gray color tone in general and the primary color,
our corporate color, so to say,
which can be found on many places on our website.
Besides the gray color and the primary color, on some pages,
on some occasions, you might also see an accent color.
An accent color right here could be a badge for example,
which you might have on this card
saying that we have a special offer at the moment.
And this could be a yellow background, for example,
to highlight the specific character
of this card at the moment.
But generally with a gray tone,
a primary color and this accent color,
you're actually well-equipped
to create a good looking website.
However, at this point of the module,
you'll see that we have
different options to work on our page.
So spacing, fonts and colors, basically,
and I'm always talking about different ranges.
So ranges for spaces, ranges for
font sizes,
for font weights,
and also ranges for different color choices.
A range of gray colors, a range of primary colors,
a range of accent colors.
So these ranges are something
we cannot grab at the moment, right?
So actually what we would need is
a predefined range of
font sizes, colors, and so on,
we can choose from without always having to go into our
tools for example, and checking out a new RGB color here,
which might be a great fit.
So a preset of predefined colors and so on,
would be a nice helper to again,
focus on to the actual design
and not to get lost in choices like this.
Therefore, we are now leaving this, well,
general theory part of this module
and dive into a new concept.