Skip to main content

A Color Scheme Visualization

· 2 min read
Software Engineer

As I built this site, I created a simple color palette; largely black and white with a single dark-blue added to add some color. I am no web designer and it's not a skill I intend to explore with this site. But, I want a simple and professional color scheme so I began reevaluating my color scheme. This post is a visualization of the full color palette.

The intent of this post is to help me visualize the color palette as I define it. I defined the palette using some JSON arrays describing each color and dynamically display the palettes shown below.

Core Colors

The core colors of the palette are blue and gray. Most of the colors seen on the site is a variant of the blue below.

#010414#020E3C#031663#041F8B#0628B2#0731DA#1240F8#395FF9#617FFA#889FFB#B0BFFC#D8DFFE
#090A0b#1B1D22#2D3139#40444F#525766#646B7D#777F92#8E95A4#A4AAB6#BBC0C9#D2D5DB#E8EAED

Full Colors

The full color palette includes the colors show below, these are used less often than the core colors above but may be used for syntax highlighting, buttons, alerts, and similar features.

#23060A#460C14#69121D#8C1827#AE1E31#D1233B#DE3F54#E46273#EA8592#F0A8B1#F6CBD0#FCEEEF
#210810#421020#631830#83203F#A4284F#C5305F#D34A76#DB6B8F#E38CA8#EBADC1#F3CEDA#FBEFF3
#0E0D1C#1C1A38#2A2754#373370#45408C#534DA8#6B65B8#8681C5#A19DD2#BCB9DF#D7D5EC#F2F1F9
#071D21#0E3B43#155965#1C7787#2395A9#2AB3CB#45C3D9#67CEE0#88D9E7#AAE4EE#CCEFF5#EEFAFC
#0B1E13#163C26#215939#2C774D#379560#42B373#5BC288#79CD9E#97D8B3#B5E3C9#D3EEDF#F0F9F4
#271A02#4E3404#744E06#9B6808#C2820A#E99B0C#F4AD2A#F6BC51#F8CB77#FADA9E#FCE9C5#FEF8EC

Summary

This article was designed solely to help visualize a this websites color palette as I refined it. Seeing the full palette together in varying shades was a huge help in identifying how it worked together.