Hex to Normalized RGB Converter
Convert a hex color to normalized RGB float values (0.0–1.0) for use in WebGL, GLSL shaders, and 3D graphics.
How to use this tool
- Enter a hex color (e.g. #3a86ff).
- Each channel is divided by 255 to produce a float in [0.0, 1.0].
- Paste the vec3() output directly into your GLSL shader code.
WebGL, GLSL shaders, and many 3D APIs expect RGB as floats in [0, 1]. Enter a hex color and get the normalized vec3 representation instantly.
Formula
Given a hex color #RRGGBB, each normalized float channel is:
Rn = parseInt(RR, 16) / 255
Gn = parseInt(GG, 16) / 255
Bn = parseInt(BB, 16) / 255
Each result is rounded to 4 decimal places. The GLSL vec3 form is: vec3(Rn, Gn, Bn).
How it works
The hex string is normalized to 6 digits (expanding 3-digit shorthand by doubling each character), then each pair of hex digits is parsed as a base-16 integer and divided by 255 to produce a float in the range 0.0–1.0. Results are rounded to four decimal places to keep GLSL shader literals concise and avoid floating-point noise.
Common mistake: dividing by 256 instead of 255. Some graphics references use 256 as the divisor for fast bit-shifting arithmetic, but 255 is the correct maximum value for an 8-bit channel. Using 256 means white (#ffffff) would normalize to approximately 0.9961 rather than the correct 1.0, which can cause subtle clamping errors in shaders that expect values in the strict 0.0–1.0 range.
Worked example
Normalize white (#ffffff) to vec3 floats
- Expand if needed: #ffffff is already 6 digits.
- Parse each channel: R = 0xFF = 255, G = 0xFF = 255, B = 0xFF = 255.
- Divide by 255: R_n = 255/255 = 1, G_n = 1, B_n = 1.
- Format as GLSL: vec3(1, 1, 1).
vec3 / float tuple: vec3(1, 1, 1) | R: 1, G: 1, B: 1
Common mistakes to avoid
- Dividing by 256 instead of 255, which means pure white (#FFFFFF) normalizes to 0.996 rather than exactly 1.0.
- Passing the shorthand 3-digit hex form (#RGB) without expanding it first -- #F0A should be expanded to #FF00AA before parsing.
- Applying gamma correction manually after conversion when the target shader already handles sRGB linearization, causing double correction.
Key terms
- Normalized color value
- A color channel expressed as a floating-point number in the range 0.0 to 1.0 instead of an integer 0–255. Most real-time graphics APIs (WebGL, OpenGL, Metal) use normalized values internally.
- vec3
- A three-component floating-point vector type in GLSL (OpenGL Shading Language). When used to represent an RGB color, its components are expected to be in the 0.0–1.0 range.
- WebGL / GLSL
- WebGL is the browser API for GPU-accelerated 3D graphics; GLSL is the C-like shading language used to write WebGL shaders. Both require colors as normalized floats, not 8-bit integers.
- 8-bit channel
- An RGB channel stored as an integer from 0 to 255 (2⁸ − 1 = 255). Dividing by 255 converts an 8-bit channel to the normalized 0.0–1.0 range expected by shader programs.
Frequently asked questions
- Why does WebGL use 0–1 range?
- OpenGL and WebGL work in normalized device coordinates throughout. Using 0–1 for color components is consistent with this design and avoids integer overflow.
- What is a GLSL vec3?
- A GLSL vec3 is a three-component floating-point vector. In shaders, vec3(r,g,b) represents an RGB color.