About Gib Color

This site exists because of a specific, repeated annoyance: colour pickers give you hex, RGB and maybe HSL, and then you have to go and work out the rest yourself. If you write shaders, that means dividing by 255 by hand and hoping you remembered which colour space the value is supposed to be in.

What it does differently

Gamma and linear are both first-class. A vec3 written straight to the framebuffer and a vec3 feeding a lighting calculation are different numbers for the same colour. Both are shown and both are labelled, computed with the exact piecewise sRGB transfer function rather than a pow(2.2) approximation. The same distinction is respected for engine types, so Unreal's FLinearColor gets linear values while its FColor gets encoded bytes.

Input is not restricted to two or three formats. Anything on theformat cheat sheet can be pasted back in, plus a few things that are not output formats at all — packed decimal integers, percentage triples, bare numbers with brackets or semicolons still attached from wherever you copied them.

Ambiguity is surfaced rather than guessed. A bare 1, 0, 0 could be normalised floats or a 0–255 triple. An eight-digit hex could be RGBA or ARGB. Instead of picking one silently, the tool ranks the possible readings, tells you which one it used, and lets you switch with one click.

How the maths works

Every colour is held as CIE XYZ with a D65 white point, in floating point, with alpha alongside. All 44 output formats are computed from that single canonical value rather than by chaining one format into the next, so nothing accumulates rounding error and nothing gets clamped before it needs to be.

Conversions follow the CSS Color 4 specification, which means the values match what browsers produce. Matrix inverses are derived from the published forward matrices at load time rather than transcribed separately — transcribing both invites a typo that only shows up as a subtly wrong colour, and in OKLab's case the cube root between stages amplifies any inconsistency enough to break round-tripping.

When a colour falls outside the gamut of the format being written, chroma is reduced in OKLCh while lightness and hue are held, following the CSS Color 4 gamut mapping algorithm. Clipping each channel independently is simpler but visibly shifts hue on saturated colours.

How it is tested

The colour engine has no dependencies and no framework code in it, which makes it straightforward to test properly. The suite checks reference values published in the CSS Color 4 specification, verifies that every colour space round-trips through XYZ, and asserts that every output format parses back through the input parser to the same colour it started from. That last property test has caught real bugs, including one where a nestedvec4(vec3(0.5), 1.0) had the 3 in vec3 read as a channel value.

How it is built

Astro generates every page ahead of time as static HTML. The picker is a Vue component hydrated as an island; the 204 colour pages, the conversion pages and the guides ship no framework JavaScript at all, just a few hundred bytes to handle copy buttons. There are no web fonts, so nothing shifts as the page loads.

Costs and ads

The tool is free and there is no account to make. Advertising may be added to cover hosting, in reserved slots with fixed heights so that nothing on the page moves when an ad loads or fails to load. See the privacy page for what that would mean for your data.

Corrections

Colour maths has a lot of sharp edges and it is entirely possible something here is wrong. If you find a conversion that disagrees with a source you trust, it is worth reporting — specific reference values are much easier to act on than a general impression.