Color picker

Colour picker is a free tool that lets you select a color from a visual wheel and obtain a formatted color value for use in code, design files, or configuration data.

Why use a visual picker during interface work?

A visual picker helps when you need to adjust a color by appearance instead of editing channel values manually. It is useful for debugging an interface, reviewing third-party color data, or choosing a value before a deployment.

Select a color through the Color field, then use the returned notation that matches the destination. For example, a CSS stylesheet commonly accepts hexadecimal, RGB, or HSL notation. A graphics application or API may expect a different representation of the same color.

• Compare a proposed background with surrounding interface elements.
• Translate a color from a design reference into a CSS-compatible value.
• Inspect unfamiliar RGB or HSL data from an API response.
• Make a small hue or saturation adjustment without calculating channels by hand.
• Standardize a one-off color before adding it to a design token file.

A color picker chooses and represents color. It does not determine whether that color matches a brand specification, passes an accessibility requirement, or is supported by every parser that may receive it.

How do you interpret color channel values?

Read each result according to the color model it uses. Different notations can describe the same visible color, but their components have different meanings.

Hex notation commonly uses six hexadecimal digits after a number sign. The pairs represent red, green, and blue in that order. Each pair ranges from 00 through FF. Three-digit hex is shorthand in which each digit is repeated, so #369 expands to #336699.

RGB expresses the red, green, and blue channels numerically. In the familiar 8-bit form, each channel ranges from 0 through 255. HSL uses a hue angle with saturation and lightness percentages. HSL can be easier when the task is to make a color lighter, darker, duller, or more saturated while retaining roughly the same hue.

Some color syntaxes include an alpha component. Alpha controls opacity rather than changing the underlying red, green, and blue channels. Depending on the notation, it may appear as a decimal from 0 to 1, a percentage, or an additional hexadecimal pair.

Equivalent color values in practice

A single sRGB color can be written in several ways. For a muted blue, these values are equivalent:

Hex input: #336699

RGB output: rgb(51, 102, 153)

HSL output: hsl(210, 50%, 40%)

A warm yellow provides another small example:

Hex input: #FFCC00

RGB output: rgb(255, 204, 0)

HSL output: hsl(48, 100%, 50%)

Conversion does not create a new color when both formats describe the same color space and channel precision. It changes the color's notation. If you already have a valid value and only need another representation, the Colour converter may be more direct than selecting the color again by eye.

What can go wrong after you copy the value?

A common failure is placing a valid color in syntax that expects another format. The picker is not a full CSS, JSON, SVG, or application configuration validator, so it does not diagnose the surrounding document.

• Missing number sign. A bare value such as 336699 is not a CSS hex color. CSS requires #336699.
• Spaces inside hex notation. Spaces may surround a CSS value, but #33 66 99 is not one hex token.
• Wrong alpha order. CSS eight-digit hex uses #RRGGBBAA. Some native application formats use #AARRGGBB instead.
• Mixed RGB grammars. Legacy comma-separated rgb() syntax and modern space-separated rgb() syntax have different rules, especially when alpha is present.
• Unquoted configuration data. A value beginning with # must be quoted when stored as a JSON string. JSON also requires quoted property names and does not allow trailing commas.
• Unsupported notation. A browser may accept a modern CSS color form that an older email client, graphics package, or embedded parser rejects.

RGB and HSL values need the punctuation and units required by their CSS color syntax. Accented or non-Latin characters are not part of numeric hex, RGB, or HSL notation. An empty value usually makes the containing CSS declaration invalid, while an extremely long value may indicate that unrelated text was copied with the color.

When is using a color picker unnecessary?

Using a picker is unnecessary when the exact approved value already exists or when only a machine will consume the value without visual review. Re-selecting a known design token by eye can introduce a small, unintended difference.

Skip the operation when a stylesheet already references a variable such as a documented brand token. Conversion between color notations is also unnecessary if the destination accepts the source notation. Changing #336699 to its RGB equivalent adds no information in that case.

A picker is also the wrong tool for comparing foreground and background contrast, extracting a pixel from an image, or converting between device-specific color profiles. Those tasks require contrast calculations, image sampling, or color-managed software.

Frequently asked questions

Is my selected color uploaded to a server?

No. The work is done entirely in your browser, and the input is never uploaded to a server. This also means the selection does not need server-side processing to produce its result.

Can the picker sample a color from a screenshot?

No image input is provided, so this tool does not sample pixels from an uploaded screenshot. Use an image editor, browser eyedropper, or operating system color-sampling feature first, then bring the resulting value into the picker if you need to adjust it.

Can I use the selected value in an SVG file?

Yes, standard CSS color values can commonly be used for SVG attributes such as fill and stroke. Support depends on the SVG renderer and the specific color syntax, so basic hex or RGB is often the safer choice for files used across different applications.

Does selecting a color confirm that text will meet WCAG contrast requirements?

No. The contrast ratio depends on both the foreground and background colors. Text size and weight affect which WCAG minimum ratio applies. Run the final pair through a contrast checker rather than judging compliance from either color alone.

Why does eight-digit hex fail in some software?

Eight-digit hex support and channel order vary outside modern CSS. Some applications expect alpha first, some expect alpha last, and others accept only six-digit hex. Check the destination's documentation and use the legacy comma-separated rgba() alias of rgb(), if supported, or remove alpha and use six-digit hex when its parser does not accept the value. Removing alpha changes transparency.