Uwarp

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.

  1. Hue on the horizontal axis: Move left and right to sweep through the hue range and find the base tone you want.
  2. Lightness on the vertical axis: Move up and down to lighten or darken the color while keeping hue and saturation in balance.
  3. Saturation with scroll: Use the scroll wheel or trackpad to increase or decrease saturation for finer control.
  4. HEX output: See and copy HEX values suitable for HTML, CSS, Figma notes, and design handoff.
  5. Minimal interface: A single canvas-style interaction so you spend time on color, not on menus.
  6. Works in the browser: 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.

  1. Set hue: Drag or move horizontally to choose the hue you want as the starting point.
  2. Adjust lightness: Move vertically to make the color lighter toward white or darker toward black.
  3. Tune saturation: 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.

  1. Lock contrast early: After choosing a brand hue, check text and icon contrast on real backgrounds, not only the swatch.
  2. Pair with a palette tool: Use Colordot to nail a primary HEX, then build harmonious sets in a dedicated palette generator if needed.
  3. Name your exports: 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.

  1. Front-end developers: Quick HEX values while theming components or debugging CSS colors.
  2. UI designers: Exploring hue and lightness before refining in a full design file.
  3. Indie makers: Shipping landing pages without opening a heavy desktop app for every tweak.
  4. Students: 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.

  1. Low cognitive load: Gestures map to one concept each, so you do not hunt through tabs.
  2. Fast iteration: Small movements update the color immediately for rapid A/B comparisons.
  3. Free web access: Use the in-browser experience without a subscription for basic picking.

Technical notes

How Colordot fits into a typical design-to-code workflow.

  1. HEX-focused workflow: Output centers on HEX codes widely supported in CSS and design tools.
  2. Browser-based: Requires a modern browser; behavior may depend on pointer and scroll hardware.
  3. Companion app: hailpixel also offers a Colordot app for iOS for picking on mobile devices.

Frequently Asked Questions

Have questions? We have answers.