Color Studio

Professional color tools for designers and developers. Pick colors from anywhere, generate stunning palettes, and explore advanced color mixing techniques.

EyeDropper Support

60+ Named Colors

Smart Matching

Current Color

Royal Blue

Color Name

Blue

Color Studio - Palette Generator, Mixer, and Contrast Checker

Color Studio is a free browser tool that covers the full color workflow for designers and developers. Pick any color with the native EyeDropper API (Chrome and Edge) to sample it directly from your screen, then instantly see its values in HEX, RGB, HSL, HSV, and CMYK. The Palettes tab generates complementary, analogous, or triadic color schemes from any base color and lets you save up to ten palettes per session. Export any palette as CSS custom properties, SCSS variables, or a JSON array with one click.

The Mixer tab blends two colors at any ratio you choose with a live preview, and the Tools tab includes a WCAG contrast checker that calculates the contrast ratio between a text color and a background color and reports the AA and AAA compliance level. All calculations run locally in the browser using standard color math - no data is sent anywhere, and no account is needed.

100% freeNo sign-up requiredRuns entirely in your browserEyeDropper screen pick support

How to use it

1Open the Picker tab, click Pick from Screen (Chrome or Edge required) to sample a color anywhere on your display, or use the color input and type a HEX value directly. Click Random Color for instant inspiration.
2Copy any color format - HEX, RGB, HSL, HSV, or CMYK - using the individual Copy buttons below each format card.
3Switch to the Palettes tab, choose Complementary, Analogous, or Triadic from the Style dropdown, then click Save Palette to keep the current scheme in session memory.
4To export, pick CSS, SCSS, or JSON from the export format selector and click Export - the formatted snippet is copied to your clipboard.
5Use the Mixer tab to blend two colors and drag the ratio slider to find the right midpoint, then click Use This Color to apply the result to the main picker.
6Open the Tools tab to paste a background and text color into the contrast checker and read the WCAG ratio and AA/AAA result.

Key features

EyeDropper API integration for picking colors directly from any pixel on your screen (supported in Chrome and Edge).

Live format conversion across HEX, RGB, HSL, HSV, and CMYK with one-click copy for each format.

Color name and category lookup against a database of 60+ named web colors, with nearest-match fallback for custom shades.

Harmony palette generator with complementary, analogous, and triadic modes - up to five colors per scheme.

Session palette library that saves up to ten palettes so you can compare schemes without losing earlier work.

Export in CSS custom properties, SCSS variables, or JSON - ready to paste straight into your project.

WCAG contrast checker that calculates the exact contrast ratio and reports AA and AAA pass/fail for your text and background color pair.

Color mixer with a continuous ratio slider and real-time preview of the blended result.

Frequently asked questions

Does the EyeDropper work on every browser?

The EyeDropper API is supported in Chromium-based browsers including Chrome 95+ and Edge 95+. It is not available in Firefox or Safari. If your browser does not support it, you can still use the color input and HEX field to enter colors manually.

Are my saved palettes stored permanently?

Palettes are stored in React component state for the current browser session only. They are cleared when you close or refresh the tab. To keep a palette permanently, export it as CSS, SCSS, or JSON and save the snippet in your project.

What contrast ratio do I need to pass WCAG AA?

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text. The contrast checker in the Tools tab shows your ratio and the applicable compliance level.

Can I use the tool offline?

The tool works offline once the page has been loaded, since all color calculations are pure JavaScript with no external API calls. The EyeDropper and clipboard features require browser permission but do not need a network connection.

📖

Full Guide Available

Color Palette Picker Complete Guide

Explore color theory, complementary palettes, hex/RGB/HSL conversions, and design tips.

What's inside

Generate & fine-tune palettes

Export colors in any format

Common questions answered

Read Full Guide

Color Studio

Current Color

Color Studio - Palette Generator, Mixer, and Contrast Checker

How to use it

Key features

Frequently asked questions

Color Palette Picker Complete Guide

Related Articles & Guides

Color Palette Picker: Choose Perfect Colors for Design

Color Palette Picker: HEX, RGB, HSL Converter & Harmony Generator

Social Media Image Sizes: The Complete Guide (and How to Resize One Image for Every Platform)