Color selection has never been easier!
Heath B. was quite the talented student and took many of our TNT courses. Before we ever taught about 'sliders' (input tags with a 'range' type) he was on it and independently developed this really cool app.
We've adapted it to our updated site (with Boostrap 5), but the logic and original design is Heath's.
Take a peek at an earlier design. His inspiration(?!) was a color design app without sliders that was featured in a more primitive TNT installment. Check it out, but don't laugh too hard.
It's sometimes helpful to visualize colors via the color wheel to see how they are related to one another.
With BS5, color selection is actually easier. To see it in action, load the TopoMap app select a map and then click the 'Color Picker' color well to see a more compact color selection technique.
Chrome users! Confirm the color numbers with the Colorzilla extension if you have it. Notice that there are several 'modes' in which to communicate color: RGB, HSL, HSV and HEX. The color summaries below the color swatch area may be used as CSS property-values.
Danger Will Robinson! This app uses an HSL color mode, while P5JS also uses an HSB color mode which is different. If you want to see a comparison between all the various color modes, Colorizer is a great place to investigate!
Note: In June 2025, we updated this app (using Copilot) to include synchronized controls featuring all methods of designing web colors. Be sure to compare and contrast with this 'original' app!
Hexadecimal: #