Dark mode and more

This could be considered an RFC of sorts.

It’s intended to be a starting point for professional designers to create a color standard for 4 different brightness modes of UI display – from near black to high contrast bright.

There are a set of 4 base optometry categories – Normal vision, Deutaranopia, Protanopia and Tritanopia. Each category has 4 basic scheme modes based on brightness. There are 2 modifiers, modifying 2 modes each. Each scheme has 4 hue offset options for gray colors.

In total, we have 4 vision categories, 4 base schemes, 4 modified schemes (equalling 8 schemes) with 4 hue offsets each. That’s 4x8x8, or 256 schemes. There are 8 grays, plus black and white, giving a total of 10 gray colors per scheme, or 2560 color value entries, with some colors to be duplicated.

The scheme names are based on daily solar cycles:
Daylight – "normal" light mode.
Sunset – Daylight plus orange mask.
Twilight – Dark & light grays, higher contrast, no black or white.
Dusk – Twilight plus orange mask.
Midnight – Darker than Twilight, lower contrast, no mask
Sunrise – Twilight with a blue mask
Morning – Lower contrast version of Daylight, white/black are offset slightly towards gray
Noon – Daylight, higher contrast, brighter hues and blue mask

The schemes have 4 color hue offsets. These hues allow for B&W grays, or offset to red, green or blue. This allows for a more comfortable experience for the user, if they prefer a slight color to the grays. This also allows for aesthetic integration with the rest of the color pallet used in the UI; color correction for monitor temperature differences; and user comfortability resolutions.

The schemes can be represented as:
normal – daylight – key (white)
normal – dusk – red
Deutaranopia – morning – blue
normal – midnight – key (black)

Ideally, there will be mechanisms in place for the use, and ommission of these color schemes. Once such ommission example would be for the display window for graphic artists and video editors. These professions rely on color accuracy for their jobs.

There would also be mechanisms in place for automatic controlled selection of schematic based on time of day and environmental light levels. Also to allow user-created scheme rotation sets which adjust based on time of day, light level and trigger events. There should also be the ability to permanently set a scheme by the user. The schemes should be toggleable for use with full screen video and games.

The four masked schemes should be used for circadian manipulation – blue to help the user wake up, stay awake and focus; orange to help the user to begin to relax after a long day, and which can help with computer use related sleep issues.

All effort should be made to create all 8 schemes available for the 3 categories of colorblind users as well. A set of grays, based on rgbk will be needed, preferably 8 grays, plus black and white, for the basic color schemes.  This will allow for enough contrast for monochromatic UIs, with true monochromatic settings eliminating all color hue, with a total of 256 different grays, where r,g,b are equal values.  A full-hue color scheme, representing all of the 8 bit rgba (for a total of 32 bit color) gamut can have the color hue decreased or eliminated, resulting in a high definition monochromatic display, and is easiest done with hardware, however, there is limited advantages of this compared to 256 grays with 256 alpha channels (resulting in 65,536 potential colors)  The focus here, however is to create a set of color pallets used for UI designers which can be used as the basis for basic display colors for all "color modes"

These schemes contain the basic grays used, and should be more than sufficient to provide a basis for any non-gray color theme for any OS, app or web design. There is also the potential for these schemes to be useful in print and other visual displays.

I have create an incomplete table of all optometry categories, masks, schemes and color hues. The normal vision category being the most complete, missing only the color values. Example values provided are just examples and may need to modified for any real world application.

The purpose of this table is to allow designers to quickly and easily create schemes for their project which will be 100% compatible in gray scale with other projects using the same standard schemes. However, this still leaves artistic space for non-gray accent and base colors, allowing for full themes to use any color atop of the base scheme. This should result in a total overall expeirence with mixed themes that feels natural and integrated. A mixed theme same scheme environment will allow for differnt programs and elements to have different colors atop of the same scheme. An example of this would be using VLC and Facebook Messenger on Windows, where the Dusk scheme is applied; Windows could then have white theme, VLC and orange theme, and Messenger a blue theme – however the window, background, text are all based on the Dusk scheme and so all UI elements use the same grays. This would carry between OSes, Desktop Environments and browsers, resulting in the same gays being displayed for the same scheme on all devices.

This, unfortunately, can still result in different hues presented to the view while using multiple monitors and displays, as there are differences between manufacturers, pixel colors, backlights, and color temperatures – as well as age affected color distortions. However, these issues can either be manually adjusted per monitor settings, or ignored.

The focus of this, again, is to provide a standard means of designers to have access to a set of color values to present their works in a unifed way. However, it would be much more ideal for APIs and libraries to be written for each OS, browser, and Desktop Environment (KDE, Gnome, Explorer, etc) where the program, app and web page are slave to the user’s setting, thus elimating any need for manual adjustment or bloated code bases for each element, window, app, etc. This would also be a user-optional system to use, with custom full themes being able to override the system theme/scheme, such as the case with Linux desktop environment theme packs.

Below is the incomplete image of an ascii table representation of this, with "normal vision" being the most complete, yet missing most of the color value data:

Leave a Reply

Your email address will not be published. Required fields are marked *