rbx-css supports all standard CSS color formats and converts them to Roblox Color3 values with optional transparency.
RGB colors
Hex notation
.box {
background-color: #335fff;
color: #fff; /* shorthand */
border-color: #33f; /* shorthand expands to #3333ff */
}
rule:SetProperty("BackgroundColor3", Color3.fromRGB(51, 95, 255))
rule:SetProperty("TextColor3", Color3.fromRGB(255, 255, 255))
rule:SetProperty("Color", Color3.fromRGB(51, 51, 255))
RGB function
.box {
background-color: rgb(51, 95, 255);
color: rgb(255, 255, 255);
}
rule:SetProperty("BackgroundColor3", Color3.fromRGB(51, 95, 255))
rule:SetProperty("TextColor3", Color3.fromRGB(255, 255, 255))
RGBA function (with transparency)
.box {
background-color: rgba(51, 95, 255, 0.8);
color: rgba(255, 255, 255, 0.7);
}
-- Alpha channel maps to transparency (inverted)
rule:SetProperties({
BackgroundColor3 = Color3.fromRGB(51, 95, 255),
BackgroundTransparency = 0.2, -- 1 - 0.8
})
rule:SetProperties({
TextColor3 = Color3.fromRGB(255, 255, 255),
TextTransparency = 0.3, -- 1 - 0.7
})
CSS alpha values (0-1, where 1 is opaque) are inverted to Roblox transparency (0-1, where 0 is opaque). An alpha of 0.8 becomes transparency of 0.2.
Modern color spaces
OKLCH (Oklab cylindrical)
.box {
background-color: oklch(0.65 0.15 250);
/* Lightness, Chroma, Hue */
}
-- Converted to RGB internally
rule:SetProperty("BackgroundColor3", Color3.fromRGB(r, g, b))
OKLAB (Oklab rectangular)
.box {
background-color: oklab(0.65 -0.1 -0.1);
/* Lightness, a, b */
}
-- Converted to RGB internally
rule:SetProperty("BackgroundColor3", Color3.fromRGB(r, g, b))
LAB (CIE Lab)
.box {
background-color: lab(50% 40 -20);
/* Lightness, a, b */
}
-- Converted to RGB using D65 white point
rule:SetProperty("BackgroundColor3", Color3.fromRGB(r, g, b))
LCH (CIE LCH)
.box {
background-color: lch(50% 40 200);
/* Lightness, Chroma, Hue */
}
-- Converted to RGB using D65 white point
rule:SetProperty("BackgroundColor3", Color3.fromRGB(r, g, b))
Named colors
A subset of CSS named colors are supported:
.box {
background-color: white;
color: black;
border-color: red;
}
rule:SetProperty("BackgroundColor3", Color3.fromRGB(255, 255, 255))
rule:SetProperty("TextColor3", Color3.fromRGB(0, 0, 0))
rule:SetProperty("Color", Color3.fromRGB(255, 0, 0))
Supported named colors
| Name | RGB Value |
|---|
white | (255, 255, 255) |
black | (0, 0, 0) |
red | (255, 0, 0) |
green | (0, 128, 0) |
blue | (0, 0, 255) |
yellow | (255, 255, 0) |
cyan | (0, 255, 255) |
magenta | (255, 0, 255) |
orange | (255, 165, 0) |
purple | (128, 0, 128) |
pink | (255, 192, 203) |
gray, grey | (128, 128, 128) |
Transparent keyword
.box {
background-color: transparent;
/* or */
background: transparent;
}
rule:SetProperty("BackgroundTransparency", 1)
HSL colors
While lightningcss (the parser rbx-css uses) converts most color formats internally, HSL is converted to RGB:
.box {
background-color: hsl(220, 100%, 60%);
color: hsla(220, 100%, 60%, 0.5);
}
-- Converted to RGB
rule:SetProperty("BackgroundColor3", Color3.fromRGB(r, g, b))
rule:SetProperties({
TextColor3 = Color3.fromRGB(r, g, b),
TextTransparency = 0.5,
})
Color properties
Background color
.box {
background-color: #335fff;
/* or */
background: #335fff;
}
rule:SetProperty("BackgroundColor3", Color3.fromRGB(51, 95, 255))
Text color
rule:SetProperty("TextColor3", Color3.fromRGB(255, 255, 255))
Border color
.box {
border: 2px solid #333;
/* or */
border-color: #333;
}
-- Creates UIStroke pseudo-instance
strokeRule:SetProperty("Color", Color3.fromRGB(51, 51, 51))
Transparency mapping
Alpha channels in CSS colors map to Roblox transparency properties:
| CSS Property | Color Property | Transparency Property |
|---|
background-color | BackgroundColor3 | BackgroundTransparency |
color | TextColor3 | TextTransparency |
border-color (UIStroke) | Color | Transparency |
Example with transparency
.card {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
}
-- Main rule
rule:SetProperties({
BackgroundColor3 = Color3.fromRGB(255, 255, 255),
BackgroundTransparency = 0.9, -- 1 - 0.1
TextColor3 = Color3.fromRGB(255, 255, 255),
TextTransparency = 0.1, -- 1 - 0.9
})
-- UIStroke rule for border
strokeRule:SetProperties({
Color = Color3.fromRGB(255, 255, 255),
Transparency = 0.8, -- 1 - 0.2
Thickness = 1,
})
Gradients
Gradients use multiple colors and create UIGradient pseudo-instances. See Pseudo-instances - UIGradient.
.gradient {
background: linear-gradient(90deg, #ff0099 0%, #ffcc00 100%);
}
-- Creates UIGradient pseudo-instance
gradientRule:SetProperty("Color", ColorSequence.new({
ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 153)),
ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 204, 0)),
}))
CSS variables (color tokens)
Color tokens from CSS custom properties are automatically inferred:
:root {
--primary: #335fff;
--text: rgba(255, 255, 255, 0.9);
}
.button {
background-color: var(--primary);
color: var(--text);
}
-- Token attributes (type inferred as Color3)
sheet:SetAttribute("primary", Color3.fromRGB(51, 95, 255))
sheet:SetAttribute("text", Color3.fromRGB(255, 255, 255))
-- Note: transparency from token alpha is applied at rule level
-- Rule using tokens
rule:SetProperty("BackgroundColor3", "$primary")
rule:SetProperty("TextColor3", "$text")
Color gamut and clamping
When converting from modern color spaces (OKLCH, LAB, LCH), colors outside the sRGB gamut are clamped to valid RGB values:
.vivid {
/* This might produce colors outside sRGB gamut */
background-color: oklch(0.8 0.4 250);
}
-- Out-of-gamut values are clamped to 0-255 range
rule:SetProperty("BackgroundColor3", Color3.fromRGB(
clamp(r, 0, 255),
clamp(g, 0, 255),
clamp(b, 0, 255)
))
Unsupported color features
| CSS Feature | Reason |
|---|
currentColor | No cascading color value in Roblox |
color-mix() | Not supported by parser |
| CSS Color Level 5 features | Not yet widely supported |
Color conversion accuracy
rbx-css uses standard color space conversion algorithms:
- OKLCH/OKLAB: Björn Ottosson’s Oklab color space
- LAB/LCH: CIE Lab with D65 illuminant
- RGB gamma correction: sRGB gamma correction (2.4)
Colors are rounded to the nearest integer (0-255) for Roblox Color3.fromRGB().