What Colour Picker is
Drag the saturation pad and the hue slider. Alpha sets opacity. HEX, RGB, and HSL stay in sync. Edit any field and the others follow. Copy sits next to each field. Contrast shows the swatch on white and on black with a WCAG pass or fail. The mix stays in this tab. Nothing is uploaded to social-hub.io.
Pick from screen appears when the browser allows it. You can also drop a photo and tap a pixel. A loupe shows the hex under the pointer. The photo stays in the tab. It is read with FileReader. There is no localStorage for the colour. Clear the photo when you are done. The swatch is a single colour, not a gradient. Contrast is a check against white and black only, not against an arbitrary background you type in.
How to use it
- Mix a colour on the pad, or type a hex, RGB, or HSL value.
- Move hue and alpha until the swatch matches what you need. Copy HEX, RGB, or HSL.
- Read contrast on white and on black before you put text on a button.
- Optional: Pick from screen, if the browser allows it.
- Or drop a photo, tap a pixel, and read the loupe. Clear the photo when you are finished.
Common uses
Pull a brand hex from a screenshot. Match a button to a photo of a product. Check that body text on white still passes WCAG in this preview. Copy RGB for a design token. Copy HSL when you are nudging lightness. Sample a UI from another tab if Pick from screen is allowed. Keep alpha below 100% when you want a translucent overlay. The loupe is for a single pixel, not a palette export. If you need a CSS gradient instead of one swatch, that is a different page. If the eyedropper is missing, the browser refused the permission. You can still type a value or tap a photo.
Privacy
Colours and any photo you drop are not uploaded. We do not keep a palette. Close the tab or refresh and the swatch and the picture are gone.