HEX / RGB / HSL Color Converter

Check the WCAG contrast ratio between a text color and a background color, with a live preview and a clear pass/fail against the WCAG 2.2 AA and AAA thresholds for both normal and large text. This is the tool to reach for when choosing accessible color combinations for a website, app, or document, since low-contrast text is one of the most common accessibility failures and can make content unreadable for users with low vision or color blindness, or in bright sunlight on a phone screen. The ratio is computed locally using the exact relative-luminance formula from the WCAG specification, so results match what an automated accessibility audit would report, with nothing ever sent to a server.

Color Palette Generator expands one base HEX colour into eleven swatches by rotating its hue and changing its lightness. The harmony row is the base, its complement (hue +180°), two analogous hues (±30°) and two triadic hues (±120°). The shades row takes the base hue and saturation and sets lightness to five fixed values — 20, 35, 50, 65 and 80 — so they are absolute lightness steps, not tints or shades relative to the base. Saturation is never changed. The output is HEX codes to copy; there is no accessibility or contrast check on any pair, so verify text and background combinations separately with the WCAG Contrast Checker. An invalid base HEX simply produces no palette.

CSS Gradient Generator builds a CSS gradient visually and gives you the code to copy. Choose a linear, radial, or conic gradient and add between two and eight color stops, each with a HEX color and a position from 0 to 100 percent. For a linear gradient you set the angle in degrees; for a conic gradient you set the starting angle; for radial and conic gradients you pick a position such as center or top left, and a radial gradient can be drawn as a circle or an ellipse. A large preview and the generated CSS update live as you work, and everything is composed in your browser from validated values, so your colors, stops, and CSS are never uploaded or stored. Colors are edited as HEX codes alongside a native color picker. This is different from the Color Palette Generator, which produces a set of separate swatches rather than one continuous background. A gradient's colors are not automatically accessible for text — check the text and background contrast separately with the WCAG Contrast Checker.

Preview how a PNG, JPEG, or WebP image may look to viewers with common colour-vision deficiencies, entirely inside your browser. Load a local image and compare the original side by side with an approximate simulation of protanopia (reduced red sensitivity), deuteranopia (reduced green sensitivity), tritanopia (reduced blue sensitivity), or achromatopsia (no colour, computed from perceptual luminance rather than a flat average of the channels). Each pixel is transformed locally on a canvas; the image is never uploaded, and nothing is stored after you close the tab. The alpha channel is copied through unchanged, so transparent areas stay transparent, and you can export the simulated view as a PNG for design notes or bug reports. Simulation is an approximation for design and accessibility review, not a medical diagnosis, and it cannot detect or measure anyone's vision. Results also depend on your screen: browser colour management and display calibration vary between devices. This tool answers a different question from the WCAG Contrast Checker, which scores the ratio between two specific colours, and from the Image Color Picker, which reads the exact colour value under a single point.