Free Color & Design Tools
23 free tools — Color pickers, palettes, gradients, contrast and design utilities
Color Picker
Pick any color with an interactive picker. See hex, RGB and HSL values update live, then copy in one click.
Color Palette Generator
Generate complementary, analogous, triadic, tetradic and monochromatic color schemes from any seed color.
Hex to RGB
Convert hex color codes to RGB values. Supports 3-, 6- and 8-digit hex (with alpha) for CSS and design workflows.
RGB to Hex
Convert RGB values to hex color codes. Accepts comma- or space-separated input. Outputs 6-digit or 8-digit hex.
HSL to RGB
Convert HSL (hue, saturation, lightness) to RGB. Adjust sliders to see the change live, then copy hex or RGB.
Color Contrast Checker
Check WCAG contrast between two colors. See AA and AAA pass/fail results for both normal and large text instantly.
Color Blindness Simulator
Simulate protanopia, deuteranopia, tritanopia and achromatopsia. See how your color choices appear to colorblind users.
Color Shades Generator
Generate 10 shades, 10 tints and 10 tones of any color. Build a Tailwind-style 50–950 scale from a single seed.
Gradient Generator
Build linear, radial and conic CSS gradients with multiple color stops. Copy ready-to-use CSS in one click.
Tailwind Color Palette
Browse the full Tailwind CSS v4 color palette — 22 hues × 11 shades. Click any swatch to copy the hex code.
Color Name Finder
Find the closest CSS named color to any hex value. Useful for readable code and naming swatches in design.
CMYK to RGB
Convert CMYK percentages (cyan, magenta, yellow, key) to RGB and hex for screen use. Print-to-digital workflow.
Pantone to Hex
Convert popular Pantone PMS colors to approximate hex values. Bridges print spec sheets to digital design.
RAL to RGB
Convert RAL Classic color codes to RGB and hex. Standard European color reference used in industry and architecture.
Color Blender
Mix two colors with an adjustable ratio. Get the in-between color in RGB and hex with a live preview.
Material Design Colors
Browse Google's Material Design 2014 color palette — 19 hues × 10 shades. Click to copy any hex code.
Flat UI Colors
Browse the original Flat UI color palette — curated, named flat-design colors with hex codes. Click to copy.
Random Color Generator
Generate cryptographically random hex colors. Lock channels to constrain the result for usable palettes.
Color Temperature
Convert Kelvin temperature (1000K–12000K) to the corresponding warm-or-cool RGB color. Photographer-friendly.
Glassmorphism Generator
Generate frosted-glass CSS with adjustable blur, opacity and border. Live preview plus copy-ready code.
Neumorphism Generator
Generate soft-UI neumorphic CSS with adjustable size, radius, distance and intensity. Live preview plus CSS.
Mesh Gradient Generator
Generate organic mesh gradients with 4-corner radial blends. Live preview and copy-ready CSS background.
CSS Pattern Generator
Generate CSS background patterns — dots, stripes, grids and diagonals — with custom colors and spacing.
About Color & Design
Color and design tools handle every part of working with color on the web: picking a color with a visual picker, converting between hex / RGB / HSL / CMYK, generating harmonious palettes from a seed color, simulating colour-vision deficiencies, checking WCAG contrast ratios for accessibility, building gradients and mesh gradients, and copying values from Tailwind, Material, and Flat-UI palettes.
Designers use the palette and shades generators to build out a brand system from a single primary colour. Developers use the converters and Tailwind picker constantly when implementing designs. Accessibility reviewers use the contrast checker to confirm text meets WCAG AA/AAA before shipping. Everyone uses the gradient and glassmorphism / neumorphism generators when prototyping a hero section.
All 23 tools run entirely in your browser — nothing is uploaded, no API is called, and your colour values never leave your device. Outputs include hex, RGB, HSL, and ready-to-paste CSS for every relevant tool.