Project 1.2: Reverse engineer the color palette of an existing website

Task

Find an existing website that you frequent or like. Take screenshots of the website using a browser plugin such as Fireshot. Do an audit of the website's color scheme. What seems to be the primary (dominant) color? You can use the eye dropper tool in your design program to approximate the color. Apart from the dominant primary color, what are the secondary, tertiary and neutral colors they used?


Tips

  • Don't stop at the homepage. You may need to visit a few more pages to have a better understanding of secondary and/or tertiary colors.


Deliverables

A color palette labeled with primary color, secondary color/ tertiary colors (if any), neutral colors. You should provide at least 2 types of color codes, HSB and hex code. You are welcome to also include RGB and convert colors into CMYK if you want to play around with conversion tools online.


Submission

After you are finished, share your Figma file with your assigned mentor by adding their email to your file. They will receive a notification via email and will be able to provide feedback to you directly within your Figma file. You will receive an email notification when a new comment is available. You will then work on iterations there. When you want to receive feedback for your new iterations, simply tag your mentor in your comment section within Figma.



Task

Find a website you frequently visit or like. What seems to be the dominant brand color of the website? Did you notice any colors that are supportive of the main brand color? Are there any neutral colors? Take screenshots of the website and figure out what the color palette of the website.

Use the eyedropper tool in your design program to approximate the colors you found on the website.

Tips

  • When you "reverse engineer" the website's color palette, remember to provide color values such as hex code, RGB and HSB to each color you approximate.
  • We also require that you categorize colors based on the functions they serve for the web design. You have some freedom for naming your categories, but in general, we recommend categorizing colors to primary colors (for dominant brand color), secondary colors (for colors that appear occasionally to support the main brand color) or accent colors (for colors that "pop" against the main brand color), and neutral colors (any colors that are black, white and gray).

Deliverables

A formatted color palette with category labels and color values.

Submission

After you are finished, save your Figma link for your review sessions when you will be discussing your assignment with your chosen expert design instructor. They will provide their email for you to share access to them and may ask you to screen share your desktop to show them your work.

Complete and Continue