Color Palette Converter & Picker

Convert colors between HEX, RGB, HSL, HSV, and CMYK client-side. Pick colors visually, generate lighter tints and darker shades, check WCAG 2.1 contrast ratios, and export palettes with 100% privacy.

Live

HEX
RGB
HSL
CMYK

Color Palette Converter & Picker

Convert between HEX, RGB, HSL, HSV, and CMYK color spaces, generate Tailwind-style shade and tint scales, and verify WCAG 2.1 accessibility contrast ratios entirely in your browser.

#3B82F6

Sample Preview Typography

rgb(59, 130, 246)

Color Value (HEX, RGB, or HSL):Auto-synchronized

Preset Palette Inspiration:

Color Space ConversionsClick any copy icon to copy formatted code

HEX

#3B82F6

HEX + Alpha

#3B82F6FF

RGB

rgb(59, 130, 246)

RGBA

rgba(59, 130, 246, 1)

HSL

hsl(217, 91%, 60%)

HSV

hsv(217, 76%, 96%)

CMYK

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

CSS Variable

--color-custom: #3b82f6;

Shade & Tint Palette (50 - 950)Click any shade to make it your active color

100

200

300

400

500

600

700

800

900

950

WCAG 2.1 Accessibility ContrastOptimal text: black

Against White (#FFFFFF)

3.68:1

Sample Heading TextBody copy text readability test.

White on Color

AA Normal (Fail ≥ 4.5)

AA Large (Pass ≥ 3.0)

AAA Normal (Fail ≥ 7.0)

AAA Large (Fail ≥ 4.5)

Against Black (#000000)

5.71:1

Sample Heading TextBody copy text readability test.

Black on Color

AA Normal (Pass ≥ 4.5)

AA Large (Pass ≥ 3.0)

AAA Normal (Fail ≥ 7.0)

AAA Large (Pass ≥ 4.5)

🔒 100% Local Processing — Color conversions and palette computations executed entirely within your browser sandbox. Nothing is ever uploaded.

Next Steps with this file

Continue directly into another tool without saving and re-uploading

1-Click Transfer • No re-upload required

How to use this tool

Use the native color picker or type/paste any color string (HEX, RGB, or HSL) in the input bar.
Instantly view mathematical conversions across HEX, RGB, HSL, HSV, and CMYK formats in the conversion grid.
Click the copy icon on any color card to quickly copy values in CSS-ready notation.
Inspect the Shade & Tint palette to explore lighter tints (50-400) and darker shades (600-950) of your selected color.
Check the WCAG 2.1 Contrast Ratio section to verify AA and AAA compliance for normal and large typography against dark and light backgrounds.
Click 'Randomize Color' to explore new palettes, or export your full palette specification as .json or .txt.

Frequently asked questions

Quick answers about file privacy, processing modes, formats, and device support.

No. All color conversions, mathematical transformations, shade/tint interpolations, and WCAG contrast evaluations run 100% locally inside your browser sandbox. No telemetry, design tokens, or color data are ever transmitted to any external server.

The converter supports HEX (3-digit and 6-digit hexadecimal with optional alpha), RGB (Red, Green, Blue), HSL (Hue, Saturation, Lightness), HSV/HSB (Hue, Saturation, Value/Brightness), and CMYK (Cyan, Magenta, Yellow, Key/Black) for print design contexts.

The tool computes relative luminance using the standard W3C WCAG 2.1 relative luminance formula (sRGB gamma expansion). It measures the contrast ratio between your color and pure white (#FFFFFF) and pure black (#000000), verifying whether it meets the 4.5:1 ratio for normal text (AA) or 7:1 for AAA compliance.

Tints are generated by mathematically blending the base color with pure white across progressive linear weight steps (stops 50 through 400). Shades are created by blending with pure black (stops 600 through 950), matching the familiar 11-step palette scale popularized by modern design systems like Tailwind CSS.

Yes. The input parser is highly forgiving and accepts raw hexadecimal (#3B82F6 or 3B82F6), shorthand hex (#38F), CSS rgb() notation (rgb(59, 130, 246)), comma-separated numbers (59, 130, 246), or CSS hsl() notation (hsl(217, 91%, 60%)).

You can export the entire palette configuration as a structured JSON file containing all color models, accessibility scores, and shade scales, or as a formatted plain text / CSS variables file ready to paste directly into your stylesheet.

developer

Featured

Hash / Checksum Generator

Generate cryptographic checksums and hashes (MD5, SHA-1, SHA-256, SHA-384, SHA-512) for text and files entirely in your browser with zero server uploads.

Text · Files · Hashes

Open

developer

Featured

HTML / CSS / JS Minifier & Beautifier

Minify and beautify HTML, CSS, and JavaScript code client-side. Strip comments, compress whitespace, view real-time payload savings, or format nested blocks with 100% in-browser privacy.

SQL Formatter & Beautifier

Format and beautify SQL queries with clause alignment, dialect selection (PostgreSQL, MySQL, SQLite, T-SQL, Oracle), keyword casing, and zero server roundtrips.