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.
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.)
- [?] button: brings up information and settings screen, described below.
- Contrast box (read only): Luminance ratio between text and background, computed according to method specified. Color coded with green = good for all text; yellow = okay for large text; red = bad for any text. Colors for SAPC are a "guesstimate."
- Method selection dropdown:
Color line (Vision controls):
- [Presets] button: changes line to that set of controls.
- [Reverse] button: reverses display colors as visually shown.
- Vision dropdown:
- Normal vision
- Greyscale version maintains contrast ratio of colors.
- Three medical conditions simulate red, green, blue color blindness.
Color line (Preset controls):
- [Vision] button: changes line back to that set of controls.
- [A]–[L] buttons: select preset color combinations. Identifying tooltips will always be shown.
- [+] button: cycles through three sets of four preset color buttons.
- [Save] button: brings up screen to replace any preset colors with those currently shown in the display area.
Display area: shows current text and background colors.
Hexidecimal control line:
- 2 "#" boxes (inoperative): these simply identify hex inputs & colors for text (left) and background (right).
- 2 text inputs: enter 3 or 6 hex characters, upper or lower case, with or without leading "#".
- 2 [!] buttons: Set color to the hex value that you've entered in the text box.
- [HSL] [RGB] buttons: toggle inputs (in area below) to control hue, saturation, light or red, green, blue.
Color control input area: select 2-line or 3-line view with "Sldrs: [On] [Off]" buttons on settings screen.
- Two lines: text and background number inputs for selected HSL or RGB model.
- Three lines: toggle [Text] [Bkgd] for range (slider) inputs plus numbers, in selected HSL or RGB.
- [Close] button; the [esc] key will also close this screen.
- Tips: [On] [Off] buttons: if On, tooltips will appear on mouseover or focus to explain some of the page elements. Even if Off, tooltips that identify preset buttons will still be shown.
- Sldrs: [On] [Off] buttons: set view of color control input area (see above).
Information area: key points about the app.
Save/Replace Preset screen
- [Cancel] button: active until [Save] is clicked; [esc] key also cancels this screen.
- [A]–[L] buttons: select where to save current colors. When clicked, that button's tooltip text is focused for editing.
- Unlabeled (but titled) text box: tooltip description for the selected button; current text value is automatically selected.
- [Save] button: completes the operation and closes the screen.
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.