Colour in design is a vast subject, one that causes much debate and discussion. Before we take a closer look at how to create colour schemes for our designs, let's consider some of the basic conceptions and meanings commonly associated with colours.
When we open up any graphics app and create a new file, one of the first things confronting us are the colour settings. Which settings apply depends on the output of the design. Making this decision at the very start of our design process will mean less time needs to be spent on recalibrating the final colours. And this is an easy decision ~ for our work as web designers, we will always work in RGB.
web
Always work in RGB!
all monitors use RGB with varying profiles
RGB (Red, Green, Blue) is an additive colour model. Colours are created by combining varying intensities of red, green, and blue light. Each colour channel has a value ranging from 0 to 255, where 0 represents no intensity, and 255 represents maximum intensity.
print
Typical requirement: CMYK
talk to the printer to confirm colour specs
CMYK (Cyan, Magenta, Yellow, Black) is a subtractive colour model, based on the absorption of light. Colours are formed by combining varying percentages of the inks ~ at high intensity, resulting in black.
The 2 colour modes vary in how a design’s colour will look in the final output. If we forget this setting and work in CMYK, the final result of the graphic will likely look more dull and less vibrant on screen. We can, of course, change the colour mode after starting the work but this will also change our colour’s tones and shades. We will then have to spend time on changing all colours to recalibrate the colours for the appearance we planned for.
Creating a new colour scheme for any design can be quite a challenge. It often means staring at the blank canvas and not even knowing where to start. However, colour is one of the most powerful aspects of design ~ one that can be used for emphasis and have great impact. It can be so much fun ツ
The following slides introduce three methods of how we could approach the colour scheme for a given client project. Using a tea room as fictional client, we can use the logo as well as context to create very different approaches to colour, followed by some video tutorials to demo the mentioned methods.
As you explore the world of colour it is easy to get stuck or distracted due to the endlessness of possibilities when it comes to colour schemes. There is a seemingly infinite number of tools and examples online which you should explore by all means. My advice would merely be not to get too hung up on tools but to work towards creating your own unique colour schemes to fit your project's purpose and mission.
colour scheme design with blend tool
summary
use any SVG to design your colour scheme
keep naming all layers and artboards as you work
use the artboard tool to make copies
extract colours with the eyedropper tool
use the colour swatches to create a blend of the colours
change blend options to smooth or steps
expand the blend for further edits
ungroup for easy selection
tips
pay attention to your settings - for this method, use only fill (no stroke)
work with the right selection tool
remember that the blend tool requires 2 clicks — your shapes can be selected or not, but both need to be clicked on with the blend tool
to apply colour, select the object and then use the eyedropper tool
work with layers to keep graphics in meaningful groups, easy for editing
make note of your colour codes as text, consider adding those inside a comment to your CSS
colour scheme design via image pixelation
Affinity Photo
open image file + rename layer
duplicate layer for edits
select new layer & apply filter
top menu: Filters > Distort > Pixelate
adjust quantisation for less/more colours
create 6 square shapes for final colour pick
pick colours, apply to squares
make note of HEX code via colour chooser
Adobe Photoshop
open image file + rename layer
duplicate layer for edits
select new layer & apply filter
top menu: Filter > Pixelate > Mosaic
adjust cell size for less/more colours
create 6 square shapes for final colour pick
pick colours, apply to squares
make note of HEX code via colour picker
the importance of colour contrast
One of the most important aspects of colour use in design is the contrast ~ mainly the contrast between fore- and background, between text and the background colour. While a soft and subtle colour combination can be very effective aesthetically, it could also result in text that becomes difficult to read, or even illegible. This is when the visual appearance or preference has to come second to the usability of our colour scheme design.
Colour use therefore needs to provide sufficient contrast to ensure legibility. This get further complicated through monitor/screen settings as well as colour blindness. We have to make ourselves aware that what we see on our screens might not be what others might see. Testing is therefore vital and understanding how we can best compensate for some of these factors will be important.
colour blindness
Colour blindness is essentially a colour vision deficiency. It occurs when someone has difficulty perceiving certain colours or distinguishing between different colours. The prevalence of colour blindness tends to vary depending on the population and geographical location. Generally speaking, it is approximately 8% of males and 0.5% of females globally who are affected.
full vision: seeing all colours
deuternatopia: green-blindness
tritanopia: colour vision deficiency for blue tones
protanopia: red-blindness
To tackle this issue for our colour schemes, we consider the colour contrast carefully. Testing a design in purely black and white (as would be the case for complete colour blindness) will highlight whether the clarity of visuals and text works. This approach is typical for the early stages of design, such as logo and icons design already and can serve us well here too.
Colour accessibility
Geri Coady is an illustrator and author whose work is both beautiful and colourful. She has written about making colour accessible in her book 'Color Accessibility Workflows', published by A Book Apart. Her work is wonderful and the following are screenshots of her website's 'about' page from 2013 , featured here with kind permission, thank you, Geri ツ.
They are perfect examples how effective colour contrast is to ensure that a design's details are not lost.
checking colour contrast
In addition to visual checks which might be subjective, we need to make sure that our colours meet accessibility guidelines. Luckily, we can use digital tools to measure the colour values against the specifications.
When we work on our designs we might be using any number of colour pickers and tools in our graphics apps to start with. We will all have our preferences in which picker allows us to find just the right colour. Typically, we can then see how the colour values are defined by values and we will use RGB (red/green/blue) or HSL (hue/saturation/lightness).
colour picker options in Affinity Designer
The colour on our webpages however can be implemented in an ever growing number of different ways: the most common format remains the HEX code, comprised of a hash key followed by 6 digits (or 3 if shortened). Initially names were used in code before HEX became the norm during the 1990s and beyond 2000. The next format was rgb which much later on was extended to include transparency with rgba() (the added 'a' stands for alpha).
More recently, since 2020, new formats made it into the W3C Spec. HSL (hue/saturation/lightness) was introduced to become a supposedly more intuitive way to create harmonious colour schemes. With a hue value set, the intensity/vibrance as well as the shade of the colour could be more easily tweaked via CSS.
Personal note: on first read, I really liked this idea of hsl() as none of the other methods allowed me to visualise the colours I was adding. Granted, it is possible to learn how to interpret both hex and rgb ~ but it was not for me. My hope was that using hsl() would be the way to go. Upon trying to use it, I got very frustrated. Not with the code per se ~ there are tools to make finding the right tone easier. But the visual result when trying to tweak colours by adjusting their saturation or lightness were surprisingly poor. I ended up with some very dull and odd 'dead' colours and soon gave up.
Then came an incredibly insightful talk (at State of the Browser) by Manuel Matuzovic who spoke about colour spaces I had only fleetingly come across and never looked into. The video of this talk (embedded on this page) has much to teach us all. Check out the following slides which explain the advantages the oklch() brings. This is a new CSS Color 4 spec and not quite fully supported yet (going by what I understand at this point).
Manuel kindly sent me the link to the slides to share here and now ~ this is the more or less same talk and contains all the colour goodies and links I really wanted to include in this chapter. Once more, thank you, Manuel ツ
Color in CSS Or: How I Learned to Disrespect Tennis
This talk was quite an eye opener for me and I will now have to learn a lot of more, experiment and have some fun with it, too. The OKLCH Color picker looks like a brilliant tool which visualises colour in so many ways ~ surely time to play ツ
In his talk, Manuel mentioned how a gradient via code always takes the shortest path on the colour wheel ~ and then said we could set this to take the longer route too...!! Looking at the result, I was blown away by the beauty of colour and vibrance of this new and richer gradient option - here come the rainbows ツ
veerle.duoh.com
Veerle is a graphic and web designer, she is well known for many of her projects, such as the branding of the Adobe Creative Suite on its first launch. Her personal blog has been an inspiration to many for many many years. She is one of my favourite web people ツ Her site features articles and tutorials (especially for vector graphics) and the inspiration section is updated frequently and always offers something fresh ~ have a look at the inspiration section.
The experimental phase is most important and the heart of the creative process—often leading to unexpected results.
In this article Veerle tells the story of the redesign of her blog and her “... Design Process and the Struggles Along the Way”. The quality of her designs is undisputed and we always learn so much when someone so openly shares their work process. A worthy read, highly recommended.
Colour scheme design
‘Hattie's Team Room’ is looking for a refresh of their brand. They are keen to keep the visual, typeface and logo design itself but are looking to update the feel of their visual identity. You brief is to give their logo a face list by refreshing the colour palette, using different colours entirely and to create a colour scheme that can extend beyond the logo itself.
Objectives
Produce two colour scheme proposals with an expanded palette to be used across all media outputs. Consider the logo itself, as well as promotional materials such as business cards, menus as well as the website and online profiles.
Requirements for each of the 2 proposals are as follows:
logo design to be kept as given (full graphic including teapot icon, steam and ornamental lines as well as text and typeface/typesetting)
logo colours: limited to 2 colours only (following given logo's colour approach, the colour limit is to be maintained)
new brand colour scheme: expand the number of colours to a total of 6 (i.e. addition of 4 colours to the 2 logo colours)
Note on file format:
The SVG is the universal vector format and you will be able to open and edit this in any vector app you prefer. The .ai file is the format for Adobe Illustrator specifically; Affinity Designer can also open this file.
CSS colours
Colours in CSS can be applied in an increasing number of ways, such as using the standard HEX[1] code (which is always fully opaque), or the more nuanced RGBA[2] and HSLA[3] codes which include settings for opacity. Note that the CSS for colour in CSS is spelled as in American English, without the 'u': color.
To learn more about implementing the colours in your design, check out the 'Applying color to HTML elements using CSS' section which will outline elements which can have colour and how to target them in your CSS.
read: Applying color to HTML elements using CSS
Colour spaces in the W3C specs are evolving and there are now more options available, including the new OKLCH[4], see CSS Color 4 for details.
The official documentation is quite complex but we can experiment with this colour space by using this brilliant OKLCH Color Picker & Converter by Evil Martians. This tool offers a conversion of HEX code to oklch() and we can use the sliders to preview and learn more ツ
footnotes
hexadecimal code: a six-digit alphanumeric representation of colours in web design and development ↵
RGBA stands for Red, Green, Blue, and Alpha, a colour model based on the RGB model with an additional alpha channel that represents the level of transparency or opacity of a colour ↵
HSLA stands for Hue, Saturation, Lightness, and Alpha, a color model based on the HSL with an additional alpha channel that represents the level of transparency or opacity of a colour ↵
OKLCH: with values for Lightness, Chrome and Hue. "The oklch() functional notation expresses a given color in the Oklab color space. oklch() is the cylindrical form of oklab(), using the same L axis, but with polar Chroma (C) and Hue (h) coordinates." (quoted from MDN) ↵
.png)
