Hex to RGB Vector Converter

Turn any HEX color into a normalized RGB vector, GLSL vec3 / vec4, CSS, JSON and HSL. Batch mode, alpha support and linear color space included.

Input

HEX color code(s) — one per line, or separated by commas

Pick color

Drag & drop a .txt, .css, .svg or .json file here to extract every HEX code inside.

Shortcuts: Ctrl+Enter convert · Ctrl+K copy all · Ctrl+S download · Ctrl+Backspace clear

Live preview

HEX--

RGB 0-255--

Relative luminance--

Contrast vs white--

Conversion options

Decimal places Uppercase HEX Linear color space Include alpha Opacity 1.00

Converted values

Batch results

Swatch	HEX	RGB 0-255	RGB Vector	Copy

Hex to RGB Vector Conversion: A Practical Guide for Designers, Developers, and 3D Artists

Written by AUTHOR NAME · Last updated October 10, 2026

Learn how to convert HEX colors into normalized RGB vectors, GLSL values, CSS colors, JSON, and HSL. This guide explains sRGB versus linear color, alpha channels, precision, batch conversion, and common mistakes.

A HEX color is a compact way to describe a screen color, but many graphics and development workflows require numeric RGB components instead. A shader, a game engine, a design-token pipeline, or a computer-vision script may need values between 0 and 1 rather than a string such as #4F46E5.

Our Hex to RGB Vector Converter performs that conversion in the browser. It can produce normalized RGB values, GLSL vec3 or vec4 syntax, regular RGB values, HSL, JSON, and downloadable batch results. The tool is client-side: color values are processed locally after the page has loaded.

What Is a Hex to RGB Vector Converter?

A Hex to RGB Vector Converter changes a hexadecimal color into a vector of red, green, and blue components. For example:

HEX:          #4F46E5
  RGB:          79, 70, 229
  Normalized:   [0.310, 0.275, 0.898]
  GLSL:         vec3(0.310, 0.275, 0.898)

The normalized values are calculated by dividing each 8-bit RGB channel by 255. The result is normally within the range 0 to 1, which is convenient for graphics programming and numerical processing.

How HEX to RGB Vector Conversion Works

1. Split the HEX code into channel pairs

A six-digit HEX color contains three two-digit hexadecimal values in this order: red, green, and blue. For #4F46E5, the pairs are 4F, 46, and E5.

Three-digit shorthand is expanded by repeating each digit. Therefore, #4AE becomes #44AAEE. Eight-digit HEX codes add an alpha channel at the end, so #4F46E580 contains red, green, blue, and alpha values.

2. Convert hexadecimal to decimal RGB

Hexadecimal uses base 16. The pair 4F equals 4 × 16 + 15 = 79. Applying the same calculation to the other pairs gives:

4F = 79
  46 = 70
  E5 = 229
  
  RGB = (79, 70, 229)

3. Normalize each channel

To obtain normalized RGB, divide every channel by 255:

Red   = 79  / 255 = 0.309803...
  Green = 70  / 255 = 0.274509...
  Blue  = 229 / 255 = 0.898039...
  
  Rounded result = [0.310, 0.275, 0.898]

sRGB and Linear RGB: What Is the Difference?

Dividing RGB values by 255 produces normalized sRGB-encoded values. These values are suitable when the goal is to reproduce the appearance of a HEX color in a typical screen-oriented workflow.

Graphics calculations such as lighting, physically based blending, and some compositing operations may instead require linear RGB. Linear values represent light intensity more directly. The correct choice depends on the stage of the rendering pipeline and the software being used; some tools perform the conversion automatically.

A commonly used sRGB-to-linear transfer function is:

linear = c / 12.92                         when c <= 0.04045
  linear = ((c + 0.055) / 1.055) ^ 2.4       otherwise

Do not apply this conversion twice. Check whether your engine, texture importer, or rendering framework already performs sRGB-to-linear conversion.

Common Output Formats

