Is my color data sent to a server?

No. All color conversions and calculations run entirely in your browser using JavaScript. Nothing is sent to any server.

What is color harmony and how is it used in design?

Color harmony refers to color relationships on the color wheel that create visually pleasing combinations. Complementary colors are opposite on the wheel (high contrast). Analogous colors are adjacent (harmonious, calm). Triadic colors are evenly spaced 120° apart (vibrant balance). Split-complementary uses one base color plus two adjacent to its complement for high contrast with less tension.

How do I check color contrast for accessibility (WCAG)?

Select your foreground color (text color) and background color, and the tool calculates the WCAG contrast ratio. A ratio of 4.5:1 or higher passes WCAG 2.1 Level AA for normal text. A ratio of 7:1 or higher passes Level AAA. Large text (18pt+ or 14pt bold) only requires 3:1 for AA. The tool shows pass/fail badges for both standards.

What is the difference between RGB and CMYK color models?

RGB (Red, Green, Blue) is an additive color model used in digital displays — colors are made by mixing light. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model used in print — colors are made by absorbing light with ink on paper. A color that looks vibrant on screen in RGB may appear duller when printed in CMYK due to the smaller gamut of physical inks.

All tools CSS Box Shadow CSS Gradient JSON → TypeScript

🎨

Color Picker & Converter

Pick any color — instantly convert HEX, RGB, HSL, HSV, CMYK. Visual sliders, WCAG contrast checker, Tailwind shade scale, and color harmony. 100% in-browser.

100% in-browserHEX · RGB · HSL · CMYKWCAG AA/AAANo signup

#3B82F6

Pick

RGB Channels

130

246

HSL

217°

91%

60%

All Formats

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

HSVhsv(217, 76%, 96%)

CMYKcmyk(76%, 47%, 0%, 4%)

CSS oklchoklch(61.8% 0.2 217)

WCAG Accessibility

On white bg3.68:1

Aa Sample textAAAAALarge

On dark bg5.71:1

Aa Sample textAAAAALarge

Text on this backgroundBest text: White — 5.71:1

✓ AA Normal (4.5:1)✗ AAA Normal (7:1)✓ AA Large Text (3:1)

Tailwind-style Shade Scale

Click any shade to make it active

Color Harmony

Complementary

Analogous

Triadic

Split-comp

styles.css

:root {
  --color: #3B82F6;
  --color-rgb: 59, 130, 246;
  --color-hsl: 217deg 91% 60%;
}

You might also need

Browse all tools

CSS Box ShadowGenerate CSS box shadows CSS GradientBuild CSS gradients visually JSON → TypeScriptGenerate TS types from JSON JSON → ExcelExport JSON to Excel cURL ConverterConvert cURL to code All tools

The Complete Color Converter for Developers and Designers

Every developer hits the same wall: your design system uses HSL, Tailwind uses HEX, the brand guide uses RGB, and the print team wants CMYK. Switching between a browser DevTools color picker, a separate contrast checker, a palette generator, and a CSS variables snippet wastes minutes on a task that should take seconds.

This tool gives you every color format in one place. Paste a #HEX, enter rgb() values, or click the native color picker — and instantly see HEX, RGB, HSL, HSV, CMYK, a Tailwind-style 10-shade palette, WCAG contrast ratios, color harmony suggestions, and a ready-to-paste CSS variables block. Everything runs in your browser: no uploads, no API keys, no account.

How it works

Pick, Convert, Copy — in One Page

Pick or paste a color

Click "Pick color" to open the native browser color picker, or type a HEX value directly. You can also enter RGB or HSL numbers manually.

See all formats

HEX, RGB, HSL, HSV, and CMYK update in real-time as you adjust any field. Click any format's copy button to grab the value.

Check contrast and accessibility

WCAG AA and AAA badges tell you instantly whether your color passes accessibility guidelines for normal and large text.

Explore shades and harmony

Browse a 10-step Tailwind-style shade palette and four color harmony schemes. Click any swatch to select it as your active color.

Use cases

Why Developers and Designers Use a Color Converter

🎨

Design System Tokens

Convert brand HEX colors to HSL for CSS custom properties, then generate the full 50–900 shade scale for your design tokens.

♿

Accessibility Audits

Instantly check WCAG AA (4.5:1) and AAA (7:1) contrast ratios without opening DevTools or a separate checker.

