Color Palette Generator

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.

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.

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.