Normalized vector

[0.310, 0.275, 0.898]

This format is convenient for general calculations, Python scripts, numerical tools, and data pipelines.

GLSL vector

vec3 color = vec3(0.310, 0.275, 0.898);

Use vec4 when an alpha value is required:

vec4 color = vec4(0.310, 0.275, 0.898, 0.502);

Regular RGB

rgb(79, 70, 229)

This is the familiar 0–255 representation used in many CSS and design workflows.

JSON

{
    "hex": "#4F46E5",
    "rgb": { "r": 79, "g": 70, "b": 229 },
    "normalized": [0.309804, 0.274510, 0.898039]
  }

When Is a Normalized RGB Vector Useful?

Shaders: Use numeric components in GLSL, HLSL, Metal, and WebGL code.
Design tokens: Export one palette to web, mobile, and game-engine projects.
Game development: Enter exact color values in Unity, Unreal Engine, or other graphics tools while respecting their color-space settings.
Data processing: Convert a batch of color labels into numeric values for scripts or image-processing workflows.
Gradients: Interpolate numeric color components instead of trying to interpolate HEX strings.
Accessibility checks: Use relative luminance and contrast calculations when evaluating text and background colors.

Common Conversion Mistakes

Rounding too early: Keep more precision during calculations and round only for display or source code.
Confusing shorthand: #123 expands to #112233; it is not the same as #123456.
Ignoring alpha: In an eight-digit code, the final pair controls opacity. 00 is transparent and FF is fully opaque.
Mixing sRGB and linear values: Label your variables clearly and verify which color space the target application expects.
Applying linearization twice: Automatic engine conversion and manual conversion should not both be used for the same value.
Assuming HEX is suitable for print: HEX describes screen color. Print conversion normally requires a color-managed workflow and appropriate ICC profiles.

Recommended Workflow

Keep the HEX value as the canonical design-token value.
Convert it programmatically into the formats required by each platform.
Label values as sRGB or linear instead of using an ambiguous name such as BRAND_BLUE.
Use enough decimal places for the target application; three are often adequate for display, while more may be useful in shader calculations.
Verify the result against known colors such as #000000, #FFFFFF, and #808080.
Check contrast and test the result in the actual engine or browser where it will be used.

Frequently Asked Questions

What is a normalized RGB value?

A normalized RGB value is an RGB channel divided by 255, producing a value between 0 and 1 for standard 8-bit colors.

How do I convert #FF5733?

#FF5733 equals RGB (255, 87, 51). Dividing by 255 gives approximately [1.000, 0.341, 0.200].

Are #FFF and #FFFFFF the same color?

Yes. Three-digit shorthand repeats each digit, so #FFF expands to #FFFFFF.

What does the alpha channel do?

The alpha channel controls opacity. In an eight-digit HEX code, the final two digits represent alpha from 00 to FF.

Should I use sRGB or linear RGB?

Use sRGB when you need screen-oriented color values. Use linear RGB for calculations that model light, such as many lighting and blending operations. Follow the color-management rules of the target application.

Can I convert multiple HEX codes at once?

Yes. Paste one code per line or separate codes with commas or spaces. The converter can return a table and downloadable text, JSON, or CSV results.

Is HEX appropriate for CMYK printing?

No. HEX and RGB describe additive screen color, while print uses a subtractive color model. For reliable print output, use a color-managed conversion with the correct profile for the printer and paper.

Does the converter upload my color data?

The converter is designed to process inputs locally in the browser. Do not enter confidential information into any web tool unless its privacy practices are clear and acceptable to you.

Conclusion

HEX is a convenient storage and design format, while normalized vectors are better suited to calculations and graphics code. The conversion itself is simple: split the channels, convert from base 16 to base 10, and divide by 255. The most important practical detail is knowing whether the next step requires sRGB or linear RGB.

Use the converter above to create the format you need, preserve sufficient precision, and verify the result in the target application before shipping it.

Top Post Ad