🖨️

Print Design

Convert digital RGB and HEX colors to CMYK values that your print vendor can use without surprises in color accuracy.

💅

Tailwind CSS

Generate a complete 10-shade Tailwind-compatible palette from any brand color, ready to paste into tailwind.config.

📐

CSS Variables

Copy a ready-made :root { } block with --color, --color-rgb, and --color-hsl tokens for your stylesheet.

🤝

Design Handoff

Quickly translate colors from Figma (HSL) to code (HEX/RGB) during front-end implementation.

FAQ

Frequently Asked Questions

1How do I convert a HEX color to RGB?

Type or paste your HEX value into the HEX field — RGB values appear instantly below. You can also click the copy button next to the RGB field to copy the rgb() CSS value.

2What is WCAG contrast ratio and why does it matter?

WCAG contrast ratio measures text readability against a background. A ratio of 4.5:1 passes WCAG AA for normal text, and 7:1 passes AAA. Use this to ensure your color choices are accessible to users with low vision.

3What is the difference between HSL and HSV?

Both use Hue and Saturation, but differ in the third channel. HSL uses Lightness (100% = white, 0% = black). HSV uses Value/Brightness (100% = brightest hue, 0% = black). CSS uses HSL; graphics tools like Photoshop often use HSV.

4Can I use this tool offline?

Once the page has loaded, all conversions and calculations run entirely in your browser. No network requests are made after the initial page load.

5How do I convert RGB to HEX?

Enter your R, G, B values (0–255) in the RGB fields and the HEX equivalent updates instantly. Each channel is converted to its two-digit hex: R=255, G=99, B=132 becomes #FF6384.

6How do I convert a color to CMYK?

Paste your HEX or RGB color and CMYK values appear automatically. CMYK is derived by normalizing RGB to 0–1, finding the Key (black) as 1 minus the max channel, then calculating Cyan, Magenta, and Yellow from the remaining channels.

7How do I generate a Tailwind CSS color palette from a brand color?

The Tailwind shade tab generates shades from 50 (lightest) to 950 (darkest) from your brand color. Copy the values and paste into tailwind.config.js under theme.extend.colors to extend your palette.

8What is color harmony?

Color harmony refers to pleasing color relationships from the color wheel. Complementary (opposite, high contrast), analogous (adjacent, calm), and triadic (120° apart, vibrant) are the most common schemes used in UI and graphic design.

9How do I check color contrast for WCAG accessibility?

Select your foreground and background colors — the tool calculates the WCAG contrast ratio instantly. 4.5:1 passes Level AA for normal text. 7:1 passes AAA. Large text (18pt+) only requires 3:1 for AA.

10What is the difference between RGB and CMYK?

RGB is an additive model for digital displays (mixing light). CMYK is a subtractive model for print (absorbing light with ink). Colors vibrant on screen in RGB may look duller in CMYK print due to the smaller ink gamut.

11How do I generate CSS variables for a color?

Click the CSS Variables tab to get a complete :root block with --color (HEX), --color-rgb (for rgba()), and --color-hsl custom properties — ready to paste into your stylesheet.

12How do I pick a color from my screen using a color picker?

Chrome and Edge support the EyeDropper API — click the eyedropper icon to sample any pixel on your screen. On Safari or mobile, use a design app like Figma or the macOS Digital Color Meter, then paste the resulting HEX value into this tool.

Learn more

Developer Guides

📖CSS Color Best Practices 📖Design Token Workflows 📖Accessibility in UI Design 📖Tailwind CSS Customization Guide

Last updated: May 2026

Feedback for color_picker

Tell us what's working, what's broken, or what you wish we built next — it directly shapes our roadmap.

You make the difference

Good feedback is gold — a rough edge you hit today could be smoother for everyone tomorrow.

Feature ideas often jump the queue when lots of you ask.
Bug reports with steps get fixed faster — paste URLs or examples if you can.
Name and email are optional; we won't use them for anything except replying if needed.

Stay Updated

Get the latest tool updates, new features, and developer tips delivered to your inbox.

What you'll get

Product updates & new tools
JSON, API & developer tips
Unsubscribe anytime — no hassle

Get in touch

Feature ideas, bugs, or a quick thanks — we read every message.

support@unblockdevs.com