Utill.net

Color Picker

HEX, RGB & HSL

Pick a color and convert between HEX, RGB, and HSL for CSS and design tokens. Supports #rgb shorthand—no alpha. Free online picker, no signup, browser-only.

This conversion runs only in your browser — nothing is uploaded.

59
130
246
  • HEX#3b82f6
  • RGB59,130,246
  • HSL217, 91%, 60%

Opaque colors only (HEX / RGB / HSL). No alpha channel — paste #rgb shorthand or full #rrggbb.

  • HEX
  • RGB
  • HSL

What is this tool?

This color picker turns a visual selection (or typed HEX) into CSS-ready HEX, RGB, and HSL values. The three formats describe the same opaque color in different coordinates used by stylesheets, design tokens, and documentation.

HEX is compact for tokens (#3b82f6). RGB exposes 0–255 channels. HSL (hue, saturation, lightness) is often easier when nudging related UI states. CSS #rgb shorthand is accepted and expanded to six digits.

Use it to copy values into CSS, sync a mock with implementation, or document a single brand swatch. For harmony sets from one seed, use the Color Palette Generator instead.

Common use cases

  • Copy a HEX/RGB/HSL token from a mock into CSS or a design-system file
  • Expand #rgb shorthand from older stylesheets into full #rrggbb
  • Tune RGB sliders while watching HEX and HSL stay in sync

How to use

  1. Use the native color control or RGB sliders; the large swatch updates live.
  2. Or type HEX (#39f or #3399ff). Invalid or alpha hex shows an error.
  3. Press Sample to load #39f → #3399ff. Clear restores the default blue.
  4. Copy HEX (toolbar) or copy RGB/HSL from the format rows.

Examples

Input / settingOutputNotes
#3b82f6 (default)rgb(59, 130, 246) · hsl(217, 91%, 60%)Tailwind-style blue as CSS values.
#39f (Sample)#3399ff · rgb(51, 153, 255)CSS #rgb shorthand expanded.
#000#000000 · hsl(0, 0%, 0%)Black; 3-digit and 6-digit HEX match.
#ffffffrgb(255, 255, 255) · hsl(0, 0%, 100%)White; saturation is 0 in HSL.

Practical pitfalls

  • No alpha: #rgba, #rrggbbaa, rgba(), and hsla() are out of scope—write opacity in CSS separately.
  • HEX and HSL are rounded for display; tiny channel tweaks can leave HSL hue unstable near gray (low saturation).
  • Matching text/background contrast (WCAG) is not calculated here—verify in your design tool or an accessibility checker before shipping UI.

References

Last reviewed: 2026-07-27

Frequently asked questions

Which formats can I copy?
HEX (#rrggbb), CSS rgb(), and CSS hsl(). Values update live as you move the picker or RGB sliders.
Does
Yes. Typing #39f expands to #3399ff (each digit is doubled). Use Sample to see that case. Forms with alpha (#rgba or #rrggbbaa) are rejected.
Is there an alpha / opacity channel?
No. This picker is opaque only. For rgba()/hsla() or 8-digit hex, use a design tool or write the alpha yourself in CSS.
Is anything uploaded?
No. Color conversion runs only in your browser.