Colour Selector

Guide to the complete use of the Online Colour Picker

Colour Selector to get and convert colour values. Pages provide large preview blocks, HEX input/show, and RGB, HSL read-only or copyable fields; Common interactions include click copying of HEX, RGB, HSL. Partially achieved and system supported EyeDropper API colours from the screen (when the browser supports). Suitable for designing labels, CSS variables to be collated and quickly coloured, without replacing a full colour management system (ICC/printed monochrome).

What can you do on the page?

• Select the colour in the palette/colour-taking control, preview and update in real time.
• View HEX (if #b8ff78) and copying by one key.
• View the RGB mass (0-255) and HSL, which is easy to write CSS.
• If you have a Screen Colour/Sorption button and the browser supports it, you can draw any pixel colour from the desktop.

Recommended steps

1. Sets the target colour from the draft or the inspiration, and uses the selector or straw to obtain it.
2. Copy HEX to CSS/Design Tool; Alpha (if alpha is not available on page) is added manually when it is required to be semi-transparent.
3. Record the main colour, the suspended colour, the background colour group to avoid the colour drifting in the same product.
4. The accessibility scene is checked for contrast (additional testing tool if no comparison calculations are provided on this page).

Apply scene

• Quick get HEX/RGB when writing CSS
• Get brand colour from screenshots/pages
• Colour collection before organizing design token

Border

• Screen colour depends on browser privileges and API support, and buttons may not be available if they are not supported.
• The colour of the different displays results in " inconsistency of the eye " , which is the value.
• Not necessarily containing CMYK/Photo; For printing, please use a professional process.
• Copys a colour string, which does not automatically write to your code repository.

FAQ

HEX can take #?

The page display usually includes #； Keep or remove certain tools when pasting them to the other side.

Why isn't the straw working?

The environment of the EyeDroper needs to be supported by the Chromium system and the user's gestures are triggered; HTTP/authorities strategy may also be affected.

Which one of the CSSs better?

Look at the team code. HSL is more visible when it is brightened; Common HEX/RGB for colour matching to the script.

Can you save the palette?

Depending on whether the history/receivers are available on the page; If no duration is sustained, copy yourself to the document.

Will the take-off pass?

Colour calculations are done locally, and copying actions are also in the browser.

How is it different from the coloring of pictures (from uploading)?

If the main page is used for general selection/screen colouring, not dependent on uploading the picture; Sample from photo pixels please use the colouring tool page with the picture canvas.

Controls and conversion links

Main Preview #previewBox/#previewLabel, Native Selector #colorPicker，HEX Input #hexInput。 Read/presented field only:#valHex、#valRgb、#valHsl、#valCmyk、#valCss。 Conversion function:hexToRgb、rgbToHsl、rgbToCmyk、hslToHex； Unanimously refreshed away updateUI。 Colour step renderShades Writing #shadesRow； Gradient renderGradient Update #gradientBox/#gradientCode； Preset renderPalette → #paletteGrid。 History:addHistory/renderHistory/clearHistory Correspond #historyRowand possibly read and write localStorage. Enter Event onColorInput/onHexInput；Copy copyVal/copyText + showToast。

Design landing proposal

(a) Prefer HEX to design tools and CSS after the selection or palette fixes; RGB/HSL needs to be read when it is measured or transparent. CMYK fields facilitate communication of the print orientation, but the screen RGB→CMYK is similar and cannot be a substitute for printing. The colour steps and gradients are suitable for the rapid generation of the hover/background variants, but it is still recommended that the contrast check (accessibility) be followed by the final version. History avoids colour drift in the same product; The public computer is used to clear history.

Description of the boundary

The colour of the different monitors leads to inconsistency in the eye, and collaboration is based on the value. If the environment supports screen colouring capabilities, the actual button is the same; Replaces this with an upload image colour taker or a system colour taker when not supported. This page does not return the code repository and does not manage the full ICC workflow. (a) Copying colour strings; & Translucency: If the interface is not available to Alpha, please fill in the CSS / alpha or use rgba。