WCAG Contrast Checker

HEX / RGB / HSL Color Converter shows one colour in all three CSS notations. Type a HEX code (3 or 6 digits, with or without the #), use the native colour picker, or enter RGB channels or HSL values, and the other formats follow. HSL numbers are rounded to whole degrees and whole per-cents, so a HEX to HSL and back can land one step away from where it started. It handles opaque colours only — there is no alpha channel, so no #RRGGBBAA, rgba() or hsla() — and no named colours like "rebeccapurple", CMYK, LAB, LCH or OKLCH. Output is a lowercase #rrggbb, rgb(r, g, b) and hsl(h, s%, l%), each copyable. To check a text-and-background pair against WCAG use the WCAG Contrast Checker; to fan a colour out into a set use the Color Palette Generator.

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.