Chapter 4 — Extension: Colours and Palettes

Did you have fun playing with colours in the last chapter? Here are a few bonus tasks that you are encouraged to try.

Extension Colour Exercise 1 — 10 Minutes

Inspired by Pantone colour swatches:

… create either a frame in Figma that replicates the below design, or replicate it as HTML and CSS. (You are welcome to copy and paste the HTML and CSS code into a new document if you choose the latter).

A colour swatch inspired by PANTONE®

By mixing red, green, and blue values (perhaps using the Figma colour swatch) come up with a colour that you find aesthetically appealing, and set it as the background colour of the top area.

Be sure to identify the colour code in a range of formats (eg. hexadecimal RGB, decimal RGB, HSL as done in the Codepen example).

Give your colour a name. Post a screenshot of your creation to your Coursework Portfolio blog. In your post, outline why you chose to make this colour? What does it symbolise/represent to you? Rationalise/explain your reasoning for the name.

</aside>

Extension Colour Exercise 2 (10 Mins)

Copy the HTML in the Codepen below and paste it into the <body> element of a new HTML document.

https://codepen.io/alexmesker/pen/azbzZEm

Create a new stylesheet, link to it from your HTML document and add the following CSS:

:root {
	--color1: #f8dfa6; /* Frame and skin tone */
	--color2: #7aa0ab; /* Bg Tone Left */
	--color3: #d52228; /* Bg Tone Right */
	--color4: #09304d; /* Foreground color */
	--color5: #fdfefd; /* Star */

/* 	--color1: red; */
/* 	--color2: blue;  */
/* 	--color3: green; */
/* 	--color4: purple; */
/* 	--color5: orange; */
}

html, body {
	height: 100%;
}

body {
	margin: 0px;
	display: grid;
	place-items: center;
}

svg {
	max-height: 90vh;
}

Using a palette or colour system of your choosing, redefine the five key colours of the image, by changing the hexadecimal colour codes listed in the :root selector.

Take a screengrab of your work and post it to your Coursework Portfolio blog, and write a short (~50 word) outline of your choices. Why did you pick these colours? What inspired you? Are they complementary/contrasting, vibrant/muted, realistic/imaginative? etc. etc.

</aside>

Extension Colour Exercise 3: Color (8 Mins)

Play a game of Color: a color matching game: https://color.method.ac

This is a fun (and occasionally stressful) way to test your colour hue/saturation matching skills.

How did you go? Post a screengrab of your results to your Coursework Portfolio blog.

</aside>