skip to main content

The "MicroColors" Web app

Open the app in a new tab
Then drag to a new window and re-size as you like.
(Updated 7/26/2022)

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.

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: "?" will bring up the info/settings screen, "&" will bring up the save/replace screen, "esc" will close/cancel either one.
Toggles: "^" (shift-6) will reverse the displayed colors (regardless of Reverse button visibility), "%" will turn tooltps on/off, and "$" will change between 2-line and 3-line inputs. Keys c or C will toggle the Presets/Vision button on the Color line.
Inputs: Except when focus is on either of the hex inputs, h,s,l,r,g,b,x will set focus directly on the inputs for background hue, saturation, light, red, green, blue, hex. 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.
Also available: a text listing of these keys. (new tab)

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.