Color Picker

A color picker resolves one color into every format a design or development workflow needs at once: HEX, RGB, RGBA, HSL, and HSLA, with a live swatch and copyable output strings for CSS, design software, or documentation.

HEX packs a color into a three-digit shorthand (#F0C) or six-digit value (#FF00CC), with or without the leading hash. RGB states red, green, and blue directly as channel values from 0 to 255. HSL describes the same color by hue (0 to 360 degrees around the color wheel), saturation (0 to 100), and lightness (0 to 100), which is often easier to reason about when building related shades of one base color. An alpha channel from 0 to 1 sets transparency and appears in the RGBA and HSLA outputs; 0 is fully transparent and 1 is fully opaque.

Settings holds an uppercase/lowercase toggle for HEX output (#FF00CC versus #ff00cc) and an auto-copy option that copies the HEX value to the clipboard on every new selection. Recently selected colors persist in a recent-colors list, so a project's palette does not need to be re-derived from scratch across sessions.

The hex code #FF00CC breaks into three pairs: FF, 00, and CC. Each hexadecimal pair converts to decimal as (first digit x 16) plus the second digit, where A to F stand for 10 to 15. FF is 15 x 16 + 15 = 255, 00 is 0, and CC is 12 x 16 + 12 = 204, giving the equivalent RGB value rgb(255, 0, 204). With alpha left at its default of 1, the same color as RGBA is rgba(255, 0, 204, 1).

Identify, convert, and share color values across formats. Designers, developers, and content creators rely on the picker when building websites, preparing design specifications, or matching brand colors without leaving the browser.

• Web Development: Convert a HEX brand color like #3366CC to its RGB equivalent (rgb(51, 102, 204)) for CSS rgba() declarations with custom transparency.
• Graphic Design: Match a color from a client specification provided in HSL and convert it to HEX for tools that only accept hexadecimal input.
• Brand Guidelines: Generate every required format (HEX, RGB, RGBA, HSL, HSLA) from a single brand color to populate a style guide or design system.
• Accessibility Testing: Pick foreground and background colors to obtain exact values for contrast ratio checks in dedicated audit tools.
• Email Marketing: Convert colors between formats for compatibility across email clients that support different CSS color syntaxes.
• Presentation Design: Use the recent colors palette to maintain a consistent set while building slide decks or marketing materials.
• Education: Explore how changes in hue, saturation, and lightness map to RGB channel values to build intuition about digital color representation.
• Print Preparation: Identify precise RGB values from a visual selection to communicate accurate specifications to print vendors who require numeric definitions.
• Data Visualization: Build sequential and diverging palettes by stepping through HSL lightness values, then export each stop as HEX or RGB for use in chart libraries, dashboards, and infographics.
• UI Theming: Define semantic tokens like primary, surface, accent, success, and error from a single base color, then capture the converted values in design tokens that downstream code, Figma, and documentation consume.

Match the format to the medium. HEX is compact and dominant in CSS, RGB and RGBA support transparency in scripts and canvas drawing, HSL and HSLA make it easier to reason about hue and lightness when building related shades, and named colors stay readable in marketing copy. A persistent recent-colors list keeps a project's full color story available without re-deriving values already established.