Color Toolkit.
All color tools in one place.

Pick colors, generate harmonies, extract palettes from images, and preview in mockups. 100% private, no uploads.

colorize Color Picker

Adjust RGB sliders, convert between formats, and save your favorite colors.
#2563EB
Red37
Green99
Blue235
Favorite colors

palette Palette Generator

Choose a color and a harmony rule. Export your palette as CSS, SCSS, or Tailwind config.

image Color Extractor

Upload an image and extract its dominant colors. Click any swatch to copy the HEX code.
upload
Drop image or click
JPG, PNG, GIF, WEBP · max 10MB

devices Mockup Preview

Test your colors on realistic UI mockups — cards, dashboards, products, and profiles.
Card Component
Classic UI card with button

CLICK FREE TOOLS

Preview your color palette in a realistic UI. Test contrast and harmony instantly.

Explore colors
Dashboard Analytics
Metrics and statistics card
TOTAL REVENUEtrending_up
$48,294
Users
+2,847
Conversion
+12.4%
Avg Order
$84
Product Card
E-commerce product display
headphones
Premium Headphones
$299
Profile Card
User profile and social stats
person
Sarah Johnson
Product Designer · Creative thinker
Posts
156
Followers
2.3k
Following
342

Four Color Tools, One Place

This toolkit brings together four essential color utilities: pick colors, generate palettes, extract colors from images, and preview them in realistic mockups.

Everything runs locally in your browser. Your data never touches a server — it stays on your device from start to finish.

Color Picker — How it works

You get precise control over any color. Use the RGB sliders to fine-tune each channel, or type a HEX code directly. The color updates in four formats at once: HEX, RGB, HSL, and CMYK. You can lighten, darken, saturate, or desaturate with one click.

Save your favorite colors to local storage. Export them as a text file or clear the list and start over. Everything stays on your device.

Best for: Designers who need precise color control, developers who need color conversions, and anyone building a color palette.
Palette Generator — How it works

Pick a base color and one of six harmony rules: Complementary, Analogous, Triadic, Split Complementary, Tetradic, or Monochromatic. The tool builds a complete palette based on color theory.

You can export your palette as CSS variables, SCSS variables, or a Tailwind config object — ready to paste directly into your project.

Best for: UI/UX designers, developers building design systems, and anyone who needs consistent color palettes.
Color Extractor — How it works

Upload any image and the tool finds the most dominant colors. Up to 12 colors are extracted and shown as swatches with HEX codes.

Click any swatch to copy its HEX code. Use "Copy all colors" to get the entire palette as a list, or save it to your favorites.

Best for: Creating palettes from inspiration images, matching brand colors from logos, and finding color schemes from photos.
Mockup Preview — How it works

See your colors in context across four different UI mockups: a card component, a dashboard, a product card, and a profile card. Each mockup updates in real-time when you change the palette.

Choose from preset palettes, enter your own HEX values, or generate a random palette. Click any color swatch to copy its HEX code.

Best for: Testing color contrast and harmony, presenting color concepts to clients, and making final color decisions.

Why This Toolkit Is Better

Frequently Asked Questions

Are my colors and images safe?

Yes. All processing is client-side. Your colors and images are read into memory, processed, and the result is displayed — they're never sent anywhere.

What browsers are supported?

The toolkit works on modern browsers — Chrome, Firefox, Edge, and Safari. JavaScript must be enabled.

Where are my saved favorites stored?

Your favorites are saved in your browser's localStorage. They persist even after you close and reopen the page, but they are not stored on any server.

Can I use these colors for print design?

The HEX and RGB values are screen-based. For print, you'd want to convert to CMYK. The Color Picker tool shows CMYK values, which is a good starting point for print work.

What's the difference between the harmony types in the Generator?

Complementary uses opposite colors. Analogous uses adjacent colors. Triadic is evenly spaced. Split complementary is a variation of complementary. Tetradic uses two complementary pairs. Monochromatic uses variations of one color.