Color picker

This page turns a color you choose into three tokens you can paste into CSS, Figma notes, or a brand sheet: HEX, RGB, and HSL. Click the large circular swatch to open your browser’s native color control. As the value changes, the three rows on the right update and each row has a Copy button. FlashKit does not store the color, does not sync a palette, and does not need an account. Closing the tab drops the selection.

HEX is the six-digit form the native input already uses (#RRGGBB). RGB splits those pairs into 0–255 channels. HSL is derived from RGB: lightness is the average of the max and min channel, saturation depends on that range, and hue walks around the color wheel in degrees 0–360. The default sample is #2563EB — a strong blue — which becomes rgb(37, 99, 235) and hsl(221, 83%, 53%). Conversion is ordinary arithmetic in this tab, not a design-system API.

Worked example. Pick a mid gray such as #808080. RGB is rgb(128, 128, 128). HSL is hsl(0, 0%, 50%) because every channel is equal, so hue is defined as 0 and saturation is 0. Now pick #FF0000. RGB is rgb(255, 0, 0) and HSL is hsl(0, 100%, 50%). Same hue number, completely different color, because saturation and lightness changed. That is why you copy the format your tool actually wants instead of converting by eye.

This is a token copier, not a palette generator, contrast auditor, or eyedropper for photographs. Check readable text with the WCAG contrast checker before you ship a foreground on this background. Build favicons and QR codes with a pair that still works at 16 pixels. Meta descriptions and Open Graph tags do not need a color from this page; those guides are linked when you are tagging a URL rather than a swatch.

The UI matches this copy. The circle is both preview and hit target; an invisible color input sits on top of it. HEX is shown in uppercase. RGB prints as rgb(r, g, b). HSL prints as hsl(h, s%, l%). Copy writes that exact string to the clipboard and the button reads Copied! for two seconds. There is no alpha/transparency field, no CMYK, and no named CSS colors (tomato, rebeccapurple). Related tools: WCAG contrast, favicon generator, meta tag generator, QR generator.

How to Use

  1. Click the circular swatch to open the browser color control and choose a color.
  2. Read HEX for CSS custom properties, RGB for some design tools, and HSL if you tint programmatically.
  3. Press Copy on the row you need. The button confirms for two seconds.
  4. Paste the token into your stylesheet or design notes. This tab is not a library.
  5. Check contrast with the WCAG tool before you put small text on the color.

Key Features

  • Native color control plus a large preview swatch
  • HEX, RGB, and HSL strings with one-click copy
  • Local conversion — no account and no palette upload
  • Default sample #2563EB so you can see the three formats immediately
  • Pairs with contrast, favicon, meta, and QR tools

How HEX, RGB, and HSL relate

  • HEX #RRGGBB is base-16. #2563EB is 0x25, 0x63, 0xEB → 37, 99, 235.
  • RGB is those same channels in decimal. CSS also accepts rgb() with spaces or commas; this page uses commas.
  • HSL is a different cylinder: hue in degrees, saturation and lightness in percent. Equal RGB channels always give saturation 0%.
  • This page does not emit HEX8, rgba(), or hsla(). If you need opacity, add it in CSS after you copy the opaque token.
  • Named colors and system colors (CanvasText, AccentColor) are not listed. Type them in your stylesheet if you need them.

Common ways people use this color picker

  • Grab a brand blue for a button and paste HEX into a CSS variable.
  • Hand an RGB triple to a teammate whose tool has no HEX field.
  • Nudge HSL lightness to draft a hover state, then re-copy HEX for production.
  • Pick a high-contrast pair, check it on the WCAG page, then generate a favicon or QR.
  • Note a token in a ticket. This page does not save a history — copy it out.

Limits, accessibility, and tips

  • The native picker UI differs by browser and OS. The three output strings stay the same.
  • There is no eyedropper for a photo on disk. Sample in your OS tool, then match the HEX here if you want the other formats.
  • Contrast is not computed on this page. A pretty swatch can still fail AA for body text.
  • Print and physical brand books use CMYK or spot colors. Do not treat these RGB numbers as press-ready.
  • Related guides: favicon how-to, favicons in 2026, and meta tags for SEO. Related tools: WCAG contrast, favicon generator, meta tags, QR codes.

Frequently Asked Questions

Can I pick a color from an image?

Not on this page. Use your operating system’s eyedropper or a desktop tool, then match the HEX here to copy RGB and HSL.

Does FlashKit store the colors I pick?

No. The current HEX lives in this tab only. Refreshing resets to #2563EB. Nothing is written to FlashKit or to localStorage.

What is the difference between HEX, RGB, and HSL?

They describe the same sRGB color three ways. HEX is compact for CSS. RGB is channel numbers 0–255. HSL is hue, saturation, and lightness — handy for tinting.

Does this check WCAG contrast?

No. Copy two tokens and open the WCAG contrast checker. This page only converts formats.

Can I copy rgba or a transparent color?

No alpha field. Copy the opaque HEX or RGB and add / 0.8 (or a fourth channel) in your own CSS.

Is this a full design-system or palette tool?

No. It copies one color at a time. Keep tokens in your repository or design file. Favicon and QR tools are linked when you need assets from a color pair.

Related Tools