Overview
Pick colors and convert between every common format
Designers, developers, and content creators all work with colors but rarely in the same format. A designer hands you a HEX code from Figma. A backend developer needs the same color as RGB for an SVG. A print shop wants CMYK. The Tailwind config wants the HEX in square brackets. Switching between formats by hand is tedious and error-prone, which is what the ToolHub Color Picker is built to solve.
Click the swatch to open your system color picker, paste a HEX to start from a known value, or pick from the curated palette. All formats update in real time and copy with a single click.
Step-by-step
How to use the color picker
- 1
Pick a color
Click the large swatch to open your operating system native color picker, type a HEX value into the input below it, or click any of the curated preset colors. - 2
Read the formats
Every common format updates as you change the color: HEX, RGB, HSL, HSV, and CMYK. Plus a Tailwind class snippet and a CSS variable declaration ready to paste. - 3
Copy what you need
Click any format box to copy that value to your clipboard. The button gives you immediate visual confirmation when the copy succeeds.
Background
The five color formats explained
HEX
Six hexadecimal digits prefixed with a hash, like #8B5CF6. Each pair represents red, green, and blue intensity from 00 to FF (0 to 255). Most common format on the web because it is compact and easy to read.
RGB
Three values from 0 to 255 representing red, green, and blue, like rgb(139, 92, 246). Same data as HEX written differently. CSS, SVG, and Canvas APIs accept this directly. RGBA adds an alpha channel for transparency.
HSL
Hue, Saturation, Lightness, like hsl(258, 90%, 66%). Hue is an angle from 0 to 360 around the color wheel. Saturation and lightness are percentages. Best format for generating color palettes by varying just hue or lightness.
HSV (or HSB)
Hue, Saturation, Value (sometimes called Brightness), like hsv(258, 63%, 96%). Similar to HSL but with a different math model. Adobe products typically use HSV.
CMYK
Cyan, Magenta, Yellow, Key (black), like cmyk(43%, 63%, 0%, 4%). The format used by printers. Screens use additive light (RGB) but printers use subtractive ink (CMYK), which is why colors can look different on screen vs paper.
Use cases
When to use which format
Web development
HEX for CSS and Tailwind. RGB or RGBA for SVG, Canvas, and JavaScript color functions.
Brand design
Keep brand colors in HEX, but verify CMYK values for any print collateral (business cards, flyers, packaging).
Generative palettes
Use HSL to create harmonious palettes by rotating hue or shifting lightness in fixed steps.
Photo editing
Use HSV or HSL when adjusting saturation and brightness without changing the underlying hue.
Print production
Send CMYK values to your print shop. Their color management may slightly shift the result on paper.
Accessibility checks
Pick foreground and background colors and verify they meet WCAG contrast ratios for text legibility.
Common questions
Why does CMYK look slightly off?
CMYK is a print color space and screens use RGB. Conversions are mathematical approximations. The actual printed result depends on the inks, paper, and color profile your print shop uses. For critical print work, always do a small test print first.
How do I add transparency?
Use RGBA syntax: rgba(139, 92, 246, 0.5) for 50 percent opacity. HEX also supports an 8-digit form like #8B5CF680, where the last two digits are the alpha channel (80 hex equals 50 percent).
Why does my color look different on another device?
Monitors, phones, and printers all have different color profiles and gamuts. The same HEX code displayed on two screens can look slightly different. For pixel-perfect color, hardware calibration is required.
100% private