ColorFlowTools

Color Picker

This color picker lets you choose a single color and read every value it maps to. Drag the native picker or type a HEX, RGB, or HSL value, and all fields stay in sync in real time. An alpha slider adds transparency, and a preview compares your current color with the previous one so you can judge small adjustments. Copy HEX, RGB, RGBA, HSL, HSLA, or a ready-made CSS variable with a single click, and save colors you want to reuse to your recent list. If your browser supports the EyeDropper API, an optional button lets you sample any pixel on your screen. Everything runs locally, so nothing you pick is sent anywhere.

How to use the Color Picker

  1. Choose a starting color. Use the picker square, type a HEX code, or enter RGB/HSL values. All formats update together.
  2. Adjust transparency. Move the alpha slider if you need a translucent color; the RGBA and HEX8 values update automatically.
  3. Copy the value you need. Click any copy button to place HEX, RGB, HSL, or a CSS variable on your clipboard.
  4. Save or explore. Add the color to your recent list, or send it to a palette or harmony generator.

Examples

  • Match a brand blue: Type #1e90ff, then copy the rgb() value for a canvas or SVG fill that needs numeric channels.
  • Create a translucent overlay: Pick a dark color, drop the alpha to about 0.6, and copy the rgba() string for a modal backdrop.

How it works

A color picker maps one color across multiple coordinate systems. HEX and RGB describe the same red, green, and blue channels; HSL and HSV re-express them as hue, saturation, and lightness or value. Because these spaces round to different precisions, converting back and forth can shift a channel by a unit, which is expected and visually invisible.

Common use cases

  • Locking in an exact color before adding it to a stylesheet or design token
  • Converting a single color between formats without a full converter page
  • Grabbing a base color to feed into palette and harmony tools

Privacy

All color calculations run in your browser. Nothing you enter is sent to a server. Saved palettes and recent colors are kept only in your browser’s local storage and can be cleared at any time.

Frequently asked questions

How do I copy a color as a CSS variable?

Click the “CSS variable” copy button. It copies a custom property like --color: #1e90ff; that you can paste into your :root block.

What is the alpha value?

Alpha controls opacity from 0 (fully transparent) to 1 (fully opaque). When alpha is below 1, the picker also gives you an 8-digit HEX and rgba() value.

Why can’t I see the screen eyedropper button?

The screen eyedropper uses the EyeDropper API, which only some browsers support. When it is unavailable, the button is hidden rather than shown as broken.

Are my colors saved anywhere online?

No. Recent colors are kept only in your browser and are never uploaded. Clearing your browser data removes them.

Color Palette Generator Generate color schemes with lock, reorder, and export to CSS, JSON, SVG, and PNG. Color Name Finder Find the closest CSS color name for any color, with similar colors and a palette. HEX to RGB Converter Convert a HEX color code to RGB and RGBA values instantly, with validation. Tint and Shade Generator Generate tints and shades of a color as a scale, with WCAG text hints and export. Complementary Color Generator Find the complementary color of any base and preview the pairing in a UI.