--- title: "Color and Design Tools for Palettes and CSS" description: "Convert HEX, RGB and HSL colors, build palettes, check contrast and generate CSS gradients. Free design utilities that run locally in your browser." url: https://candoya.com/tools/color/ locale: en type: tool-category --- # 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. ## Color & Design tools - [Accessible Palette Generator](https://candoya.com/tools/accessible-palette-generator/): Generate a role-based accessible color palette from brand and background colors. Check WCAG AA and AAA contrast, preview roles, and copy CSS. - [Color Blindness Simulator](https://candoya.com/tools/color-blindness-simulator/): Color blindness simulator for images with protanopia, deuteranopia, tritanopia and achromatopsia views. Private, free and browser-based. - [Color Contrast Checker](https://candoya.com/tools/color-contrast-checker/): Free 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 Colors](https://candoya.com/tools/complementary-colors/): Find the exact complementary color for any HEX, RGB, or HSL value. Preview the opposite hue, contrast ratio, and copy-ready CSS instantly. - [Color Harmony Wheel](https://candoya.com/tools/color-harmony-wheel/): Use an interactive color harmony wheel to create complementary, analogous, triadic, tetradic, split-complementary, and square color schemes. - [Dark Mode Color Converter](https://candoya.com/tools/dark-mode-color-converter/): Convert light-theme background, surface, text, and accent colors into a contrast-aware dark mode palette. Preview roles and copy CSS instantly. - [Color Mixer](https://candoya.com/tools/color-mixer/): Mix 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 Picker](https://candoya.com/tools/color-picker/): Free 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 Generator](https://candoya.com/tools/color-palette-generator/): Free 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 Figma](https://candoya.com/tools/color-shades-for-figma/): Generate 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 Temperature](https://candoya.com/tools/color-temperature/): Convert color temperature from Kelvin to RGB and HEX with a live spectrum, common light presets and an instant screen preview. - [CMYK to RGB Converter](https://candoya.com/tools/cmyk-to-rgb/): Convert CMYK percentages to RGB and HEX instantly. Preview print colors on screen, inspect the formula and copy results in your browser. - [CSS Border Radius Generator](https://candoya.com/tools/css-border-radius-generator/): Free CSS border radius generator with live preview, per-corner controls, elliptical slash syntax and copyable CSS. No sign-up. - [CSS Box Shadow Generator](https://candoya.com/tools/css-box-shadow-generator/): Free CSS box shadow generator with layered shadows, inset mode, live preview and clean copyable CSS. Build card, button and panel shadows online. - [CSS Gradient Generator](https://candoya.com/tools/css-gradient-generator/): Free CSS gradient generator: build linear, radial and conic gradients with color stops and angle, preview live and copy clean CSS. No sign-up. - [Glassmorphism Generator](https://candoya.com/tools/glassmorphism-generator/): Create frosted glass CSS with a live glassmorphism preview. Tune blur, tint, transparency, border, radius and shadow, then copy the code. - [Gradient Generator](https://candoya.com/tools/gradient-generator/): Free 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 Generator](https://candoya.com/tools/mesh-gradient-generator/): Free mesh gradient generator with draggable color points, live CSS, presets and PNG export. Create a polished background in your browser. - [HEX to HSL Converter](https://candoya.com/tools/hex-to-hsl/): Free 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 Converter](https://candoya.com/tools/hex-to-rgb/): Free 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 Converter](https://candoya.com/tools/hsl-to-hex/): Convert HSL to HEX instantly with synchronized controls, opacity support, a live preview and one-click copy. Free and private in your browser. - [Random Color Generator](https://candoya.com/tools/random-color-generator/): Free random color generator for HEX, RGB and HSL values. Reroll colors, lock favorites, use a seed and copy CSS-ready output. - [RGB to CMYK Converter](https://candoya.com/tools/rgb-to-cmyk/): Convert 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 Converter](https://candoya.com/tools/rgb-to-hex/): Convert 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 Generator](https://candoya.com/tools/svg-pattern-maker/): Create 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 Generator](https://candoya.com/tools/tailwind-palette-generator/): Generate 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 Generator](https://candoya.com/tools/triadic-colors/): Free 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 Checker](https://candoya.com/tools/wcag-contrast-checker/): Check WCAG contrast from a screenshot or exact hex colors. Sample foreground and background pixels for instant AA and AAA results in your browser. [All tools](https://candoya.com/tools/) --- *Markdown edition of , published for AI agents and other automated readers. Index of key pages: .*