PDFFlare
7 min read

How to Convert HEX to RGB (and Back): Color Codes Explained

CSS uses HEX. Photoshop prefers RGB. Figma shows both plus HSL. Sketch adds HSB. Tailwind classes map to HEX. Brand guidelines arrive as Pantone. Designers and developers deal with the same colors in half a dozen different formats every day — and translating between them by hand is slow, error-prone, and completely unnecessary.

This guide explains the three most important color formats — HEX, RGB, and HSL — when to use each, and how to convert between them instantly using PDFFlare's free Color Converter.

HEX, RGB, HSL: The Three Formats

HEX (Hexadecimal)

HEX is the web standard. #FF6A00 means 255 red, 106 green, 0 blue — PDFFlare orange. Each pair of hex characters represents one of the three color channels (00-FF in hex = 0-255 in decimal).

  • 6-digit: #FF6A00 — standard form.
  • 3-digit shorthand: #F60 expands to #FF6600. Only works when each channel has matching digits.
  • 8-digit with alpha: #FF6A0080 adds 50% opacity. The last two hex digits are the alpha channel.

RGB (Red, Green, Blue)

RGB expresses the same color in decimal: rgb(255, 106, 0). More verbose than HEX but easier for humans to reason about (“add 20 to green” is obvious in RGB, awkward in HEX).

Modern CSS also supports rgb(255 106 0 / 50%) with spaces and a slash-separated alpha channel.

HSL (Hue, Saturation, Lightness)

HSL is the most human-friendly format:

  • Hue (0-360°): The color on the color wheel. 0° = red, 120° = green, 240° = blue.
  • Saturation (0-100%): How vivid the color is. 0% = gray, 100% = maximum vividness.
  • Lightness (0-100%): Brightness. 0% = black, 50% = the pure hue, 100% = white.

Example: hsl(25, 100%, 50%) for PDFFlare orange. Want a lighter version? Change 50% to 70%. Darker? 30%. HSL makes building color palettes intuitive in ways HEX and RGB do not.

How to Convert Colors (Step by Step)

  1. Open the tool: PDFFlare's Color Converter.
  2. Enter a color: Paste a HEX, RGB, or HSL value in any of the input fields, or use the color picker.
  3. See all formats at once: The tool shows the equivalent HEX, RGB, and HSL values simultaneously.
  4. Copy the format you need: One-click copy for each format.

When to Use Each Format

Use HEX For:

  • CSS colors — shorter, industry default
  • Pasting into design tools (Figma, Sketch, Photoshop)
  • Sharing colors in Slack, email, or documentation
  • Brand guidelines (every brand book lists HEX values)

Use RGB For:

  • Dynamically calculated colors in JavaScript (easier arithmetic)
  • Colors that need alpha transparency
  • Legacy graphics software that insists on RGB

Use HSL For:

  • Building color palettes (shift hue for variants, shift lightness for shades)
  • CSS theming (hover states, active states, disabled states)
  • Accessibility work — lightness controls contrast directly
  • Dark mode support (flip lightness, keep hue)

Manual HEX to RGB Conversion

If you are somehow without a tool, here is the manual process:

  1. Split the 6-digit HEX into three pairs: #FF6A00 → FF, 6A, 00.
  2. Convert each pair from hex to decimal:
    • FF = 15×16 + 15 = 255
    • 6A = 6×16 + 10 = 106
    • 00 = 0
  3. Result: rgb(255, 106, 0).

