Color picker with every notation on screen

Hex Color Picker

Pick a color visually and get the hex code — six-digit, three-digit shorthand and eight-digit alpha — with one click to copy.

Hex Color Codes

A browsable chart of the codes worth knowing: all 148 CSS keywords, the neutral grays and the web-safe grid, each one click from your clipboard.

RGB to HEX

Three 0-255 channels become one six-digit code, with each byte shown in binary and hex so the mapping stops being a black box.

HEX to RGB

Split a hex code into red, green and blue bytes, including the shorthand #rgb form and the eight-digit form whose last pair is alpha.

RGB to CMYK

Separate a screen color into cyan, magenta, yellow and key — with the gamut warning and the missing-ICC-profile caveat that most converters quietly skip.

CMYK to RGB

Turn four ink percentages back into a screen color, and see why several different CMYK mixes can land on the same pixel.

RGBA to HEX

Fold an alpha channel into eight-digit hex, or flatten it against a chosen background to get the six-digit color it actually renders as.

HEX to HSL

Rewrite a hex code as hue, saturation and lightness — the form you want when the goal is a lighter version, not a different color.

Pantone to RGB

Look up the published screen approximation of a spot color, with the coated-to-uncoated shift in ΔE and a flag on the inks process printing cannot match.

RGB to HSL

Move three channels into the cylindrical model, one derivation step at a time — which branch sets the hue, and how saturation falls out of lightness.

HSL to RGB

Resolve hue, saturation and lightness back into the channels an ImageData buffer, a shader uniform or an older stylesheet expects.

Color Wheel

Drag around a 360° wheel and watch the complementary, triadic, tetradic and analogous partners move with you, each labeled with the angle it sits at.

Color Palette Generator

Grow a five-color palette from one seed, locking the swatches that work and re-rolling the rest under the harmony rule you picked.

Complementary Color

Find the exact opposite of a color on the wheel, plus the split and near-complements that are far easier to use in a real layout.

Random Color Generator

Roll colors inside a hue range and saturation and lightness bounds you set, so the output is usable rather than merely arbitrary.

Color Mixer

Blend two colors at any ratio in sRGB, linear light or Lab, and see the three genuinely different answers to “what is red plus green”.

Color Scheme Generator

Expand one brand color into a working interface set — background, surface, border, body text and accent — with every pair contrast-checked.

Tailwind Color Generator

Generate a 50-950 scale from a single hex value, following Tailwind's own uneven lightness curve instead of an even LCH ramp.

Shades Generator

Lay shades, tints and tones of one color side by side in a single table, so you can see what adding black, white and gray each do.

Image Color Picker

Open a photo or screenshot and lift the color of one pixel, with a magnifier so you land on the pixel you actually meant.

Color From Image

Cluster the pixels of an image into a dominant-color palette, with each swatch labeled by the share of the picture it covers.

Color Contrast Checker

Score a text and background pair against WCAG 2.1 and get the verdict for body copy, headings and non-text UI in one reading.

Color Blindness Simulator

See a color or a whole palette as protanopes, deuteranopes and tritanopes see it, with a severity slider for the far more common anomalous cases.

WCAG Contrast Checker

Audit a list of color pairs against 1.4.3, 1.4.6 and 1.4.11 at once, and get the nearest passing color for every row that fails.

Gradient Generator

Drag stops along a multi-stop gradient and interpolate in Lab to skip the gray dead zone that ruins a plain sRGB fade.

CSS Gradient Generator

Write out the linear, radial and conic CSS for a gradient, repeating variants included, with the angle convention each function uses.

Box Shadow Generator

Stack several shadows on one element and tune offset, blur, spread and inset until the elevation reads the way you meant it to.

Clip Path Generator

Drag the vertices of a polygon, circle, ellipse or inset and read the clip-path value back as percentages that survive a resize.

Border Radius Generator

Control all eight radii independently to build the organic blob shapes only the two-value slash syntax can express.

CSS Button Generator

Assemble padding, radius, border, shadow and color into a button and export the rule set with its :hover, :active and :focus-visible states.

CSS Arrow Generator

Generate the tooltip arrow that points from any edge at any size, in the border-trick form and the clip-path form side by side.

CSS Filter Generator

