Color selection
Finding and converting colors
Color Picker gives you HEX, RGB, HSL, and HSB values for any color you choose — copy any format with one click.
Design · 7 tools
Color, beautifully under control.
Browser-based design utilities — color pickers, palettes, gradients, image conversion, CSS and SVG helpers — with paste-ready output, running locally.
7 tools
5 color formats
0 uploads
// 7 tools
Color Picker
Pick colors from any image or spectrum and copy HEX, RGB, HSL, OKLCH, and more — entirely in your browser
#F5C842
HEX to RGB Converter
Two-way HEX ↔ RGB color converter with alpha, CSS4 syntax, and copy-to-clipboard, in your browser
#2563EB
Contrast Checker
Enter foreground and background colors to instantly see the contrast ratio and WCAG 2.2 AA/AAA pass/fail — with suggestions, history, and a shareable link, all in your browser.
Color Palette Generator
Enter a HEX, RGB, or HSL color and generate harmonious palettes using complementary, analogous, triadic, and other color theory rules — with CSS variable and Tailwind export
Gradient Generator
Build CSS linear, radial, and conic gradients visually with live code output, color pickers, presets, SVG export, and shareable permalinks.
Border Radius Generator
Visually adjust corner radii for any element. Copy shorthand, longhand, Tailwind, or custom property CSS — all in your browser.
Box Shadow Generator
Build multi-layer CSS box-shadow declarations with a live preview — adjust offset, blur, spread, and color per layer, then copy as CSS or Tailwind
How to choose
Pick the right tool for your task
Code work
Converting between HEX and RGB
HEX ↔ RGB Converter translates between all web color notations. Useful when you have a HEX from a design spec and need the RGB for a CSS variable.
Which format?
HEX vs HSL vs RGB — when to use each
HEX is the most compact and widely supported in CSS. Use RGB when you need transparency (rgba). Prefer HSL when writing Tailwind classes or adjusting lightness programmatically.
Which format?
Pick the right color format for the job
HEX
Compact and universal
The default for CSS and design tokens. Compact, familiar, and supported everywhere. Use it as your first choice.
#F5C842 · #F5C842CC (with alpha)
RGB / RGBA
When you need explicit alpha
Use when you need a readable alpha channel or when working with canvas, Three.js or other JS color APIs.
rgb(245, 200, 66) · rgba(245, 200, 66, 0.8)
HSL
Easier to tweak by hand
HSL maps to hue, saturation and lightness — making it easier to darken, lighten or shift a color manually.
hsl(44, 90%, 61%)
OKLCH
Perceptually uniform palettes
Equal numerical changes feel like equal visual changes — ideal for accessible, harmonious design systems.
oklch(83% 0.16 89)
Design tools that respect your workflow
Tool Matic design tools are built around one principle: get out of your way. Pick a color, get the value you need, copy it, done.
All outputs are paste-ready in the format your code expects — HEX, RGB, HSL, OKLCH, CSS strings, SVG, or data-URIs. Files that need processing are handled entirely in your browser.
What you get
- Paste-ready output HEX, RGB, HSL, OKLCH, CSS strings — all with a copy button.
- Runs in your browser All processing stays in your browser. Nothing reaches our servers.
- WCAG contrast checking Contrast Checker reports contrast ratios against WCAG 2.2 thresholds.
- Works offline After first load, all tools work without a connection.
Frequently asked questions
Do Tool Matic design tools send my data anywhere?
No. Every design tool on Tool Matic runs entirely in your browser using client-side JavaScript. Your color values, palette data, and CSS outputs are never transmitted to a server — open any tool and start immediately.
Do you upload my data or store my outputs?
No. Tool Matic design tools — including the Color Picker, Color Palette Generator, Gradient Generator, and Contrast Checker — process everything client-side. No data leaves your browser tab. You can verify this by opening DevTools and watching the Network tab while you use any tool.
Which color format should I use in CSS - HEX, RGB, HSL, or OKLCH?
Use whichever fits the job. HEX is compact and ubiquitous. RGB and RGBA add an explicit alpha channel. HSL maps to hue/saturation/lightness which is easier to tweak by hand. OKLCH is perceptually uniform, so equal numerical changes feel like equal visual changes - useful for accessible palettes. The Color Picker and HEX to RGB Converter output all of these.
How do I check whether my colors meet WCAG contrast requirements?
Compare your foreground and background colors against the WCAG 2.2 contrast ratio thresholds: 4.5:1 for body text, 3:1 for large text and UI controls, 7:1 for AAA. Use the Contrast Checker — enter your foreground and background colors to get the ratio and an instant AA/AAA pass/fail result.
Which image format is best for the web - PNG, JPG, WebP, or AVIF?
For photos, AVIF gives the smallest file size with good quality, with WebP as a strong fallback. JPG is still fine when broad compatibility matters. PNG is the right choice when you need lossless quality or transparency. SVG is best for logos, icons, and anything geometric that needs to scale. Choose by content first; pick the codec that keeps the file smallest at acceptable quality.
Can I use these design tools offline?
You need a connection for the first page load. After that, the tools keep working because the work happens in your browser - no server round-trips during use.
Can I copy outputs directly into my code?
Yes. Outputs are paste-ready as HEX, RGB, HSL, OKLCH, CSS strings, SVG, or data-URIs depending on the tool. Each result has a copy button.