A HEX code is the six-character #RRGGBB string that CSS, Figma, Photoshop and most Mac design tools use to describe a color, and every HEX code is just three RGB channel values written in base-16. Each pair of hex digits covers 00–FF, which is the same range as 0–255 in decimal — so the full six-digit format describes 256 × 256 × 256 = 16,777,216 colors, the same 24-bit space your Mac's display, Safari and design apps all rely on. Converting between the two notations is one of the most common everyday chores for anyone working with color on macOS, because Apple ships a built-in tool that hands you RGB and almost nothing in your stylesheet actually wants RGB. macOS's Digital Color Meter, for example, shows the pixel under your cursor as a triplet like "59, 130, 246" in sRGB, but the matching CSS color is #3b82f6, and no stock macOS app rewrites one as the other. A browser-based RGB to HEX converter closes that gap: type the RGB triplet you just sampled and it returns the exact six-digit hex your CSS expects, with a live swatch so you can confirm the shade before pasting.

rgb to hex on mac
RGB to HEX on Mac: Convert Colors in Your Browser

Why Mac Users Hit the RGB-to-HEX Gap

macOS gives you plenty of ways to read a color from the screen, but almost none of them hand you a hex string directly. Digital Color Meter (lives in Applications → Utilities) shows the pixel under your cursor as decimal RGB and the floating "image" format by default; switching the display to "sRGB" or trying to copy the value via Cmd+Shift+C still leaves you with a triplet like "59, 130, 246" rather than the #3b82f6 your stylesheet wants. Xcode's color panel can output hex, but only if you have the developer tools installed, and image editors such as Pixelmator or Acorn still default to RGB sliders when you open the color picker.

Third-party apps such as Sip, ColorSnapper 2 and iShot close the gap with a paid license or a permanent menu-bar icon, but for a one-off conversion while the Digital Color Meter window is already open, the fastest path is to leave macOS entirely and use a browser tab. Safari, Chrome and Firefox all run the conversion locally with JavaScript, so nothing leaves your Mac. That matters for unreleased product palettes, internal brand swatches and any other color you would rather not upload to a random web service.

Converting RGB to HEX on Mac in Four Steps

  1. Open the RGB to HEX converter in your browser of choice. Safari, Chrome and Firefox all work because the tool runs locally and has no dependencies to install.
  2. Click into the Red, Green and Blue fields and type each channel value between 0 and 255. For the popular UI blue that Digital Color Meter reports as "59, 130, 246", you enter 59, 130 and 246 in the three boxes.
  3. Read the matching HEX code that appears next to the live preview swatch. For the blue example above, the tool returns #3b82f6. The output is normalized to lowercase six-digit form with each pair zero-padded, so a channel value of 0 renders as 00, not a bare 0 — a detail that often breaks hand-written conversions.
  4. Click Copy next to the HEX value and paste it into your CSS file, Figma styles panel, Keynote color picker, or wherever the color is going.

If you have a HEX code from a stylesheet or a designer's spec and want to read it back as RGB — for example to plug the values into a Mac image editor — paste the hex into the HEX field instead. The shorthand form works too: #abc expands to #aabbcc, #f00 becomes #ff0000, and the leading # is optional. Input is case-insensitive, so ABC, #abc and abc all resolve to the same color.

Going the Other Way: HEX to RGB on Mac

The same tool handles the reverse direction, which matters on macOS because several built-in utilities still want a decimal RGB triplet rather than a hex string. Preview's "Adjust Color" panel, the macOS system color picker in "RGB sliders" mode, and AppleScript color references all speak RGB, so pulling a hex out of a Figma file usually means decoding it before you can use it on the desktop.

To convert back, paste your hex — with or without the leading # — into the HEX field. The matching Red, Green and Blue channel values appear immediately, and the swatch updates so you can confirm you have the right shade. For example, paste #3b82f6 and the tool returns 59, 130, 246 — exactly what Digital Color Meter would sample from the resulting swatch.

If your hex uses the three-digit shorthand, the converter doubles each digit before decoding: #abc becomes #aabbcc, which decodes to R=170, G=187, B=204. Out-of-range or fractional channel values are clamped to the valid 0–255 integer range rather than throwing an error, and any malformed hex (wrong length, illegal characters) is flagged clearly so you don't end up with a silently wrong color in your file.

Reading the HSL Readout

Alongside the HEX and RGB, the converter shows HSL — hue, saturation and lightness — for the same color. HSL describes the identical pixel in a way that's easier to reason about when you're tweaking a shade by eye on a Mac display. Hue is an angle from 0 to 360 degrees around the color wheel, and saturation and lightness are each 0–100% amounts.

That makes the readout useful for small adjustments. If a brand color looks a touch heavy on screen, you can read its lightness, mentally nudge it up a few percent, then convert the new HSL back into a HEX code your stylesheet can use — without redoing the decimal-to-hex math yourself. The conversion stays local to your browser tab, which keeps the iteration loop fast and avoids round-tripping palettes through a remote API.

Common Mac Workflows for HEX Values

A few everyday scenarios on macOS land in the converter:

  • Sampling with Digital Color Meter, then dropping the RGB into the tool to get a CSS-ready hex for a website mock-up or a Slack design review.
  • Pasting a designer's hex from a Figma file or design spec into the converter to read the RGB channels for a Mac image editor, the Preview "Adjust Color" panel, or a Keynote swatch library.
  • Documenting a brand color by sampling it from a screenshot, then pasting the resulting HEX into a shared Notion page or style guide so the rest of the team uses the exact same shade.
  • Pairing a sampled HEX with the color contrast checker to confirm that a body-text-and-background combination meets WCAG AA or AAA contrast rules before publishing.

Quick Reference: RGB Values and Their HEX

The table below pairs a handful of well-known RGB triplets with their exact HEX form, drawn from the same channel-to-hex mapping the converter uses.

RGBHEXCommon name
0, 0, 0#000000Black
255, 255, 255#ffffffWhite
255, 0, 0#ff0000Pure red
0, 255, 0#00ff00Green
0, 0, 255#0000ffBlue
59, 130, 246#3b82f6UI blue (Tailwind blue-500)

For any other value, plug it into the RGB to HEX tool and read the six-digit code from the preview. As one worked example, the red channel 59 converts to hex by dividing 59 by 16, which gives 3 with remainder 11; the remainder 11 is written as the hex digit B, so 59 in decimal becomes 3B in hex — the first pair you see in #3b82f6. The green and blue channels follow the same two-step division, giving 82 and F6 for the full six-digit code.

For a deeper look, see RGB to HSV Examples: Real Conversions From Common Colors.

For a deeper look, see Make Sure You Mix Two HEX Colors Correctly.