Stack blur, brightness, contrast, saturate, hue-rotate and drop-shadow over a live image and copy the filter chain in order.

Text Shadow Generator

Layer text shadows into glow, emboss, outline and retro 3-D effects, previewed at the weight and size you will actually ship.

CSS Triangle Generator

Work out the border widths that turn a zero-size element into a triangle pointing whichever way you need, at any size.

Glassmorphism Generator

Tune the backdrop-filter blur, translucency and hairline border that make frosted glass, and get the fallback for browsers without backdrop-filter.

Neumorphism Generator

Derive the matched light and dark shadow pair from your surface color, which is the entire trick behind the soft-UI look.

CSS Loader Generator

Build a spinner, dot or bar loader out of one element and its keyframes, with no image, no SVG and no library.

Aspect Ratio Calculator

Solve for the missing width or height at a fixed ratio, and see which of the common ratios a size is closest to.

CSS Grid Generator

Lay out columns, rows and gaps by hand, place items across tracks, and export grid-template together with named areas.

Flexbox Generator

Toggle direction, wrap, justify and align on live boxes to see what each property does before the rule reaches your stylesheet.

CSS Animation Generator

Compose duration, delay, easing, iteration and fill into one animation shorthand and watch it loop while you edit.

Cubic Bezier Generator

Drag the two control handles of an easing curve and race it against ease, ease-in-out and a linear baseline in the same preview.

Keyframes Generator

Add percentage stops to an @keyframes block and edit transform and opacity at each one without hand-counting the percentages.

CSS Transform Generator

Combine translate, rotate, scale and skew in 2-D and 3-D, and watch the order of the functions change where the element lands.

Media Query Generator

Assemble breakpoint, orientation, hover, prefers-reduced-motion and prefers-color-scheme queries in the modern range syntax.

PX to REM

Convert pixels to rem against any root size, with a reference table of the values a stylesheet reuses over and over.

Font Pairing

Study heading-and-body combinations that hold together, and the x-height and weight contrast that is doing the work in each one.

Golden Ratio Calculator

Divide or multiply a length by 1.618 across as many steps as you need, for type sizes, column widths and card proportions.

REM to PX

Work out what a rem value renders as at any root size, including the 62.5% trick and what it costs a reader who changed their font size.

EM to PX

Resolve em against the inherited size it is relative to, which is where nested ems quietly multiply into the wrong number.

Google Fonts Preview

Compare a shortlist of open-source families on your own sample text, rendered from fonts this site serves itself rather than fetched live.

Font Size Converter

Move one type size between px, pt, pc, em, rem, percent and the CSS absolute keywords — all seven side by side.

Line Height Calculator

Pick a line height for a given size and measure, with the 45-75 character window marked so you can see when a line is too long to track.

Typography Scale

Build a modular scale from a base size and a ratio, and read every step as rendered text rather than as a column of numbers.

Letter Spacing Calculator

Convert tracking between em, px and the thousandths design tools use, and see the negative tracking large headings need.

PNG to SVG

Trace flat-color artwork into real vector contours — actual paths you can edit, not a bitmap parked inside an svg wrapper.

SVG to PNG

Rasterize an SVG at any width, height or scale factor, keeping transparency and rendering at device pixel ratio for retina output.

Favicon Generator

Produce the icon sizes a browser tab, an iOS home screen and a web manifest each ask for, with the link tags to paste into head.

ICO Converter

Pack 16, 32 and 48 pixel frames into one multi-resolution .ico, which is what Windows and older browsers actually read.

Avatar Generator

Derive an identicon or initials avatar from a name or user id, so the same input always yields the same picture on every machine.

SVG Optimizer

Strip editor metadata, collapse transforms and round path coordinates, with the byte count before and after each choice.

Image to ICO

Convert a PNG, JPEG or SVG into a single-size .ico for the one case where a bare favicon file is all that is wanted.

Spritesheet Generator

Pack a set of images into one sheet and get the background-position rule for every frame, plus the steps() animation to play them.

Placeholder Image Generator

Draw a sized placeholder with your own label and colors locally, instead of pointing a mockup at a third-party placeholder host.

OG Image Generator

Compose a 1200×630 social card from a title, subtitle and background, and check the text still reads at the size a timeline shows it.