Colour Picker

What Colour Picker Does

Colour Picker helps you choose a colour visually and read the same choice as practical colour codes. The active swatch, value display and format selector make the result usable beyond the picker itself: a selected colour can be reviewed as HEX, RGB, HSL, HSV, OKLCH or CMYK, then copied in the format needed for CSS, UI documentation, design tokens or hand-off notes.

The main value is precision during exploration. A designer may start with an approximate hue, adjust it with the hue control, keep useful picked palette entries, and compare nearby variations before deciding whether the colour is ready for a button, border, chart accent or background. A developer may use Colour Picker as a HEX colour picker when the immediate task is to copy one clean value, then switch formats if the implementation needs RGB channels or HSL adjustments.

Colour Picker is also useful when a colour needs context. The visible panels show variations, harmonies, a blindness simulator, conversion values and a contrast checker area. Those panels reduce the risk of choosing a colour only because it looks attractive in isolation. A colour that seems strong as a swatch may need a softer variation for a large surface, a clearer contrast pairing for text, or a different format before it can be added to a design system.

How to Use Colour Picker

1. Choose or adjust the active colour until the main swatch shows the hue you want to inspect.
2. Use the Picked palettes slider to control how many saved palette entries remain visible while comparing options.
3. Use Add palette colour or Remove palette colour when you need to keep or reduce the picked colour set.
4. Open the format selector and choose Hex, RGB, HSL, HSV, OKLCH or CMYK before copying a value.
5. Move the hue slider when the active colour is close but needs a warmer, cooler or more saturated direction.
6. Review Colour Variations, Colour Harmonies, Blindness Simulator, Colour Conversion and Contrast Checker before deciding.
7. Copy the active colour value when one code is enough, or open Export Colours when a grouped set is needed.

Use the controls in a narrow order when accuracy matters. Set the colour first, choose the output format second, then review the surrounding panels. That order keeps the decision clear and avoids mixing a colour-choice problem with a format-choice problem.

Colour Code Formats Compared

Different formats describe the same colour in different ways. A HEX value is compact and common in web code. RGB shows the red, green and blue channel numbers directly. HSL is easier when the next step is adjusting hue, saturation or lightness. HSV and OKLCH can help with picker-style or perceptual thinking, while CMYK gives a print-oriented reference that should still be checked in professional print software.

Using a HEX Colour Picker Carefully

A HEX colour picker is most useful when the final destination is web or interface code. The compact value is easy to paste into CSS variables, component props, design-token files and style guides. Colour Picker makes that faster by pairing the active value with a copy action, but the copied code still needs a role in the design. A strong accent may work for a small icon and fail as a full-width background. A muted colour may look refined in a palette strip but disappear beside similar greys.

Before copying a HEX value, compare at least one lighter and one darker variation. If the colour is intended for text, badges, cards or buttons, review the contrast area rather than relying on the swatch alone. If the colour will be used with related accents, compare the harmony output so the final set has a clear relationship instead of a collection of unrelated values. For image-based sampling, Colour Picker From Image is a better starting point because it begins from pixels in an uploaded image rather than manual selection.

Practical Colour Picker Use Cases

• Interface accents: choose a button, focus ring, badge or icon colour and copy the exact HEX or RGB value needed for implementation.
• Design-token drafting: test a candidate colour, compare variations, then document the selected value with a name that reflects its role.
• Chart styling: compare harmonies and variations so series colours remain visually distinct rather than only attractive as isolated swatches.
• Accessibility checks: inspect contrast before assigning a colour to text, controls or important status indicators.
• Format hand-off: copy a colour in the format expected by a developer, designer, CSS file or documentation system.

Common Mistakes to Avoid

• Do not choose a colour only from the main swatch; check variations and contrast before using it in an interface.
• Do not assume a copied CMYK reference is a final print specification. Print workflows need proper colour management.
• Do not use every harmony colour at equal strength. Most interfaces need one dominant colour and a small number of accents.
• Do not export a full set before deciding the purpose of each colour. A labelled role is easier to maintain than a list of unnamed codes.
• Do not mix HEX, RGB and HSL randomly in one codebase unless the project has a reason for each format.

When Colour Picker Fits Better Than Related Tools

Colour Picker is strongest when the starting point is one colour and the task is to inspect, adjust, copy or compare that colour. If the task is to convert numeric RGB values into a web-ready HEX code, RGB To HEX is more direct because it starts from red, green and blue channels. If the task is to build a multi-colour scheme with locked colours and broader export choices, a palette generator is usually the better next step.

For practical work, keep Colour Picker focused on decisions that benefit from visual comparison: selecting an accent, checking a code, testing a variation, exporting a small colour group or confirming a contrast direction. Once the selected colour has a clear role, move it into the system where it will be used and test it in the actual layout size, not only in the picker interface.

When the destination is CSS, keep the chosen notation consistent. Use HEX for compact static tokens, RGB when channel values need to be manipulated, and HSL when the design system benefits from predictable lightness changes. The format selector makes switching easy, but a project remains easier to maintain when the final copied values follow one clear convention.

Exported colour codes travel better when the surrounding decision is recorded. After copying a group of values, note which colour is the base, which variation is intended for hover or muted use, and which harmony colour is only an optional accent. Without that context, a later developer or designer may treat every exported colour as equally important and create an interface with too many competing accents.

Exporting Colours Without Losing Context

For palette work, choose fewer colours than the interface appears to offer. A variation may be useful as a hover state, while a harmony colour may be useful as an illustration accent. Both should not automatically become permanent palette members. A cleaner palette normally has one main colour, a small number of supporting values and a clear contrast strategy. Exported codes are easiest to maintain when each copied value has a reason to exist.

Interface colour choices need more than an attractive value. A colour can look strong in a swatch and still feel heavy when used across a wide button, too subtle when used as a one-pixel border, or too similar to a neighbouring chart series. Colour Picker helps separate those decisions. First choose the visual direction, then use the variations and harmony panels to decide whether the colour should be a primary accent, a supporting accent, a surface tint or a temporary exploration value.

Choosing Colours for Interfaces and Palettes

Consistency matters after a value is copied. If a colour is used for a button in one area and a chart highlight in another, the meaning can become unclear. Record the copied value with its intended role and avoid creating several almost identical accents. When a new variation is better than an older value, replace the old role deliberately instead of allowing both versions to drift through the project.

Keeping Colour Choices Consistent

• Confirm the active colour matches the intended role: text, surface, border, icon, chart series or decorative accent.
• Check whether the chosen format is the format the destination actually expects.
• Compare at least one variation if the colour will be used on large surfaces.
• Use the contrast area when the colour will appear with text or important UI controls.
• Export only the grouped colours that have a clear purpose, then label them by role after copying.

A good colour decision is not only a nice swatch. It is a value that remains readable, reusable and easy to explain after it leaves Colour Picker.