Tinker Tools

Color Converter Instant

Convert colors between HEX, RGB, and HSL formats instantly. All processing is done locally in your browser—no data is ever sent to a server.

HEX
RGB
HSL

How it works

1. Pick or Enter a Color

Use the native color picker or type a color value in any supported format — HEX, RGB, or HSL. The tool auto-detects and parses your input.

Local Processing

2. See All Formats

All color formats update in real time. Edit any field and watch the others sync instantly, along with a large live color preview.

Real-Time Sync

3. Copy Any Format

Each format has a one-click copy button. Grab the exact value you need for CSS, design tools, or any other application.

One-Click Copy

What is Color Conversion?

Color conversion translates a color value from one model to another. You might have a brand color defined as HEX #1A73E8 in your style guide and need its RGB equivalent for a Canvas API call, its HSL form for a CSS animation, or its CMYK breakdown for a print brochure. Each model describes the same visible color using a different coordinate system. HEX packs red, green, and blue into a six-character string — two hexadecimal digits per channel, giving 256 levels each and 16,777,216 possible combinations. RGB spells out the same channels as decimal integers from 0 to 255. HSL rethinks color as hue on a 360-degree wheel, saturation as a percentage, and lightness as a percentage — making it far easier to create tints, shades, and harmonies by adjusting one axis at a time.

HSB — also called HSV — is closely related to HSL but defines brightness differently. In HSB, a brightness of 100% means the color is as vivid as possible at that hue, while in HSL a lightness of 100% always produces white. Designers working in Photoshop or Figma encounter HSB constantly because those tools use it as their default picker model. CMYK — cyan, magenta, yellow, and key (black) — is the model used by commercial printers. It is subtractive: inks absorb light rather than emitting it. A color that looks vibrant on your monitor in RGB may fall outside the narrower CMYK gamut, causing a noticeable shift when printed. Converting early and previewing the CMYK result saves you from expensive reprints.

This tool converts between HEX, RGB, HSL, HSB, and CMYK instantly. Type or paste a value in any supported format and the other representations update in real time. All math runs in your browser — no server calls, no tracking pixels, no cookies. You get accurate conversions based on the standard sRGB color space defined in IEC 61966-2-1, which is the default for web browsers, CSS, and most consumer displays.

