Colour format cheat sheet
A reference for what each format expects, because the ranges and orderings are where the bugs are. Every format here can be pasted into the picker and converted to every other.
Hex
| Form | Meaning | Example |
|---|---|---|
#rgb | Each digit doubled | #f00 is #ff0000 |
#rgba | Doubled, alpha last | #f008 |
#rrggbb | Two digits per channel | #ff0000 |
#rrggbbaa | Alpha last, CSS ordering | #ff000080 |
0xRRGGBB | C-style literal | 0xFF0000 |
0xAARRGGBB | Alpha first | 0xFFFF0000 |
The eight-digit ambiguity is the thing to watch. CSS puts alpha last; Android, Flutter and .NET put it first. Both readings are offered when you paste one.
CSS colour functions
| Function | Channels | Ranges |
|---|---|---|
rgb() | red, green, blue | 0–255 or 0%–100% |
hsl() | hue, saturation, lightness | 0–360, 0%–100%, 0%–100% |
hwb() | hue, whiteness, blackness | 0–360, 0%–100%, 0%–100% |
lab() | L, a, b | 0%–100%, roughly ±125 |
lch() | L, chroma, hue | 0%–100%, 0–150, 0–360 |
oklab() | L, a, b | 0%–100%, roughly ±0.4 |
oklch() | L, chroma, hue | 0%–100%, 0–0.4, 0–360 |
color(space …) | space-dependent | usually 0–1 |
Modern syntax separates channels with spaces and alpha with a slash:rgb(255 0 0 / 50%). The older comma form with rgba() still works everywhere.
color() accepts srgb, srgb-linear,display-p3, a98-rgb, prophoto-rgb,rec2020, xyz-d50 and xyz-d65. Note thatsrgb-linear gives you exactly the linear values a shader wants.
Shader vectors
| Language | Types | Range |
|---|---|---|
| GLSL | vec3, vec4 | 0–1 float |
| GLSL | ivec3, uvec3 | 0–255 integer |
| HLSL | float3, float4, half4 | 0–1 float |
| Unity ShaderLab | fixed3, fixed4 | 0–1 float |
| WGSL | vec3f, vec4f, vec3<f32> | 0–1 float |
None of these say anything about the colour space, which is the whole problem. Avec3 may hold display (sRGB) or linear values and only context tells you which. See sRGB vs linear for how to tell and why it matters.
A single argument splats: vec3(0.5) is the same asvec3(0.5, 0.5, 0.5).
Engine and framework constructors
| Platform | Constructor | Space | Range |
|---|---|---|---|
| Unity | new Color(r, g, b, a) | display | 0–1 |
| Unity | new Color32(r, g, b, a) | display | 0–255 |
| Unreal | FLinearColor(r, g, b, a) | linear | 0–1 |
| Unreal | FColor(r, g, b, a) | display | 0–255 |
| Godot | Color(r, g, b, a) | display | 0–1 |
| Flutter | Color(0xAARRGGBB) | display | packed ARGB |
| Flutter | Color.fromARGB(a, r, g, b) | display | 0–255 |
| Android | Color.rgb(r, g, b) | display | 0–255 |
| SwiftUI | Color(red:green:blue:) | display | 0–1 |
| UIKit | UIColor(red:green:blue:alpha:) | display | 0–1 |
The Unreal pair is the one to be careful with. FLinearColor andFColor are not the same numbers scaled differently — they are different colour spaces. See Unity Color vs Color32 andUnreal FLinearColor vs FColor for when to use each.
Bare numbers
Three or four numbers with no wrapper are genuinely ambiguous, and this site treats them that way rather than guessing:
- Any value above 1 means a 0–255 triple
- All values at or below 1 with a decimal point means normalised floats
- Whole numbers within 0–1, like
1, 0, 0, could be either — you get both, with floats ranked first because that reading is almost always what was meant
Percentages, square brackets, curly braces and semicolons are all tolerated, so pasting straight out of source code generally works.
Other packed forms
| Form | Meaning |
|---|---|
| Decimal integer | 16711680 is #ff0000 — Java's getRGB(), Discord role colours |
0x with 6 digits | Plain RGB literal |
Direct conversions
Each of these has its own page with an explanation of what changes in that particular conversion. Or paste into the picker and read off whichever row you need.
- hex → GLSL vec3
- hex → linear GLSL vec3
- hex → RGB
- hex → HSL
- hex → OKLCh
- hex → CMYK
- hex → Unity Color
- hex → Unreal FLinearColor
- hex → HLSL float3
- hex → WGSL vec3f
- hex → Flutter Color
- hex → SwiftUI Color
- hex → Display P3
- RGB → hex
- RGB → GLSL vec3
- RGB → OKLCh
- RGB → HSL
- HSL → hex
- HSL → RGB
- HSV → hex
- OKLCh → hex
- OKLCh → RGB
- GLSL vec3 → hex
- GLSL vec3 → RGB
- CMYK → hex
Questions
Is an eight-digit hex code RGBA or ARGB?
It depends on where it came from, which is exactly why it causes bugs. CSS orders it RGBA, so #ff000080 is half-transparent red. Android, Flutter and .NET order it ARGB, so 0xFF0000FF is opaque blue. The prefix is your best clue: a hash usually means RGBA, a 0x usually means ARGB.
Why does rgb(0.8, 0.2, 0.1) come out black?
Because CSS defines rgb() channels as 0–255 or percentages, so 0.8 means 0.8 out of 255, which rounds to 1. If you meant normalised floats you want a shader vector or a bare triple instead.
What is the difference between HSV and HSB?
Nothing. They are two names for the same model. Photoshop calls it HSB, most code calls it HSV. Both differ from HSL, which uses a different third axis.