Color formats
Anywhere you can type a color — the Fill and Stroke hex fields, the color picker's HEX and CSS fields, color variables, color inputs, and expressions that return a string — accepts the formats below. Formats can be typed or pasted, in any letter case.
Accepted formats
| Format | Example |
|---|---|
Hex, with or without # | #FF8800, ff8800, #F80 |
| Hex with alpha | #FF880080, #F808 |
| Hex with opacity percent (what the Variables panel shows) | #FF8800 50% |
| Named CSS colors | orange, transparent |
rgb() / rgba() | rgb(255, 136, 0), rgb(255 136 0 / 50%), rgb(100% 53% 0%) |
hsl() / hsla() | hsl(32, 100%, 50%), hsl(32 100 50 / 0.5), hsl(0.09turn 100% 50%) |
hwb() | hwb(32 0% 0%) |
hsb() / hsv() (hue, saturation, brightness) | hsb(32, 100, 100), hsv(32 100% 100% / 50%) |
Inside rgb(), hsl(), hwb() and hsb() you can separate values with commas, spaces, or a / before the alpha, and mix numbers with percentages. A fourth value is always the alpha. Hues accept deg, grad, rad and turn. CSS's none keyword is accepted for any value and counts as zero.
Values outside their range are clamped rather than rejected: rgb(300, 0, 0) is pure red, hsl(200, 150%, 50%) is fully saturated, and #FF0000 120% is opaque.
What you see afterwards
Fields always show the color in their own notation, whatever you typed: the Fill and Stroke fields show #RRGGBB, the color picker's CSS field shows rgb() or rgba(), and the Variables panel shows #RRGGBB followed by the opacity percent when the color is not opaque. A pasted hsl(32, 100%, 50%) reads back as #FF8800.
Opacity
A color that states an alpha — #FF880080, rgb(255 136 0 / 50%), #FF8800 50% — sets the opacity of the fill, stroke, variable or input you paste it into. A color without an alpha, such as #FF8800, changes the color and leaves the current opacity as it is.
Not accepted
Anything else leaves the field unchanged: oklch(), lab(), color(), var(--name), currentcolor and color-mix(). Eight-digit hex values are always read as #RRGGBBAA, so an Android-style #AARRGGBB value is accepted but produces a different color and opacity. A hex that already has alpha digits followed by an opacity percent, such as #FF880080 50%, is rejected too, because the two alphas would conflict. So is any text longer than 256 characters.
In an expression, a string that is not a color surfaces as an error: a color variable whose expression produces such a string shows an error on the variable, and a Set variable action that produces one leaves the variable as it was and logs a warning in the preview's debug console.