Daniel Roelfs' Design Manual

Colors

For content distributed digitally (e.g. websites, blogs, presentation slides) never use 100% black (#000000) or white (#ffffff). Apart from perhaps content shown using a projector, the quality of screens on TVs, monitors, and smartphones (particularly OLED screens) is so good that the contrast between black and white can almost feel harsh. You can try this out by going to any website and see if they use actual black or some faded color. This website is an example, though it might look like black text on a white background, the text color is actually a slightly faded shade of very dark grey (#333333) and the background is a very hard to distinguish off-white (#f6f5f4).

Here's the "black" color variants I use a lot:

#0e0e0e
#1f1f1f
#333333
#444444
#555555
#777777

For whites, I tend to use #ececec (), #f6f5f4 (background of this website), and #fafafa (), which is very close to white, depending on the medium and context.

Accent colors

While I usually quite like a subdued look, of dark on light palette, accent colors are important to add some color to the UI, which makes it look more modern and sleek, but the choice of accent color is important based on the context. Color theory can help guide making a fitting choice. For further inspiration I can recommend looking at the Pantone Color of the Year picks from past years for inspiration, of pick your own color based on pleasing colors you encounter in your design work. The colors below are some of my favorites. These colors should not necessarily be used together. Creating a harmonious and accessible color palette is an own artform where one should definitely turn to color theory or use design tools such as Adobe Color or coolors.co.

#CABCC0
#EAB4B3
#977888
#5877B5
#284177
#36772F
#F8CF19

Colors palettes

While accent colors described above should be used in unison or in pairs of maybe two or three, color palettes should be designed in such a way that the colors in the palette fit well together as a whole. Colors could be selected along a set of default strategies using the color wheel (shown below). These strategies include but are not limited to choosing analogous, triadic, or complementary colors. A monochromatic palette might look pleasing, but suffers from accessibility issues due to the low level of contrast between the different colors.

Color palettes based on art

Referring to works of art to select a color palette is an excellent way to quickly establish a pleasing set of colors. If the colors in the work of look harmonious, chances are it will look harmonious elsewhere too. Below are a number of examples of color palettes derived from works of art. To generate your own palettes based on images one can use the tools mentioned earlier such as Adobe Color or coolors.co.

Van Gogh - De slaapkamer (1888)
Van Gogh - De slaapkamer (1888)
#8BB4D9
#527658
#D9910D
#A63D17
#BF8D7A
Ton Schulten - Kerstnacht (2020)
Ton Schulten - Kerstnacht (2020)
#D9303E
#4C49A6
#035AA6
#04B2D9
#F25835
Georgia O'Keeffe - Black Mesa Landscape, New Mexico (1930)
Georgia O'Keeffe - Black Mesa Landscape, New Mexico (1930)
#8BB4D9
#527658
#D9910D
#A63D17
#BF8D7A
Ton Schulten - Kerstnacht (2020)
Janne Schra - Weird dream of Morocco (2024)
#377BA6
#8BC3D9
#F27405
#BF2604
#F27979
Piet Mondriaan - Composition II in Red, Blue, and Yellow
Piet Mondriaan - Composition II in Red, Blue, and Yellow (1930)
#000700
#E5E4E0
#0367A6
#F2DD72
#D91818
Van Gogh - Caféterras bij nacht (1888)
Van Gogh - Caféterras bij nacht (1888)
#22412D
#2A558C
#264F73
#A67F38
#8C582A

Accessiblity

Accessiblity is an important factor to take into consideration when designing anything in either print or digital format. To test what your color palette looks like for individuals with various types of color blindness one can use for example online tools to simulate the deficiency. An example of a color palette that priotizes accessibility for people with various forms of colorblindness is shown below.

#E69F00
#56B4E9
#009E73
#F0E442
#0072B2
#D55E00

While it's nice to have a set of examples to refer to, learning color theory will make the job of selecting accent colors or creating a color palette a lot easier and the palettes generated may suit your use case better as well.