Color 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 color 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 that srgb-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 color space, which is the whole problem. A vec3 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 as vec3(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 and FColor are not the same numbers scaled differently. They are different color spaces. See Unity Color vs Color32 and Unreal 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 normalized 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 colors |
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 normalized 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.
More guides
- sRGB vs linear color in shadersWhat display (sRGB) and linear color numbers mean, which to use in shaders and lighting, and how Unity, Unreal and the web treat the same hue.
- OKLCh explained, and why HSL keeps letting you downHow OKLCh works, why its lightness matches what you see when HSL lightness does not, and how to use it to build tonal scales that actually look even.
- Choosing accessible text colorsHow WCAG 2 contrast ratios work, where they go wrong, what APCA does differently, and a practical method for picking text colors that pass and look right.