ICS Calendar

ICS Calendar
  • Features
    • ICS Calendar Pro
    • Feature Comparison
    • Sample Calendars
    • Preview Your Calendar
    • More WordPress Plugins
  • Help
    • User Guide
      • Getting Started
      • General WordPress Settings
      • ICS Calendar Settings
      • Shortcode Overview
      • Shortcode Reference
      • FAQs and Tips
      • CSS Guide
      • Developer Resources
      • GDPR
    • Pro Documentation
      • Calendar Builder
      • ICS Events
      • Manual Calendar Setup
      • Admin Utilities and Settings
      • Customizer
      • Block Editor
      • Parameters Reference
    • Shortcode Builder
    • Support Request Form
    • Translation Suggestions
  • Blog
  • Download
  • Buy Now
  • Cart
  • My Account
Search
More...

On the futility of naming colors

December 30, 2022

This is certainly a “low priority” task, but sometimes my brain gets burned out on the high priority stuff, and I want to just have a bit of fun, while still improving the product. (And, the details do matter.)

When I designed the basic CSS for ICS Calendar, I very deliberately chose absolutely neutral colors for everything. I knew the plugin would be used on a wide range of sites with different designs, and I assumed, especially before the plugin really started to take off, that anyone who was using it would just code in their own colors to override mine, if they wanted.

Eventually, when it came time to start adding “premium” features for ICS Calendar Pro, I decided to leverage the Customizer (ah, the poor, doomed Customizer — I still think it’s a better way to let people modify their sites than Full Site Editing, but that’s a topic for another post) with some options to modify the color palette, fonts, and a few other general parameters.

ICS Calendar Pro’s Customizer tools allow admins to set specific colors — any color they like! — for several elements of the calendar layout, but it also includes a set of color palettes that will handle all of the details for you.

The color palettes all have one or two main colors, but I decided to give them whimsical names based on the time of day. So you have “sunrise” (yellows and oranges), “midday” (blues), “sunset” (reds) and “midnight” (kind of a purple-heavy “dark mode”). Later I decided to add four more palettes with whimsical names, this time based on the four seasons, so you have “spring” (greens), “summer” (pinks and purples), “autumn” (browns), and “winter” (cool grays).

But there is one specific thing that all of these color palettes have in common, and it’s something I’ve regretted committing to almost since I started: they all use CSS named colors, not hex or RGB values.

Partly this was a matter of expedience. I could spend endless days refining color palettes if I allowed myself to use any of the 16 million shades available in the realm of 8-bit color codes. (Not to mention transparency!) So instead I limited myself arbitrarily to the 140 named colors.

And, oh, are they arbitrary!

A few of the color palettes ended up working out pretty well… I am particularly fond of sunrise, summer and winter. But the others have some weird outlying colors that don’t blend well with the others, mainly because there just aren’t enough good named variants of blue, for instance.

As odd as the selection of available hues may be, their given names are even weirder. Needless to say the names are all in English, creating barriers for non-English speakers or even English speakers who don’t fit the demographic of the small group of people who originally came up with most of the names, in some cases decades ago. (The history of how the color names came to be is interesting.)

I think, without a doubt, the best example of how much the naming process went awry is the fact that there are two colors named darkgray and gray. Guess which one is darker. Of course, they needed a dark gray that was, you know, actually darker than the regular gray, so they came up with… uh… dimgray. Nice.

This block is darkgray
Hex code: #a9a9a9

This block is gray
Hex code: #808080

This block is dimgray
Hex code: #696969

Anyway, this week has involved a big push to get ICS Calendar Pro 4.0, with its new Full view, rolled out, along with some corresponding foundational updates to ICS Calendar itself.

One of those changes was the long-overdue addition of some CSS variables for the plugin’s color palette. By switching the plugin to using CSS variables, it is now much easier for theme developers and site customizers to change the ICS Calendar colors on their sites. You no longer need to track down a bunch of complex CSS selectors. Now you can just… redefine the variables.

The scope of ICS Calendar’s color variables is limited to ICS Calendar itself, so you’ll want to wrap your variable (re-)definitions in .ics-calendar { } to get them to work properly.

As one final nod to the quirky CSS color names, I’ve kept the original set of pure neutral grays I used as the names of the main colors. I also introduced five striking accent colors (also using CSS color names), although those have not really begun to make their way into the actual calendar templates. There are also 9 transparent shades of gray. (50 seemed excessive.)

And now that those variable names are in place, the latest ICS Calendar update deviates from the color names by swapping the original “true neutral” gray color palette with a tweaked set of “cool grays” that I think are still broadly usable on any site, but that have a bit more “life” to them than the original set. Here’s the full code:

.ics-calendar {
	--r34ics--color--white: #ffffff;
	--r34ics--color--whitesmoke: #f0f3f6;
	--r34ics--color--gainsboro: #d9dcdf;
	--r34ics--color--darkgray: #a3a8ac;
	--r34ics--color--gray: #70787f;
	--r34ics--color--dimgray: #60686f;
	--r34ics--color--black: #10181f;
	--r34ics--color--dodgerblue: dodgerblue;
	--r34ics--color--gold: gold;
	--r34ics--color--lemonchiffon: lemonchiffon;
	--r34ics--color--limegreen: limegreen;
	--r34ics--color--orangered: orangered;
	--r34ics--color--trans10: rgba(105,105,105,0.1);
	--r34ics--color--trans20: rgba(105,105,105,0.2);
	--r34ics--color--trans30: rgba(105,105,105,0.3);
	--r34ics--color--trans40: rgba(105,105,105,0.4);
	--r34ics--color--trans50: rgba(105,105,105,0.5);
	--r34ics--color--trans60: rgba(105,105,105,0.6);
	--r34ics--color--trans70: rgba(105,105,105,0.7);
	--r34ics--color--trans80: rgba(105,105,105,0.8);
	--r34ics--color--trans90: rgba(105,105,105,0.9);
}

