Color & Design tools
About Color & Design tools
A free set of tools for color and design work — a color picker, color code converter, contrast ratio checker, and palette generator. Everything runs in your browser with no signup or install.
They help choose UI color schemes, verify accessible (WCAG) contrast, and pick brand colors. Ideal for designers, web creators, and front-end engineers — anyone who works with color.
All Color & Design tools
Color Picker
Pick colors from an image and get the HEX, RGB, or HSL code. Zoom in with the loupe for pixel-level accuracy and export your palette. Free, no signup.
- Design & Color
- Productivity
Color Palette Extractor
Extract dominant colors from images and build a palette with HEX/RGB/HSL, color shares and 4–12 colors. Export to CSS/SCSS/Tailwind/JSON — all in your browser.
- Extraction
- Design & Color
Color Palette Generator
Free color palette generator. Pick one base color to generate complementary, analogous, triadic, and other color schemes from color theory. Export as CSS variables, Tailwind, SCSS, or JSON. Runs entirely in your browser.
- Generator
- Design & Color
Color Code Converter
Convert color codes between HEX, RGB, HSL, HSV, and OKLCH, with alpha and a CMYK reference. Copy any format in one click. Runs entirely in your browser.
- Converter
- Design & Color
Contrast Checker
Check color contrast against WCAG 2.1 / 2.2 AA and AAA, with passing-color suggestions, color-blindness simulation, and APCA. Runs entirely in your browser.
- Checker
- Design & Color
- Accessibility
CSS Gradient Generator
Free CSS gradient generator for linear, radial, and conic gradients. Adjust colors, angle, and alpha, then copy as CSS, Tailwind, or SCSS. Runs in your browser.
- Generator
- Development
- Design & Color
CSS Shadow Generator
CSS box shadow generator with live sliders. Stack layers, add inset, apply neumorphism and glow presets, export CSS or Tailwind. Runs entirely in your browser.
- Generator
- Design & Color
Color Name & Nearest Color Finder
Free color name finder: enter a HEX or RGB value to find the closest CSS named colors, or look up a color name to get its HEX and RGB. Quickly answer what color a hex code is, find the nearest color name, or get a hex color name. Runs entirely in your browser.
- Checker
- Design & Color
Tailwind Color Scale Generator
Free Tailwind color scale generator. Enter one base color to build a full 50-950 (11 shades) Tailwind palette. Export as Tailwind v4 @theme (OKLCH), v3 config colors, CSS variables, or JSON, with HEX/OKLCH/HSL/RGB display and contrast hints. Runs entirely in your browser.
- Generator
- Development
- Design & Color