Key Features and Benefits

  • Five-model conversion — Enter a color in HEX, RGB, HSL, HSB, or CMYK and instantly see the value in every other model. No need to run separate conversions for each target format. Change one field and the rest recalculate in under a millisecond.
  • Live color preview — A large swatch updates as you type so you can visually verify the color before copying any value. This catches typos immediately — if you meant #1A73E8 but typed #1A73B8, the preview shows a noticeably different blue and you know to fix it.
  • One-click copy — Click any output field to copy it to your clipboard in the exact syntax your code expects. The HEX field copies with the hash prefix. The RGB field copies as rgb(26, 115, 232). The HSL field copies as hsl(217, 84%, 51%). Paste directly into your CSS, JavaScript, or design tool without reformatting.
  • CSS color function output — Modern CSS supports rgb(), hsl(), hwb(), lab(), lch(), oklch(), and color() functions. This tool outputs values in the formats that browsers actually parse, including the newer space-separated syntax from CSS Color Level 4 — rgb(26 115 232) without commas. You choose whether to copy the legacy comma syntax or the modern space syntax.
  • Web-safe color indicator — The original web-safe palette contained 216 colors — six evenly spaced values per channel (0, 51, 102, 153, 204, 255 in decimal, or 00, 33, 66, 99, CC, FF in hex). Modern displays render the full 24-bit spectrum, making web-safe colors largely historical. Still, the tool flags when your color lands on the web-safe grid, which can be useful for retro design projects or extremely constrained environments.
  • Accessibility contrast preview — As you convert a color, the tool shows its contrast ratio against both white (#FFFFFF) and black (#000000). This quick check tells you whether your color works as text on a light background or as a background behind white text — before you even open a dedicated contrast checker.

How to Convert Colors Online

  1. 1

    Enter your starting color

    Type or paste a color value into any of the input fields. You can enter a HEX code like #FF5722, an RGB triplet like rgb(255, 87, 34), an HSL value like hsl(14, 100%, 57%), an HSB value like hsb(14, 87%, 100%), or a CMYK set like cmyk(0, 66, 87, 0). The tool auto-detects the format and highlights the field you are editing.

  2. 2

    Read the converted values

    All other fields update instantly. If you entered a HEX code, you now see the exact RGB integers, the HSL percentages, the HSB percentages, and the CMYK percentages. Each value is rounded appropriately — RGB to whole integers, HSL and HSB to one decimal place, CMYK to whole percentages.

  3. 3

    Verify with the color swatch

    Look at the preview swatch next to the input fields. It renders the color at a large enough size — at least 120x120 pixels — to judge undertones and saturation accurately. Screens can distort subtle colors, so if precision matters for print work, cross-reference the CMYK values with a physical Pantone swatch book.

  4. 4

    Copy the value you need

    Click the copy icon next to any field. The value lands on your clipboard in the correct syntax for that model. Paste it into your CSS file, your design tool's color input, your JavaScript constant, or your print spec sheet. The tool confirms the copy with a brief tooltip so you know it worked.

  5. 5

    Adjust and iterate

    Need a lighter version? Switch to the HSL field and bump the lightness from 51% to 70%. Want a desaturated variant? Drop the saturation from 84% to 40%. Working in HSL or HSB makes these adjustments intuitive because each axis controls a single perceptual attribute. The other fields update as you go, so you always have every format available.

Expert Tips for Working with Color Models

Use HSL for design-time adjustments and HEX or RGB for production code. HSL maps to how humans think about color — hue is the color family, saturation is intensity, lightness is how bright or dark. Creating a color palette in HSL is straightforward: pick a hue, then generate variants by stepping lightness in 10% increments. You get a natural tonal scale without fiddling with three separate RGB sliders. Once you have settled on your palette, convert to HEX for your CSS variables. HEX is compact — six characters versus up to 16 for an hsl() function call — and every developer recognizes it on sight.

Be careful with CMYK conversions for print. An sRGB-to-CMYK conversion is a rough approximation unless you use an ICC color profile specific to your printer, paper, and ink set. The generic conversion assumes a standard SWOP coated profile, which works reasonably well for offset printing but may be off for digital presses or uncoated stock. If color accuracy is critical — packaging, brand materials, fashion textiles — always request a proof from your print vendor and compare it against your screen rendering under D50 illumination, the standard for print evaluation. The CMYK values from this tool give you a solid starting point, not a final specification.

Understand gamut boundaries. sRGB covers roughly 35% of the visible spectrum as mapped by the CIE 1931 chromaticity diagram. Display P3 — the wide-gamut space used by modern Apple and Samsung screens — covers about 26% more than sRGB. When you pick a vivid orange in Display P3 and convert it to sRGB, the result gets clipped to the nearest reproducible value, losing saturation. CSS now supports the color() function with the display-p3 color space, letting you target wider gamuts directly: color(display-p3 1 0.5 0). Use the @media (color-gamut: p3) query to serve enhanced colors to capable screens while falling back to sRGB for others.

Pay attention to perceived lightness. Two colors with identical HSL lightness values can look very different to the human eye. Pure yellow at hsl(60, 100%, 50%) appears much brighter than pure blue at hsl(240, 100%, 50%), even though both are at 50% lightness. This happens because human vision is most sensitive to green-yellow wavelengths around 555 nm — a phenomenon described by the CIE luminous efficiency function. The WCAG relative luminance formula accounts for this by weighting the red, green, and blue channels differently: L = 0.2126R + 0.7152G + 0.0722B. When building accessible color systems, use relative luminance rather than HSL lightness to ensure consistent perceived brightness across your palette.

Related Tools

Color Contrast Checker

Verify that your converted color meets WCAG contrast requirements

Color Palette Generator

Build harmonious palettes using the color models you just converted

CSS Gradient Generator

Create smooth gradients between converted color values

Color conversion sits at the center of every design-to-development workflow. Designers think in HSB inside Figma, developers write HEX in CSS, and print vendors need CMYK on their plates. A fast, accurate converter eliminates the friction between these worlds. Pair it with a contrast checker to verify accessibility, a palette generator to explore color harmonies, and a gradient tool to blend colors smoothly. Together, these tools turn color selection from guesswork into a precise, repeatable process — one that looks right on screen, prints correctly on paper, and meets accessibility standards for every user.

Frequently Asked Questions

Recommended Tools

Image Resizer

Resize images instantly in your browser. Adjust width, height, and format with aspect ratio lock.

Image Compressor

Compress images with adjustable quality. Reduce file size while preserving visual quality.

Color Contrast Checker

Check WCAG color contrast ratios between text and background for accessibility compliance.