You can use these right now with ICS Calendar 10.5.0 or later to easily customize your entire calendar presentation.

My next step is to refine the “whimsical” palettes built into ICS Calendar Pro. In addition to this new default “cool gray” palette, it includes a “warm gray” palette. The original true “neutral” palette will remain as an available option, but the remaining palettes will all see revisions in ICS Calendar Pro 4.1.

To help myself in the process of refining the palettes, I’ve put together a little tool to view swatches of the palettes. Here you can see both the old versions of the color palettes and their enhanced counterparts, along with a comparison of the three variants of gray palettes.

In revising the palettes, I (with a couple of exceptions) picked two of the existing colors to retain (plus black and white), and then blended adjacent colors to fill in the gaps. The resulting palettes are, I think, much more cohesive. I will probably tinker with them a bit more before releasing the update, but it will be coming soon.

A perhaps bigger change is how the Customizer will handle creating true custom palettes. Previously, you would select a design element (borders, table background, header text, etc.) and apply a color to that. Now you will simply be setting your own values for each of the CSS color variables.

Autumn V3

#ffffff
#fff8dc
#f5deb3
#deb887
#d2691e
#a52a2a
#000000

Autumn V4

#ffffff
#fdf8f0
#f5deb3
#e2a368
#d2691e
#69340f
#181818

Grays Cool V4

#ffffff
#f0f3f6
#d9dcdf
#a3a8ac
#70787f
#60686f
#10181f

Grays Neutral V3

#ffffff
#f5f5f5
#dcdcdc
#a9a9a9
#808080
#696969
#181818

Grays Warm V4

#ffffff
#f6f3f0
#dfdcd9
#aca8a3
#7f7870
#6f6860
#1f1810

Midday V3

#ffffff
#f0f8ff
#add8e6
#87cefa
#4682b4
#00008b
#000000

Midday V4

#ffffff
#e7f5fe
#87cefa
#66a8d7
#4682b4
#23415a
#181818

Midnight V3

#000000
#191970
#483d8b
#663399
#9370db
#191970
#ffd700

Midnight V4

#000000
#191970
#312a85
#624db0
#9370db
#e6dff5
#ffffff

Spring V3

#ffffff
#f0fff0
#98fb98
#3cb371
#008000
#006400
#000000

Spring V4

#ffffff
#eafeeb
#98fb98
#4caf4c
#006400
#003200
#181818

Summer V3

#ffffff
#fff0f5
#d8bfd8
#dda0dd
#ba55d3
#663399
#000000

Summer V4

#ffffff
#f8ecf8
#dda0dd
#cb7ad8
#ba55d3
#7c2c7c
#181818

Sunrise V3

#ffffff
#fffacd
#ffd700
#ff8c00
#ff4500
#a52a2a
#000000

Sunrise V4

#ffffff
#fff7cd
#ffd700
#ff8e00
#ff4500
#7f2200
#181818

Sunset V3

#ffffff
#ffe4e1
#ffb6c1
#f08080
#dc143c
#8b0000
#000000

Sunset V4

#ffffff
#fef1f3
#ffb6c1
#ee657e
#dc143c
#6f091e
#181818

Winter V3

#ffffff
#f0f8ff
#e6e6fa
#b0c4de
#778899
#2f4f4f
#000000

Winter V4

#ffffff
#eff3f9
#b0c4de
#94a6bb
#778899
#3b444c
#181818

 
—Scott

Category: New Features • Just for Fun

Categories

  • Uncategorized
  • New Features
  • Bug Squashing
  • Just for Fun
  • Web Design & Development
  • Translation
  • Deep Dives

Recent Posts

  • ICS Calendar Pro 5.10.0 and ICS Calendar 11.5.9 updates April 24, 2025
  • Big improvements to ICS Events in versions 5.9.0 and 5.9.1 February 26, 2025
  • Happy Holidays from Room 34! December 8, 2024
  • Update to version 5.6.1.1 ASAP to resolve possible database performance issues introduced in 5.6.0 November 14, 2024
  • ICS Calendar Block is officially deprecated in version 5.6, will be removed in version 6.0 November 7, 2024

Related Links

  • Room 34 Creative Services
    Developer of ICS Calendar
  • Underdog of Perfection
    Room 34’s general blog
  • More Plugins by Room 34
    Available in the WordPress Plugin Directory

Room 34 Creative Services, LLC

  • Facebook
  • YouTube
  • Bandcamp
  • Room 34 Creative Services, LLC
  • Minneapolis, Minnesota 55406 USA
  • info@icscalendar.com
  • More WordPress Plugins
  • Privacy Policy
  • Terms & Conditions

Copyright © 2025 Room 34 Creative Services, LLC. All rights reserved.
"ICS Calendar", "ICS Calendar Pro", "ICS Events", the ICS Calendar logo and ICS icon are trademarks of Room 34 Creative Services, LLC.

https://icscalendar.com/on-the-futility-of-naming-colors

This website uses cookies solely for necessary functions, such as accessing your account orders and license details. Accept to continue or find out more in our Privacy Policy.

Accept & Continue