Colordot: a color picker for humans
Pick colors in the browser with simple controls: horizontal movement for hue, vertical for lightness, and scroll for saturation. Colordot by hailpixel outputs HEX for web and design work.
What is Colordot?
Colordot is a lightweight color picker built by hailpixel. It focuses on a small set of gestures so you can explore hue, lightness, and saturation without dense panels or jargon. The tool is designed for quick experimentation when you need a HEX value for CSS, UI mockups, or brand exploration. It complements palette sites by giving you direct control over a single color in HSL-style space before you copy the code.
Key features of Colordot
What makes this picker easy to use for everyday design and development tasks.
Move left and right to sweep through the hue range and find the base tone you want.
Move up and down to lighten or darken the color while keeping hue and saturation in balance.
Use the scroll wheel or trackpad to increase or decrease saturation for finer control.
See and copy HEX values suitable for HTML, CSS, Figma notes, and design handoff.
A single canvas-style interaction so you spend time on color, not on menus.
No install required for the web experience; use it alongside your stack in any modern browser.
How to use Colordot
Three gestures map to the main dimensions of the color.
Drag or move horizontally to choose the hue you want as the starting point.
Move vertically to make the color lighter toward white or darker toward black.
Scroll to add or remove chroma until the color feels right for your layout.
Tips for better picks
Practical habits when using a minimal HSL-style picker.
After choosing a brand hue, check text and icon contrast on real backgrounds, not only the swatch.
Use Colordot to nail a primary HEX, then build harmonious sets in a dedicated palette generator if needed.
Paste HEX into your design tokens or CSS variables with a consistent naming scheme for handoff.
Who is Colordot great for?
Roles that need a fast, low-friction color grabber.
Quick HEX values while theming components or debugging CSS colors.
Exploring hue and lightness before refining in a full design file.
Shipping landing pages without opening a heavy desktop app for every tweak.
Learning how hue, lightness, and saturation relate in a hands-on way.
Benefits of using Colordot
Why a minimal picker still matters next to large inspiration sites.
Gestures map to one concept each, so you do not hunt through tabs.
Small movements update the color immediately for rapid A/B comparisons.
Use the in-browser experience without a subscription for basic picking.
Technical notes
How Colordot fits into a typical design-to-code workflow.
Output centers on HEX codes widely supported in CSS and design tools.
Requires a modern browser; behavior may depend on pointer and scroll hardware.
hailpixel also offers a Colordot app for iOS for picking on mobile devices.
Frequently Asked Questions
Have questions? We have answers.