Choose a color visually, refine its HEX, RGB, or HSL values, check contrast, and copy ready-to-use CSS in your browser.
Enter #RGB, #RGBA, #RRGGBB, or #RRGGBBAA. The screen picker appears when your browser supports it.
The scene stays on your last valid color until this value is fixed.
Base, tint, and shade values now work together in a real component.
Colors you choose will appear here on this device.
Five sRGB mixes toward white and five toward black, with alpha preserved.
Readable text should stay clear on the chosen background.
Transparency is composited over the background before the ratio is calculated.
The color is fully transparent, so no text is rendered and there is nothing to measure. Raise the alpha to get a real contrast result.
Use this online color picker to choose a color visually or enter an exact HEX, RGB, or HSL value. The hex color picker keeps every format synchronized, preserves alpha transparency, and turns one selection into a practical CSS color family. It also works as a colour picker for browsers and keyboards configured with British English.
A useful CSS color picker needs more than a single swatch. This tool mixes five deterministic sRGB tints toward white and five shades toward black while preserving the selected alpha value. The applied component preview shows the base, a tint, and a shade together, and the CSS export uses honest tint-1 through shade-5 variable names. Need a whole harmony instead of one family? Send the color to the color palette generator.
On supported browsers, the Pick from screen button opens the browser's native eye dropper so you can sample any visible pixel, with no color picker extension or add-on to install. If the EyeDropper API is unavailable, every manual color selector control continues to work. The eyedropper tool keeps your current alpha instead of silently replacing it.
The contrast preview compares the selected text color with an editable background and reports WCAG AA results for normal and large text after transparency is composited. Treat this as a focused color check rather than a complete accessibility audit; real font size, weight, states, gradients, icons, and surrounding components still need review. The full color contrast checker adds AAA, non-text thresholds, and accessible alternatives.
Color parsing, previews, recent colors, contrast calculations, and CSS generation run locally in this browser. Recent colors are stored only on this device when local storage is available. No selected color is sent in analytics, and a share link contains color values only when you explicitly create it.
Open the visual color control and choose a hue, or enter a HEX, RGB, or HSL value. Every valid selection updates the preview, color family, contrast result, and CSS variables.
Yes, when your browser supports the EyeDropper API. Choose Pick from screen, select a visible pixel, and the tool applies that RGB value while preserving your existing alpha.
Yes. Use 4- or 8-digit HEX, RGBA, HSLA, or the alpha slider. HEXA, RGBA, HSLA, previews, tints, shades, contrast, recents, and CSS stay synchronized.
Tints are even sRGB mixes between the base color and white; shades are even sRGB mixes between the base color and black. They are deterministic helpers, not a perceptual OKLCH scale.
No. The picker runs locally. Recent colors stay in this browser, and exact values are excluded from analytics. A share link includes its selected colors only after you request one.
No. HSL describes a color by hue, saturation, and lightness, while HSV/HSB uses hue, saturation, and value or brightness. They share the hue axis but scale saturation differently, so an HSL to HSV conversion changes the last two numbers. This picker edits HSL because CSS supports hsl() directly; the HEX and RGB values stay identical either way.
Phoenix Code gives you HTML and CSS editing, project-wide search, Git, and Live Preview in a full browser or desktop code editor.