HTML Color Codes

The fastest way to grab a color and copy its codes. Click the swatch to open your system color picker, type a hex value directly, or paste any 3- or 6-digit hex string. The picker instantly shows the matching HEX, RGB, and HSL values — every code has a one-click copy button so you can paste it straight into your CSS, design tool, or component library without losing your flow.

An interactive HSL color wheel for designers who think in hue and saturationrather than raw hex. Click anywhere on the wheel to set both at once, then fine-tune with the three sliders below — Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). Great for building brand palettes, exploring unfamiliar hue ranges, or finding the exact shade that fits your design system.

Drop in any photograph, screenshot, or brand asset, then drag five color markersanywhere on the image to sample the exact pixels you care about. Each marker shows its sampled hex code below — perfect for grabbing the orange of a sunset, the navy of a logo, or the skin tone in a portrait. No more guessing dark/bright averages. Everything runs in your browser — your image is never uploaded.

Pick a base color and instantly see a complete swatch chart built around it. The tool generates 10 tints (lighter variations), 10 shades (darker variations), plus 5 color harmonies — complement, analogous, and triadic — so you have a full design-system-ready palette in seconds. Click any swatch to copy its hex code. Ideal for building 50/100/500/900 color scales for Tailwind-style design tokens.

Every one of the 141 CSS named colors, searchable by name or hex code. From aliceblue to yellowgreen — including modern additions like rebeccapurple — each entry shows the exact swatch and hex value. Click any color to copy its name (perfect when you'd rather write color: tomato;than memorise #FF6347). Great for prototyping and cheat-sheet reference.

A complete designer-friendly palette of basic colors — Reds, Oranges, Yellows, Greens, Cyans, Blues, Indigos, Purples, Pinks and Grays — each with 9 carefully balanced stepsfrom lightest to darkest. The same scale popularised by Tailwind, ready to copy. Click any swatch to copy its hex code straight to your clipboard. A great starting point for any UI, landing page, or product design.

Smash the button and get a fresh random hex color with its HEX, RGB, and HSLequivalents on every click. Your last 12 generated colors are saved as a strip below — click any of them to bring it back. Perfect for breaking out of a creative rut, finding inspiration for a brand palette, or seeding a new design experiment. Every code is one click away from your clipboard.