24 Matching Annotations
  1. Last 7 days
  2. Jan 2022
  3. Dec 2021
    1. Adding flexibility to our contrast checker function

      Brian’s function only accepts six-character hexcolors, and they cannot have a leading hash (#).

      Let’s first modify it to accept a leading hash. We’ll use Array.slice() to get the first character and check if it equals #. If it does, we’ll use Array.slice() again to remove the leading hash and redefine hexcolor.

      Next, let’s modify the function to allow both three and six-character colors.

      To do that, we’ll first check the length of hexcolor. If it’s 3, we’ll use Array.split() to convert the hexcolor string into an array of characters. Then, we’ll use Array.map() to double each character, and Array.join() to combine it back into a string.

       * Get the contrasting color for any hex color
       * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
       * Derived from work by Brian Suda, https://24ways.org/2010/calculating-color-contrast/
       * @param  {String} A hexcolor value
       * @return {String} The contrasting color (black or white)
      var getContrast = function (hexcolor){
          // If a leading # is provided, remove it
          if (hexcolor.slice(0, 1) === '#') {
              hexcolor = hexcolor.slice(1);
          // If a three-character hexcode, make six-character
          if (hexcolor.length === 3) {
              hexcolor = hexcolor.split('').map(function (hex) {
                  return hex + hex;
          // Convert to RGB value
          var r = parseInt(hexcolor.substr(0,2),16);
          var g = parseInt(hexcolor.substr(2,2),16);
          var b = parseInt(hexcolor.substr(4,2),16);
          // Get YIQ ratio
          var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
          // Check contrast
          return (yiq >= 128) ? 'black' : 'white';

      Here’s a demo on CodePen

    1. The second equation is called ‘YIQ’ because it converts the RGB color space into YIQ, which takes into account the different impacts of its constituent parts. Again, the equation returns white or black and it’s also very easy to implement.

      In JavaScript:

      function getContrastYIQ(hexcolor){
          var r = parseInt(hexcolor.substr(0,2),16);
          var g = parseInt(hexcolor.substr(2,2),16);
          var b = parseInt(hexcolor.substr(4,2),16);
          var yiq = ((r*299)+(g*587)+(b*114))/1000;
          return (yiq >= 128) ? 'black' : 'white';

      You’ll notice first that we have broken down the hex value into separate RGB values. This is important because each of these channels is scaled in accordance to its visual impact. Once everything is scaled and normalized, it will be in a range between zero and 255. Much like the previous ’50%’ function, we now need to check if the input is above or below halfway. Depending on where that value is, we’ll return the corresponding highest contrasting color.

    2. There are two functions I want to compare.

      The first, I call ’50%’. It takes the hex value and compares it to the value halfway between pure black and pure white. If the hex value is less than half, meaning it is on the darker side of the spectrum, it returns white as the text color. If the result is greater than half, it’s on the lighter side of the spectrum and returns black as the text value.

      In JavaScript:

      function getContrast50(hexcolor){
          return (parseInt(hexcolor, 16) > 0xffffff/2) ? 'black':'white';

      It doesn’t get much simpler than that! The function converts the six-character hex color into an integer and compares that to one half the integer value of pure white. The function is easy to remember, but is naive when it comes to understanding how we perceive parts of the spectrum. Different wavelengths have greater or lesser impact on the contrast.

  4. Oct 2021
    1. Sometimes it is noted that, even before 1600, when the slave trade had justbegun, before Africans were stamped by it—literally and symbolically—thecolor black was distasteful. In England, before 1600, it meant, according to theOxford English Dictionary: “Deeply stained with dirt; soiled, dirty, foul.Having dark or deadly purposes, malignant; pertaining to or involving death,deadly; baneful, disastrous, sinister. Foul, iniquitous, atrocious, horriblywicked. Indicating disgrace, censure, liability to punishment, etc.” AndElizabethan poetry often used the color white in connection with beauty

      Was some of the origin of this black versus white dichotomy from religion of the time?

      Where does this black v. white differentiation begin? Zinn does mention the idea of daylight/night as a potential source.

  5. Jun 2021
  6. Apr 2021
  7. Mar 2021
  8. Feb 2021
  9. Oct 2020
    1. He turned crimson

      I really appreciate Mansfield’s utilization of visual arts through color. I noticed how colors stand out a lot in her writing, which give and promote a more prominent perception of her character’s reactions.

  10. Apr 2020
    1. Asians favour a more crimson red than Western red
    2. People often talk about how colours are meant to contrast, by using colour wheels or by checking the HSV coordinates, but be aware that these tools are lies. The scale of computer colours is typically not perceptually uniform. Brown should be a narrow region for instance and blue should be a huge region. To see the proper range of each colour, consult a rainbow.
  11. Dec 2019
  12. Aug 2019
  13. Jul 2018
    1. pale

      This word occurs five times in this story, both as a verb (i.e., to become pale, or to appear less important and remarkable in comparison to something else) and as a drab color. Along with a concordance, a dispersion plot with "pale" and the more vibrant colors that populate the story would illuminate the visual, textural, and perhaps symbolic significance of paleness.

    1. Hint: you can find a list of permitted color names at https://www.w3schools.com/colors/colors_names.asp. It includes some quite unusual ones, like “PeachPuff” and “HotPink”.

      Visit this website and look at the long list of colors available and their corresponding HEX values. Identify the names of the colors with HEX values #0000FF, #00FF00, #FF0000, #00FFFF, #FF00FF, and #FFFF00.