By Garth Jones
One of the questions that I get asked about is how someone without a visual arts background can create a color scheme or palette for ConfigMgr dashboards or reports.
If you create ConfigMgr dashboards, reports, or websites, applications, etc., you know that color plays an important role. I’ll admit that I’m not great at mixing colors together, but over the years I’ve learned a few tricks. This blog post will cover two related topics on the subject of choosing a color scheme or palette.
First, I will show you how to duplicate a color scheme by discovering what hex color codes to use. Second, I will show you how to design a color palette around a logo.
If you follow my blog posts, you will know that at various times I have talked about the Hot Dog color scheme within Windows for Workgroups (WFW). You can see the old WFW theme here. If I remember right, the WFW color palette was designed as a high-contrast theme to help those who are visually impaired.
Let’s get started! First, I want to mimic the WFW theme in a report called, Patch Compliance Progression by Collection but, I will need to determine what the hex color codes are for red and yellow.
Using one of the PNG images from the WFW link above, I simply upload the image to the Cool PHP Tools website in order to discover what hex color codes are in use. Once you’ve clicked on the Browse button and uploaded your image file (JPG, PNG, etc.), all you need to do is click on the Run button.
By the way, there are a number of sites that can help you with this, but I prefer this one because it will tell me what the top 10 colors are within an image.
Above are the results from the uploaded WFW image. From this list, I can quickly tell that #ffff00 is the main yellow color, #f00000 is the main red color, #ffffff is white, #000000 is black, and #c0c0c0 is grey. Now I will use these colors in my report.
Doesn’t my report look similar to WFW’s Hot Dog color palette? Yellow is the background, red is the color of the headers, grey is the accent color, and the text is in black and white.
Now I will show you how to design a color palette around a logo.
This is where a lot of folks get stuck. Where do you start? Do you use your favorite color, your wife’s favorite color, etc.?
Luckily, there are a lot of web sites that can help you out. Pictaculous is one of my favorites!
Using the BROWSE button, select your logo. When you click on the GET MY PALETTE button, you instantly get a color palette! Below is the color palette for the Enhansoft logo.
I then like to put the suggested main colors into a chart for easy reference:
Next I take the suggested colors and decide how I’ll use them within my report.
Below is what the report ends up looking like, but I think the sub-header, “Collection: Oxford Regional Office,” is too light.
Let’s try using another suggested color, #D94D5D.
Better, but I don’t like it. This is the hard part, so now what? Go back to the palette web page. Notice that just below the palette there are other suggested color schemes based on my logo. I like the third one under the COLOURLovers suggestion. By clicking here, the hex color codes for this palette are revealed.
To me, the blue, green and orange all seem to stand out from the other suggestions, so l will try the sub-header with all three colors.
First blue (#0066CC).
Then green (#336633).
Now orange (#FF9900).
Notice that all three colors look good with the color red, but I think the blue is the best one, especially if it is bolded. The final report looks like this:
With that you can see how, by using a couple of websites, you can create a color palette for your dashboards, reports, websites, applications, etc. without too much work.
Here are some other websites that you should check out too!
If you have any questions, please feel free to contact me @GarthMJ.