What is CSS color(srgb-linear)?

Introduced in CSS Color Module Level 4, `color(srgb-linear r g b)` allows web developers to specify colors in the linear-light sRGB color space without manual gamma conversion.

Updated: August 2026 • Verified v1.2

Hex to Linear RGB & Normalized Shader Float Converter

Q: Why is linear RGB necessary for 3D shaders and lighting?

Computer monitors apply a non-linear gamma curve (~2.2) to match human eye perception. However, physical calculations (like light reflection and blending) require linear color values where 0.5 light really is twice as intense as 0.25 light.

Creative & DesignDesign

Local Browser Execution: Your input is processed locally in your browser and is not sent to UTL servers.

if (C <= 0.04045) C_lin = C / 12.92; else C_lin = ((C + 0.055) / 1.055)^2.4

Was this calculation helpful?

Understanding Your Results

Applies the exact IEC 61966-2-1 sRGB-to-Linear gamma expansion curve, outputting 8-bit RGB, normalized sRGB floats, linear RGB floats, CSS `color(srgb-linear ...)`, and GLSL/WGSL `vec3` snippets.

Practical Guidance & Next Steps

Passing non-linear sRGB values directly into PBR lighting shaders causes colors to look washed out or overly dark because mathematical light addition must occur in linear space.

What is this?

A computer graphics color utility that converts gamma-encoded sRGB Hex colors into linearized shader float vectors.

How does it work?

1. Pick a color or enter a Hex code (e.g. #3b82f6). 2. View instantaneous conversions across Linear RGB, normalized sRGB, GLSL, WGSL, and CSS Color 4. 3. Copy the desired vector format in 1 click.

Why use it?

Essential for physically accurate lighting and materials in Three.js, Babylon.js, Blender, and custom GPU shaders.

Technical Scope & Calculation Limitations

Applies standard IEC 61966-2-1 transfer function.

Frequently Asked Questions

Computer monitors apply a non-linear gamma curve (~2.2) to match human eye perception. However, physical calculations (like light reflection and blending) require linear color values where 0.5 light really is twice as intense as 0.25 light.

Windows Desktop & Widget Options