Skip to main content
ImageColorPix

Color Converter

Paste any color (HEX, RGB, HSL, HSV, CMYK or a name) and get every format instantly. Live preview, shades & harmonies, contrast chips, one-click copy. Hit Space for random.

#3B82F6

on white / black

Shades & tints, click to load

Harmonies, click to load

What is a color converter?

One color, every language

The same color can be written many ways: HEX for stylesheets, RGB for screens and code, HSL for building palettes, HSV for photo editors, CMYK for print, and LAB/XYZ for perceptual work. This tool translates between them instantly, type in any notation and every equivalent appears with a live preview.

Beyond conversion you get shades & tints, complementary/analogous/triadic harmonies, contrast previews on white and black, and shareable links, everything runs locally in your browser.

How to use

01

Enter any format

HEX (#3B82F6 or #39F), rgb(), hsl(), hsv(), cmyk(), “255,130,246” or names like teal. Auto-detected as you type.

02

Copy what you need

Each row has its own copy button plus Copy-all. Paste straight into CSS, Tailwind, Figma or print specs.

03

Explore variations

Click any shade or harmony to reload it. Jump to the contrast checker to verify readability.

Real-life examples

Figma HEX → CSS & Tailwind

Designer hands you #3B82F6, paste it to get rgb(59,130,246) for canvas, HSL for hover variants, and a shareable ?hex=… link for the ticket. Most-used flow on converter sites.

Hover & theme variants with HSL

Need a darker button on hover? Keep hue/saturation, drop lightness 10 points (e.g. hsl(217,91%,60%) → 50%). Copy the new HEX. No guesswork, consistent design tokens.

Brand kits in every notation

Document one brand color as HEX for CSS, RGB for apps, HSL for theming and CMYK for letterhead, side by side. Click any shade to reload it and build the full 50–950 scale.

Print packaging check

Screen brights shift on press. Paste the HEX to preview naive CMYK (e.g. vivid blue → high cyan/magenta), then confirm with proofs and ICC profiles before production.

Photo & canvas math with HSV/RGB

Editors think in HSV/HSB (Photoshop), code thinks in RGB channels 0–255. Convert hsv(217,76%,96%) to channels for scripts, shaders or image pipelines.

Debug mismatches & contrast

Color looks off across platforms? Convert to compare exact channels, check the white/black chips, then jump to the contrast checker to verify readability before shipping.

Frequently asked questions

1What is the difference between HEX, RGB and HSL?
Top-asked. HEX and RGB are the same 24-bit color: #FF0000 is byte-for-byte rgb(255,0,0); HEX is compact for CSS, RGB exposes channels for code. HSL reframes it as hue/saturation/lightness, so hover shades and themes need only one number changed.
2Which input formats are accepted?
HEX 3/6 with or without #, rgb()/hsl()/hsv()/cmyk() comma or space syntax, plain “r,g,b” triples, and CSS names like teal. Anything unparsable shows a hint and keeps the last valid color.
3Why do numbers look different if it is the same color?
Bases differ, not the color: HEX is base-16, RGB is 0–255 decimals, HSL is degrees + percents. Small rounding (±1) after conversion is normal floating-point behavior.
4When should I use HSL or HSV instead of HEX?
When tuning visuals: keep hue, lower saturation for muted themes, or drop lightness for hover/dark-mode steps. HSV matches picker UIs; HSL matches theming mental models. Ship the result as HEX.
5Is CMYK accurate? Will it match print?
Most-asked print question. Our CMYK is standard naive math, good for previews, not press-accurate. Ink, paper and ICC profiles shift real output, so proof critical packaging and treat the row as a starting point.
6How do I copy for CSS, Tailwind or Figma?
Each row has its own copy button plus Copy-all for the full block. Paste HEX into variables, RGB into canvas code, or use shades to fill a Tailwind-style scale. The URL (?hex=…) bookmarks the exact color for handoff.
7Does it handle transparency or out-of-range values?
This converter is opaque-only by design (HEX/RGB/HSL without alpha) to keep rows comparable. Out-of-range channels are clamped (e.g. 300 → 255), not rejected, so pastes never break the preview.
8Is my data uploaded?
No. All conversions run locally in your browser. Free, no signup, shareable links stay on your machine until you send them.

Explore more color tools

Contrast Checker

WCAG text readability grades

Palette Generator

Random harmonies + image mode

Gradient Generator

Linear, radial & conic CSS

Image Color Picker

Pick any pixel from any image