Developer Tools · Group 11 of 19
One live color lab, eight ways in. Convert between HEX, RGB, HSL and CMYK with the target format highlighted and every other format a click-to-copy away. Pick colors with a well, sliders and presets — or build a CSS gradient from two stops and an angle. The swatch, the readouts and the channel stats all repaint on every keystroke and every drag. Nothing is uploaded, nothing is stored.
Parses a hex color — with or without the #, in 3-digit shorthand or full 6-digit form, upper or lower case — and splits it into its red, green and blue channels. The swatch repaints as you type, the rgb() row is highlighted as the answer, and the other three formats sit right there for copying.
#0033FF
rgb(0, 51, 255) R 0 · G 51 · B 255 — the IrisTool blue, three channels.
Use it for canvas workdesign handoffthemingJS color math
The trip back: drag the three channel sliders — each track tinted with the color it would produce — and the channels are packed into a #RRGGBB string. Channels are rounded to the nearest integer, so a value computed in JavaScript drops straight into a stylesheet.
rgb(0, 51, 255)
#0033FF six hex digits, ready for CSS.
Use it for saving palettesCSS authoringdesign tokensexport
Re-expresses a color the way designers think about it: hue (the wheel, 0–360°), saturation (the intensity, 0–100%) and lightness (0–100%). HSL is the natural space for generating shades, tints and harmonious palettes — hold hue steady and move lightness, and the color stays in the family.
rgb(0, 51, 255)
hsl(228, 100%, 50%) a fully saturated blue-violet at mid lightness.
Use it for palette buildingshades & tintshover statescolor harmonies
Turns artist's dials back into machine channels. The three sliders have live gradient tracks — a rainbow for hue, a desaturation ramp for saturation, a black-to-white ramp for lightness — each one repainting as the others move, so you can feel the space as you drag. The conversion is exact within the sRGB gamut.
hsl(228, 100%, 50%)
rgb(0, 51, 255) round-trips losslessly with RGB → HSL.
Use it for procedural colorrandom palettesaccessible contrastanimation
Translates a screen color into print ink percentages — cyan, magenta, yellow and key (black) — using the standard naive transform. It's the right first estimate for mockups and spec sheets; professional print will still want an ICC profile, but this gets you in the right neighborhood.
#0033FF
cmyk(100%, 80%, 0%, 0%) all cyan, most magenta, no yellow, no black.
Use it for print mockupsspec sheetsbrand handoffpackaging
The reverse direction: drag the four ink sliders and watch the closest on-screen hex appear. Useful when a printer hands you ink values and you need to know what they'll look like on a screen — or when you're reverse-engineering a brand's print spec into a web palette.
cmyk(100%, 80%, 0%, 0%)
#0033FF ink on paper, approximated as light.
Use it for print-to-screenbrand matchingspec reviewreversing print specs
The full lab in one pane: a native color well, a hex field, three channel sliders with live-tinted tracks, and a strip of preset swatches for a running start. Every control drives the same color, and every format — HEX, RGB, HSL, CMYK — reads out below with its own copy button. Pick once, take them all.
pick any swatch, drag any slider
#0033FF · rgb(0, 51, 255) · hsl(228, 100%, 50%) · cmyk(100%, 80%, 0%, 0%) one color, four dialects, all in sync.
Use it for choosing colorsbuilding palettesdesign systemsquick lookups
Two stops, an angle and a direction — the CSS writes itself. Pick the start and end colors (well or hex field), drag the angle dial, choose linear or radial, and hit ⇄ to reverse the flow. The preview fills the swatch and a ready-to-paste background: declaration appears below, valid in every modern browser.
+ at 135°, linear
background: linear-gradient(135deg, #0033FF, #6E86FF); one line, straight into the stylesheet.
Use it for hero backgroundsbuttonscardsbanners
Color rules · everything works in the sRGB gamut — the space your screen actually displays · hex accepts #RGB, #RRGGBB, with or without the #, any case · RGB ↔ HSL round-trips exactly within the gamut · CMYK uses the standard naive transform — a first estimate, not an ICC profile · the picker's sliders and the gradient's stops all drive the same live preview · gradient CSS is a single background property, linear in degrees or radial as a circle · every readout has its own copy button · the swatch label flips between dark and light ink to stay readable on any color
This page has no backend and no database. Every channel split, every ink percentage computed and every gradient rendered just now happened inside your own browser tab — your colors never traveled a single centimeter of cable. Close the page and the palette is gone for good.
Because they're different physical models. RGB is additive — it describes light emitted by a screen, where red, green and blue add up to white. CMYK is subtractive — it describes ink absorbed by paper, where cyan, magenta, yellow and black subtract from reflected white light. The conversion here is the standard naive transform; professional print uses ICC profiles and will shift values further, so treat the CMYK figures as a solid first estimate.
No — the bench accepts it with or without the #, in either 3-digit shorthand (#03F) or full 6-digit form (#0033FF), upper or lower case. It normalizes everything to a full uppercase #RRGGBB in the readouts, so what you copy is always the canonical form.
No — HSL is just a different coordinate system for the same sRGB gamut, so the round trip is exact apart from integer rounding of the hue, saturation and lightness values, which is under one step in each. You can slide H, S and L freely and convert back without ever leaving the space your screen can display.
A single background property — linear-gradient(<angle>deg, <stop1>, <stop2>) for linear, or radial-gradient(circle, <stop1>, <stop2>) for radial. It's valid in every modern browser and ready to paste straight into a stylesheet or an inline style attribute.
No. IrisTool has no backend and no database. Every conversion happens inside your browser tab and disappears the moment you close or refresh the page. There is nothing to leak, because nothing is ever collected.