URL Encode Hash / Pound Sign (#)

The hash sign (#), also called the pound sign or number sign, is reserved in URLs as the fragment identifier delimiter. Everything after an unencoded # in a URL is treated as a fragment that references a section within the page and is never sent to the server. When you need a literal # in a URL path or query parameter, it must be encoded as %23.

Percent-encoded form: %23 represents the hash sign (ASCII code 35, hexadecimal 0x23). Encoding it ensures the character is treated as data rather than a fragment delimiter.

Critical behavior: The fragment portion of a URL (everything after #) is handled entirely by the browser. It is never included in HTTP requests sent to the server. This means that if you pass a color code like #FF5733 unencoded in a query parameter (/api?color=#FF5733), the server receives only /api?color= and the rest is silently discarded as a fragment.

JavaScript behavior:

encodeURIComponent("#FF5733") // "%23FF5733"
encodeURI("#FF5733")          // "#FF5733" (does NOT encode #)

// Correct way to pass a hex color in a URL
const url = `/palette?color=${encodeURIComponent("#FF5733")}`;
// "/palette?color=%23FF5733"

Common scenarios:

• Passing CSS color codes (hex colors) in URL parameters
• Sharing URLs that contain anchor references as parameter values
• C# or F# language names in URLs (e.g., documentation links)
• Issue or ticket numbers in formats like #1234
• Social media hashtags in URL parameters

Pitfall: This is one of the sneakiest URL encoding bugs because the failure is silent. The browser simply treats everything after the unencoded # as a fragment. Server logs show a truncated URL, and debugging can be frustrating because the URL looks correct in the browser's address bar (browsers display fragments). Always encode hash signs in parameter values, and be especially careful with color pickers or design tools that include hex color values in URLs.