Color Picker

Choose and convert colors for design and development.

Use cases

Use case 1: Match brand HEX values and copy RGB/HSL for CSS.

Use case 2: Sample accent colors quickly before testing contrast and palette combinations.

Selected Color

#3B82F6

Color Formats

HEX:#3B82F6
RGB:rgb(59, 130, 246)
HSL:hsl(217, 91%, 60%)

Real example

Input #3b82f6 returnsrgb(59, 130, 246) andhsl(217, 91%, 60%), ready for design tokens or CSS variables.

Related Design & UI Tools

More free design and color utilities:

WCAG Contrast Checker

Check foreground and background color contrast for AA & AAA.

Color Palette Generator

Generate color palettes from one base color.

Design & UI Tools

Browse gradients, shadows, and more design utilities.

Also see Developer Tools for code and encoding utilities.

By Muhammad Abdullah Rauf · Founder, EverydayTools.proUpdated 2026

Workflow guides

Step-by-step chains that connect related tools for common tasks.

Pick a color for CSS

  1. Click on the color spectrum or drag the hue slider to select your desired color.
  2. Read the HEX value for static CSS color properties, or the RGB value for rgba() opacity declarations.
  3. Click the copy icon next to your required format to send the value to your clipboard.

Advertisement

Frequently Asked Questions

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

HEX (#rrggbb) is a 6-character hexadecimal code used primarily in CSS and design software — e.g. #1a73e8. RGB specifies red, green, and blue channels as numbers 0–255 — e.g. rgb(26, 115, 232). HSL specifies hue (color angle, 0–360°), saturation (vividness, 0–100%), and lightness (brightness, 0–100%) — e.g. hsl(217, 89%, 51%). HSL is most intuitive for adjusting colors (increase lightness to make lighter, decrease saturation to make grey).

Can I convert a HEX code to RGB?

Yes. Paste or type a HEX code into the HEX input field and the tool immediately shows the equivalent RGB and HSL values. Conversion formula: split the 6 hex digits into pairs, convert each pair from hex to decimal. #1a73e8 → R=26, G=115, B=232.

How does the eyedropper tool work?

The eyedropper uses the browser's EyeDropper API (supported in Chrome, Edge, and Opera) to let you sample any pixel on your screen. Click the eyedropper icon, then click anywhere — including outside the browser — and the tool captures that pixel's color. Note: eyedropper is not supported in Firefox or Safari.

Is this tool free?

Yes — completely free with no signup and no usage limits.

Related Tools

More free tools for the same workflow.

Color Palette Generator

Free color palette generator — create complementary, analogous, triadic, and monochromatic palettes from any base color. Copy HEX codes instantly. No signup.

Color Contrast Checker

Free color contrast checker — test text and background color combinations for WCAG AA (4.5:1) and AAA (7:1) compliance. Essential for accessible web design. No signup.

Advertisement