Complementary Color in challenge <Adjust the Color of Various Elements to Complementary Colors>

Complementary Color in challenge <Adjust the Color of Various Elements to Complementary Colors>
0

#1

Tell us what’s happening:

I am puzzled about the comment "This page will use a shade of teal (#09A7A1) as the dominant color, and its orange (#FF790E) complement to visually highlight the sign-up buttons. " in the challenge :

How can (#FF790E) be a complementary color of (#09A7A1) ?

Your code so far


<style>
  body {
    background-color: white;
  }
  header {
    background-color: black;
    color: white;
    padding: 0.25em;
  }
  h2 {
    color: black;
  }  
  button {
    background-color: white;
  }
  footer {
    background-color: black;
    color: white;
    padding: 0.5em;
  }
</style>
<header>
  <h1>Cooking with FCC!</h1>
</header>
<main>
  <article>
    <h2>Machine Learning in the Kitchen</h2>
    <p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
    <button>Sign Up</button>
  </article>
  <article>
    <h2>Bisection Vegetable Chopping</h2>
    <p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
    <button>Sign Up</button>
  </article>
</main>
<br>
<footer>&copy; 2018 FCC Kitchen</footer>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:62.0) Gecko/20100101 Firefox/62.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors


#2

I believe what the challenge is trying to say that having different colors can help the user easily locate things on a page. I know they’re totally different colors but I think complementary, in this case, could be that they help to lead the user navigate through the page. I hope this makes sense. IMO I think it’s just poor phrasing.


#3

Complementary means that the two colors are on opposite sides of the color wheel.


#4

More specifically, complementary means that the two colours added together make white, that’s the definition of a complementary colour pair - yellow + blue for example


#5

Thanks, I got that. That is why #00FFFFis complementary to #FFFF00. My point, however, is how How can (#FF790E) is a complementary color of (#09A7A1) ? . From my understanding, we find the complementary by substracting the number from #FFFFFF, which is white.

That way, #FF790E subtracted by #FFFFFF should be # 0086F1. In fact, # 0086F1 + #FF790E gives white.

Still don’t get why (#FF790E) is a complementary color of (#09A7A1)…

What I am missing here ?
Tks


#6

That is actually what i thought you were asking, and i don’t know the answer.
The closest i can get is that RYB was used.

If you put in #09A7A1 in paletton and press opposite, you get #FF790E

The major advantage of Paletton is it’s not using the modern computer and engineering RGB color space, but it’s built on a classical artistic color wheel, applies classical color theory and works within a specially created RYB color space.

Looking at this issue on github, this may be part of some inconsistency in the curriculum.

I haven’t done the math to confirm this, i only used the paletton tool and the info on the paletton wiki. However, if this is the case, then it should be corrected.


#7

Yes, I tried also to get the complementary colors at online tools. Because of this I was able to learn how to perform calculations (summation and subtraction) with HEX base. My question is still open though. :sunglasses:


#8

Well, the short answer is that they are not complementary. If you check the GitHub link that @lasjorg posted you’ll see that a pull request has been made to change the phrasing of this exercise. It will take a while before the site gets updated though.


#9

Yes, but doesn’t that issue only deal with this exercise, which seems to have been corrected? I see no issue for the exercise in question.


#10

Thanks, I appreciate it. I had checked the link @lasjorg as well.

The point here was to find a reference on how to compute the complementary color - without checking online.

Thank you


#11

They are visually complementary colours: they may not be mathematically exactly complementary, but they aren’t far off, and that’s fine. Actually complementary colours don’t work well together, and there needs to be an element of manual tweaking; placing one on top of the other causes the coloured item on the top to vibrate, it’s often extremely ugly. This is the design section of the course, it’s generally not possible to get the best results by shoving the colours into an equation. It’s trivially easy to produce exactly [mathematically] complementary colours, but that generally isn’t much use as an end product in a design - equations are not the same as a human eye.


#12

Thanks Dan,
I appreciate your answer and it make sense for me now. Although I found myself stuck in the HEX subtraction, I do not intend to find a mathematical way to find aesthetics when it comes to color choice. Great journey here at FreeCodeCamp so far. Great and rich community.

Thanks for the time you spent on this.
Regards,
Augusto


#13

I agree with what you are saying, but i do think they are actual complementary colors, just using the now outdated RYB color model.