Online Color Picker - Eye Dropper & Color Selection Tool
Pick colors from a palette or use the eye dropper to sample colors from your screen. Converts between HEX, RGB, HSL. An essential tool for designers.
UD5 Toolkit
Click the button, then click anywhere on your screen to pick a color. Built-in magnifier helps precise selection.
Drag & drop an image here
or click to browse · or paste (Ctrl+V) a screenshot
Upload an image to start picking colors with the magnifier
Pick colors from a palette or use the eye dropper to sample colors from your screen. Converts between HEX, RGB, HSL. An essential tool for designers.
Classic HSV color wheel with sliders. See hex, RGB, and HSL equivalents. Intuitive for artists. No server interaction.
Find the official name of any hex color from the extended color dictionary. Search by name to get the hex code. Handy for CSS and design language.
Select colors in the OKLCH space with lightness, chroma, and hue. Convert to hex, RGB, and CSS oklch(). Perceptually uniform gradients.
Use <input type='color'> and see its change events and value in hex. Understand the native color picker. Quick demo.
Pick colors using the HWB (Hue‑Whiteness‑Blackness) model. Get the CSS hwb() function code. Simpler than HSL for some.
Interactively create colors in HWB space and get the CSS hwb() function. Simplifies tint/shade workflows. Live preview.
Enter a color palette and see how it looks for different types of color vision deficiency. Get warnings on conflicting colors.
Select emotions (calm, energetic, sad) and generate a harmonious color palette that reflects the mood.
Type a CSS color name like 'tomato' or 'mediumseagreen' and instantly get its hex code and preview. Complete named colors list.
Enter color in any CSS format and see all other representations. Live preview. Swatch history.
Paste a stylesheet and extract every unique color (hex, rgb, hsl) into a palette. Swatches displayed. Copy as JSON.
Convert RGB and RGBA color values to their HEX or HEX+alpha representation. Live preview and copy CSS color strings instantly.
Select a color and see which cocktails match it roughly. Blue for Blue Lagoon, red for Negroni. Fun bar guide.
Upload an image and instantly get a 6‑color palette with the most dominant shades. Click to copy hex codes. Canvas‑based.
See the Pantone Colors of the Year and popular palettes from past years. Get hex codes. Design inspiration.
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
Generate single random colors or full palettes. Displays hex, RGB, and copy on click. Great for design inspiration.
Quickly convert HEX color codes to RGB values and vice versa. See the color preview. Indispensable for web developers and graphic designers.
Use the light‑dark() CSS function to change colors based on color scheme. Build a simple dark mode toggle with one property.
Discover beautiful color palettes for your projects. Generate random, complementary, or trendy schemes and copy hex codes. Useful for designers and developers.
List up to 10 colors and generate a contrast ratio matrix. See which pairs pass WCAG quickly.
Paste hex colors, generate a contrast matrix against each other. Identify failing pairs for WCAG.
Choose a base color and see its complementary, split‑complementary, triadic, and tetradic harmonies. Copy palettes. Local.
Generate a range of tints and shades from a single hex color. Ideal for data visualization, UI design systems, and Tailwind custom palette creation. Local tool.
Set a custom accent color for checkboxes, radios, range, and progress. See the browser’s rendering. Copy the CSS.
Test the upcoming contrast‑color() CSS function. Get white or black automatically for a given background. See it live.
Write modern CSS color functions like oklch(), lab(), hwb() and see the rendered color with fallback. Copy compatible code.
Mix and save colors using a color picker. Drag to reorder. Export as CSS variables or hex list.
Build a palette and simulate how it appears to various color deficiencies. Also generate pre-vetted accessible palettes. Local processing.