For 3-digit shorthand (#F60), expand each digit by doubling it: F → FF, 6 → 66, 0 → 00.

Accessibility: Color Contrast

The WCAG accessibility standard requires specific color contrast ratios between text and background:

  • 4.5:1 for body text (WCAG AA)
  • 3:1 for large text (18pt+ or 14pt+ bold)
  • 7:1 for body text at WCAG AAA level

HSL makes contrast tuning intuitive. If your text fails the ratio, increase the lightness difference between foreground and background — no trial-and-error HEX edits required.

Building a Color Palette with HSL

Start with a base color in HSL: hsl(25, 100%, 50%). Build variants by modifying one dimension at a time:

  • Tints (lighter): Increase lightness. hsl(25, 100%, 70%), hsl(25, 100%, 85%).
  • Shades (darker): Decrease lightness. hsl(25, 100%, 30%), hsl(25, 100%, 15%).
  • Tones (muted): Decrease saturation. hsl(25, 60%, 50%), hsl(25, 30%, 50%).
  • Complementary: Rotate hue by 180°. hsl(205, 100%, 50%) (blue, opposite of orange).
  • Analogous: Rotate hue by ±30°. hsl(355, 100%, 50%) (red) and hsl(55, 100%, 50%) (yellow).

Modern CSS Color Formats

CSS now supports several newer color formats worth knowing:

  • oklch() — perceptually uniform color space, better for smooth gradients and consistent lightness.
  • color-mix() — blend two colors by a percentage without manual math.
  • lab() and lch() — broader gamut for modern displays, supported in most 2024+ browsers.

For now, HEX, RGB, and HSL remain the everyday workhorses, and they will not be going anywhere.

Common Color Conversion Mistakes

  • Confusing HEX shorthand vs full notation. #F00 equals #FF0000; #F0Aequals #FF00AA. The shorthand only works when each channel uses repeated hex digits. Don't shorten arbitrary colors.
  • Mixing 0-255 RGB with 0-1 normalized RGB. CSS uses 0-255 (e.g. rgb(255, 0, 0)); shaders, OpenGL, and some graphics APIs use 0-1 floats. rgb(0.5, 0.5, 0.5) is invalid CSS.
  • Forgetting alpha channel ordering. CSS: rgba(255, 0, 0, 0.5) — alpha last. HEX: #FF0000FF — alpha last too (8-digit form). Some graphics tools (PNG metadata, certain APIs) put alpha first as ARGB. Mismatch causes red to appear transparent or white.
  • Comparing colors visually across color spaces. HSL with same lightness but different hue can look very different in perceived brightness — yellow at L:50 looks much lighter than blue at L:50. For visual consistency, use OKLCH or LCH if your audience supports them.
  • Color-picking from a screenshot vs the source. Screenshots may be subtly color-shifted by gamma or display profile. Always pick from the source design file when possible.

Color Accessibility: Contrast Ratios

Converting colors is only half the job — they need to be accessible. WCAG 2.1 contrast guidelines:

  • Normal text: 4.5:1 minimum (AA), 7:1 (AAA).
  • Large text (18pt+ or 14pt bold+): 3:1 (AA), 4.5:1 (AAA).
  • UI components and graphical elements: 3:1 minimum (AA).

When converting a color, also check its contrast against your background. A color picker that gives the contrast ratio next to the converted output saves a separate accessibility audit step.

Workflow Notes Beyond the Basics

Color code conversion is one of those small skills that pays off across years of design work because color formats keep multiplying rather than consolidating. The deeper point underneath all of this is that workflow tools earn their place not in the simple cases but in the cases where defaults fail. The simple cases are easy: drag, drop, click convert, done. The interesting cases are the ones where the defaults produce output that does not quite work, and the difference between a tool that survives a year of daily use and one that gets replaced is whether it gives you the knobs needed to handle those edge cases without leaving the tool. PDFFlare is built around that observation: every tool exposes the options that matter, the defaults work for ninety percent of cases, and the remaining ten percent have a clear path forward without requiring a different application or a complicated workflow. Try the tool on a real piece of work, identify where the defaults could be better for your specific use case, and adjust the relevant option. After a few iterations, you have a setting profile that matches your work better than any out-of-the-box default could, and the tool stops being a generic utility and starts being your tool, customized for what you actually do. That gradient — from generic utility to personalized tool — is the real value, and the time spent on the calibration pays back in every subsequent use of the tool over years of work.

One pattern worth internalizing about file workflows in general is that the cost of getting a setting wrong scales with how often you repeat the workflow. A one-off conversion where you accept the defaults loses you nothing if those defaults are slightly suboptimal. The same defaults applied to a recurring monthly process across hundreds of files accumulate into real time and quality losses over a year. The right discipline is to invest a few minutes calibrating a workflow the first time you set it up, document the settings somewhere you can find them later, and then run the calibrated workflow without further thought for the next six to twelve months. Re-evaluate when something changes, not on every individual run. This rhythm matches how most professionals work in practice — they have a few well-understood workflows that they execute on autopilot, and a much smaller number of new workflows that get the deliberate setup attention. The trick is to make sure your recurring workflows are the calibrated ones, not the default-accepting ones. PDFFlare's tools support this pattern by exposing the calibration knobs prominently and making them easy to discover, so the time you invest in setting up a workflow once compounds across every later execution. The end result is fewer surprises, more predictable output, and a noticeable reduction in the small frictions that interrupt focused work.

Wrapping Up

Color formats are a fact of life for anyone working in digital design or development. HEX for sharing, RGB for dynamic calculation, HSL for palette building. Knowing which to use — and being able to convert instantly — turns a small friction into a non-event. PDFFlare's Color Converter shows all three simultaneously, free, no signup.

Useful Companion Tools

Two more PDFFlare tools that pair well with this workflow:URL Encode/Decode and Markdown to HTML. Both are free, browser-based, and require no signup — same as the tool covered in this guide.

Related Workflows

Adjacent tools you might find useful while working through this guide: Color Converter and QR Code Generator. They handle different parts of the same workflow and pair naturally with what we've covered here.

Related Tools

One more habit worth mentioning: keep a small log of the settings you actually use for recurring workflows, ideally in plain text in a folder you can search later. The first time you find yourself trying to remember whether you used eighty percent quality or eighty-five, or whether the last conversion targeted Letter or A4, the value of the log becomes obvious. Most professionals lose more time re-deriving settings they have already chosen than they do on the underlying conversion work, and a five-line note in a project README solves the problem permanently. The discipline of writing down your decisions and the reasoning behind them turns ad-hoc workflow tweaking into a maintainable practice that survives team turnover, sabbatical months, and your own forgetfulness across enough time that the original context fades. This is the kind of small investment that distinguishes someone who has been doing this work for ten years from someone who has been doing it for one.

Back to all posts