Colour picker

Colour picker is a free tool that lets you select a colour in your browser and obtain its value in the required format.

What does a colour picker return?

A colour picker returns a numeric representation of the colour selected on the wheel. The same visible colour can be expressed in several formats, most commonly hexadecimal, RGB, RGBA, HSL or HSLA.

These formats describe colour in different ways. Hexadecimal and RGB specify red, green and blue channel values. HSL uses hue, saturation and lightness, which can make systematic adjustments easier. Formats with an alpha channel also describe opacity.

• Hexadecimal values use a hash followed by hexadecimal digits, such as #336699.
• RGB values usually express each channel as a number from 0 to 255, such as rgb(51, 102, 153).
• HSL values describe a hue angle and percentage values for saturation and lightness, such as hsl(210, 50%, 40%).
• RGBA and HSLA add transparency. An alpha value of 0 is fully transparent and 1 is fully opaque.

CSS also supports named colours, but names cover only a fixed set and are less suitable for exact design tokens. Generated numeric values are usually easier to transfer between design systems, stylesheets and application code.

How do I use the colour picker?

Select the Color field, choose the required point on the colour wheel, then use the resulting value in the format needed by your application. The work is done entirely in your browser, and the colour input is never uploaded to a server.

For an existing interface, begin with the format already used in the codebase. This avoids unnecessary colour conversions and keeps pull requests easier to review. When inspecting third-party data, identify whether its values include opacity before replacing them with an apparently equivalent colour.

A practical pre-deployment workflow is to select or reproduce the intended colour, copy the appropriate notation, and check it in the actual component state. Test normal, hover, focus and disabled states separately because opacity and inherited styles can change the final rendered result.

Reading the result

Read the result according to its colour model and check any alpha component before copying it into code. In RGB, each channel value controls the intensity of its respective red, green or blue component. In HSL, hue runs around a colour wheel, while saturation controls colour intensity and lightness controls the balance between black and white.

Colour syntax is strict when used in CSS or structured data. Common mistakes made during manual editing include:

• omitting the leading hash from a hexadecimal CSS value;
• using five or seven hexadecimal digits, which are not valid standard hex lengths;
• placing percentages where an RGB implementation expects channel numbers;
• forgetting commas in legacy RGB syntax or mixing incompatible old and modern syntax;
• copying an alpha-enabled value into software that only accepts six-digit hex;
• using a decimal comma, such as 0,5, where CSS requires a decimal point, such as 0.5.

The picker generates colour values rather than acting as a general CSS validator. It does not prove that a surrounding declaration, JSON document or theme file is valid, so syntax errors outside the colour value still need to be checked by the relevant parser or development tool.

Worked colour conversions

A six-digit hexadecimal colour maps pairs of digits to red, green and blue. For example, the following representations describe the same opaque colour.

Hex value #336699

RGB equivalent rgb(51, 102, 153)

HSL equivalent hsl(210, 50%, 40%)

Three-digit hex is shorthand. Each digit is repeated to form a six-digit value.

Short hex value #fff

Expanded hex #ffffff

RGB equivalent rgb(255, 255, 255)

Eight-digit hex includes alpha after the red, green and blue pairs. Take care with systems that use a different channel order or do not accept eight-digit notation. A visually identical solid colour can also produce a different result when opacity is applied over another background.

Which colour format should I choose?

Choose the colour notation already expected by the destination unless there is a clear reason to change it. Six-digit hex is compact and common in CSS variables and design token files. RGB is convenient when software exposes channel values directly, while HSL is useful when creating related colours by adjusting lightness or saturation.

• Use six-digit hex for an opaque web colour when brevity and broad readability matter.
• Use eight-digit hex only when the target environment explicitly supports alpha in that notation.
• Use RGB or RGBA when working with individual red, green and blue channels.
• Use HSL or HSLA for programmatic theme variations based on hue, saturation or lightness.
• Use the Colour converter when you already have a value and need to translate it rather than choose a new colour visually.

Do not treat an on-screen RGB value as a print specification. Commercial printing may require CMYK values, an ICC colour profile, proofing and agreement with the printer. A mathematical conversion alone cannot guarantee that a printed colour will match a backlit screen.

When is picking or converting a colour unnecessary?

Picking or converting a colour is unnecessary when the existing value is already in the format required by the destination. Repeated conversion can introduce rounding differences, inconsistent letter casing or needless changes to source files.

It may also be better to keep a named design token such as a theme variable instead of replacing it with a literal value. Tokens preserve the relationship between components and allow a colour to be changed centrally. Likewise, a colour used only by a machine does not need a more human-readable representation unless someone must inspect or maintain it.

No colour picker can determine by itself whether a selection has sufficient contrast, fits a brand specification or remains distinguishable for people with colour-vision deficiencies. Check foreground and background combinations with a dedicated contrast tool and inspect the interface in context.

Frequently asked questions

Can I use the result in CSS variables?

Yes, provided the chosen notation is valid CSS for the browsers and build tools you support. Store the complete value in a custom property, then reference it with the var() function. If the project manipulates separate channels, it may be more convenient to store those channels according to the project's existing convention.

Why does the same colour look different on another screen?

Displays differ in calibration, brightness, panel technology and colour-gamut support. Browser colour management and the operating system's display profile can also affect rendering. A numeric match therefore does not guarantee identical physical appearance on every device.

Do upper-case and lower-case hex letters change the colour?

No. Hexadecimal digits A to F are case-insensitive, so #AABBCC and #aabbcc represent the same colour. Follow the casing convention used by the repository to avoid formatting-only changes.

Can a colour value contain accented or non-Latin characters?

Standard hexadecimal, RGB and HSL notation uses ASCII digits, letters and punctuation. Accented or non-Latin characters are not part of these numeric colour syntaxes. They may appear in surrounding variable names or metadata if the relevant language and file encoding permit them.

Is a transparent colour the same as no colour?

No. A fully transparent colour still has channel values, even though they are not visible by themselves. Those hidden channels can matter during animation, interpolation, compositing or later opacity changes, so preserve them when the application relies on such behaviour.

Should I round decimal channel values?

Round decimal colour channels and alpha values only to the precision accepted by the destination and needed for consistent output. Excessive precision makes values harder to review, while aggressive rounding can produce a small colour difference. After rounding, check the rendered component against its intended background and interaction states.