Can't explain why I see different color being rendered :/

HTML-CSS
1

So this probably isnt a bug or an issue what so ever but still I am very curious as to why the preview (or the code) behaves that way…

So I am on CSS lesson step 19

which basically needs me to type this

body {
  background-color: brown;
}

the thing is that by doing this (and despite this being the correct answer that the script accepts, I dont see brown but rather something like burgunty or something…

Ok I thought maybe my laptop screen color calibration is waayyy off…

but then I thought to google the hex code for brown (#964b00) so when on the same step I enter this instead:

body {
  background-color: #964b00;
}

The preview of the code looks indeed brown… thus my monitor’s calibration is allright as it seems…

So how come? I mean if HTML has a predefined value for the keyword “brown” shouldnt that value be #964b00? why is it different?

Or it is not different and this is an issue on freecodecamp’s side of things?

2

hey!

Which lesson name is this?Then share both your CSS and HTML code here.

3

Hi, I thought there is only one lesson for html-css :stuck_out_tongue: anyway my bad…

The lesson name is responsive web design

I did the html centered cat website and am now on the CSS part where you style a page for a cafe or what not and this I noticed on step 19 of that lesson.

HTML code so far(index.html):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
  <body>
    <div>
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
        </section>
      </main>
    </div>
  </body>
</html>

CSS code (styles.css):

body {
  background-color: brown;
}

h1, h2, p {
  text-align: center;
}

again on the styles.css file if I change the value of the background-color from “brown” (as it is shown above) to #964b00 (which google tells me its the css hex value for brown) I see brown on my monitor… but if I leave it as is so the value being the string “brown” it displays a color that’s more reddish like burgundy or something instead of brown but this could be subjective interpretation the objective one is that value “brown” and value “#964b00” do NOT display the same color on the preview of the lesson.

4

As you’re learning CSS, I suggest to learn about “css bem” ( google, YT search ).

During my learning phase, I was terrified of CSS and it gave me lots of nightmares.

But after learning BEM; I’m super confident with CSS and can fix any CSS bug / enhance in the middle of night as well :wink:

5

The “brown” color seems to be brown but reddish brown and its hex is #A52A2A.

6

Yea but like isn’t this strange?

I mean shouldn’t the HTML value “brown” be the same as the hex brown ( #964b00)?

Like does the code do the same thing even if you use a ID like VScode or something? lol I try it later to check ha!

edit:
I googled the hex value you gave (#A52A2A) and it is the same on my screen as if I was entering the value “brown” as a string. but googling that hex value I think we can confirm that its not brown or a redish brown but outright red… not even close to the brown spectrum.

image
image785×705 37.4 KB

7

Here is the same google result for #964b00 where you can see its like “dead zone” brown

image
image809×717 47.3 KB

This makes things even more strange because now the css value “brown” for the background-color attribute isnt just a “off set redish brown” instead of being a "dead center " brown but actually is an entirely different color lol like the guys who maintain HTML5 should take a look on this :stuck_out_tongue:

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.