Color and design tools

Use the color tools to move between a design value and something you can use in a page. HEX to RGB turns #ff0000 into rgb(255, 0, 0), while HSL exposes hue, saturation and lightness for adjustments. Palette tools help create related swatches; gradient, shadow and border-radius generators give you a preview and CSS for a specific effect. The controls run locally, so you can experiment without creating an account.

Contrast checks are useful when choosing text and background colors. Enter the actual foreground and background pair, including the background a translucent color will sit on. A contrast ratio measures that pair; it does not establish that an entire interface is accessible. Text size, focus indicators, non-color cues and interactive states still need review in the finished design.

Color conversions have limits as well. A browser preview depends on the screen and its color handling, and a simple CMYK conversion is not a print proof with a printer profile. Keep the original color values when handing a design to a print workflow. For web work, test the generated styles in their real context: a palette that looks clear on a swatch board can behave differently with small text, photographs or dark-mode surfaces.

Browse 28 tools

Color & Design tools

Accessible Palette GeneratorGenerate a role-based accessible color palette from brand and background colors. Check WCAG AA and AAA contrast, preview roles, and copy CSS.Color Blindness SimulatorColor blindness simulator for images with protanopia, deuteranopia, tritanopia and achromatopsia views. Private, free and browser-based.Color Contrast CheckerFree WCAG color contrast checker. Enter a text and background color to get the contrast ratio and instant AA & AAA pass/fail for normal and large text.Complementary ColorsFind the exact complementary color for any HEX, RGB, or HSL value. Preview the opposite hue, contrast ratio, and copy-ready CSS instantly.Color Harmony WheelUse an interactive color harmony wheel to create complementary, analogous, triadic, tetradic, split-complementary, and square color schemes.Dark Mode Color ConverterConvert light-theme background, surface, text, and accent colors into a contrast-aware dark mode palette. Preview roles and copy CSS instantly.Color MixerMix two colors online at any ratio. Preview the result live and copy its HEX, RGB, HSL or CSS value without uploads or sign-up.Color PickerFree online color picker with HEX, RGB, HSL, HSV and CMYK values. Pick a color, adjust channels and copy CSS-ready formats in your browser.Color Palette GeneratorFree color palette generator: turn one base color into complementary, analogous, triadic or monochromatic schemes and copy the hex codes. No sign-up.Color Shades for FigmaGenerate color shades for Figma from any hex. Build a named 50-950 scale, preview it, and copy variable JSON, names with HEX, or CSS.Color TemperatureConvert color temperature from Kelvin to RGB and HEX with a live spectrum, common light presets and an instant screen preview.CMYK to RGB ConverterConvert CMYK percentages to RGB and HEX instantly. Preview print colors on screen, inspect the formula and copy results in your browser.CSS Border Radius GeneratorFree CSS border radius generator with live preview, per-corner controls, elliptical slash syntax and copyable CSS. No sign-up.CSS Box Shadow GeneratorFree CSS box shadow generator with layered shadows, inset mode, live preview and clean copyable CSS. Build card, button and panel shadows online.CSS Gradient GeneratorFree CSS gradient generator: build linear, radial and conic gradients with color stops and angle, preview live and copy clean CSS. No sign-up.Glassmorphism GeneratorCreate frosted glass CSS with a live glassmorphism preview. Tune blur, tint, transparency, border, radius and shadow, then copy the code.Gradient GeneratorFree gradient generator: design a linear or radial color gradient, preview it live, and download a ready-to-use PNG image at any size. No sign-up.Mesh Gradient GeneratorFree mesh gradient generator with draggable color points, live CSS, presets and PNG export. Create a polished background in your browser.HEX to HSL ConverterFree HEX to HSL converter. Type a hex color code like #3366cc and get the hsl() value, a live color preview and one-click copy - right in your browser.HEX to RGB ConverterFree HEX to RGB converter. Type a hex color code like #ff5733 and get the rgb() value, a live color preview and one-click copy - right in your browser.HSL to HEX ConverterConvert HSL to HEX instantly with synchronized controls, opacity support, a live preview and one-click copy. Free and private in your browser.Random Color GeneratorFree random color generator for HEX, RGB and HSL values. Reroll colors, lock favorites, use a seed and copy CSS-ready output.RGB to CMYK ConverterConvert RGB colors to CMYK instantly. Enter RGB values or pick a color, see live CMYK output with copyable values. No upload, no sign-up - runs in your browser.RGB to HEX ConverterConvert RGB to HEX instantly with channel sliders, opacity support, a live color preview and one-click copy. Free and private in your browser.SVG Pattern GeneratorCreate seamless, tileable SVG background patterns in your browser. Pick a shape, colors, size and thickness, then copy the CSS or SVG. No sign-up, runs locally.Tailwind Palette GeneratorGenerate an 11-shade Tailwind color palette from any hex. Preview every 50-950 shade and copy Tailwind v4, v3, CSS, or JSON code.Triadic Color GeneratorFree triadic color generator to create balanced 3-color harmonies 120° apart on the hue wheel. Instant hex, RGB and HSL output - no sign-up, runs in your browser.WCAG Contrast CheckerCheck WCAG contrast from a screenshot or exact hex colors. Sample foreground and background pixels for instant AA and AAA results in your browser.