skip to main content

The "MicroColors" Web app

Open the app in a new tab
For Chrome, Opera, and Edge
For Firefox and Safari

Then drag to a new window and re-size as you like.

Why "Micro"? After several earlier versions of this app, a low-vision colleague of mine asked for a color-picker that would work on his screen without overflow in either width or height. Here's the catch: he uses a 27" iMac, with screen resolution reduced to 1600px × 900px — then enlarges the page to 500%! (in Chrome, the only browser to go that high). After meeting that requirement, I realized that the same footprint, with minimal enlargement, would fit nicely in a corner of my own screen for handy reference in development work. So after adding a number of features that I wanted for personal use, here it is.

Versions: If you primarily use a mouse to navigate through a page, either version will be equally easy. If you'd prefer to use keyboard shortcuts rather than long tab-key sequences, you'll be happier in Chrome.

Main screen

Settings: Any settings that you change—tooltips, sliders, HSL/RGB, preset colors, etc.—are saved in local storage (not "cookies"!) of the browser that you are using, and restored when the page is reloaded. All modern browsers appear to support this; however, you may have to consult the browser's documentation to make sure that settings will permit it to be used.

Shortcut keys: Any time you are in this screen, "?" will bring up the info/settings screen, "&" will bring up the save/replace screen, and "esc" will close/cancel either one. Chrome, Opera, and Edge only: Except when focus is on either of the hex inputs, h,s,l,r,g,b will set focus directly on the number inputs for background hue, saturation, light, red, green, or blue. The same keys in upper case (shift+key) will do the same for text inputs. Any intermediate tab selection (for example HSL/RGB) will be done automatically. Keys c or C will remotely toggle the Presets/Vision button on the Color line. (Keys p or P and v or V also work, depending on the current display.)

First line:

Color line (Vision controls):

Color line (Preset controls):

Display area: shows current text and background colors.

Hexidecimal control line:

Color control input area: select 2-line or 3-line view with "Sldrs: [On] [Off]" buttons on settings screen.

Information/Settings screen

Control line:

Information area: key points about the app.

Save/Replace Preset screen

Testing

This app has been tested with macOS 10.13.6 in **Firefox 78.0.2, *Opera 68.0.3618.173, *Chrome 83.0.4103.116, and **Safari 13.1.1; with macOS 10.15.4 in **Firefox 78.0.2 and *Chrome 83.0.4103.116; with Windows 10 in *Edge 83.0.478.61, *Chrome 83.0.4103.116 and **Firefox 78.0.2. It actually works (awkwardly) on iOS 13.5.1 in Safari, but is not designed for mobile device use.
* MicroColorsC.html
** MicroColorsF.html