Colors

Stable

CSS color names and hex, and why a case named "gold" never collides.

Any color: property accepts:

  • A standard CSS color namewhite, black, red, gold, teal, grey, mediumpurple, hotpink, darkslateblue, … all 148 of them.
  • Hex#ff0000, #1a2b3c. Six digits, always.
Rectangle:
  x: 0
  y: 0
  width: full
  height: 3
  color: mediumpurple

Colors from data#

color: is an expression like any other, so it can depend on the card:

color: if [cost] > 3 then gold else grey
color: if [current_suit] == Suit.Rock then grey
       else if [current_suit] == Suit.Paper then gold
       else mediumpurple

Images and part of a text#

On an Image, color: is a multiply tint rather than a flat fill: white (the default) leaves the art unchanged, white source pixels become the chosen color, and darker source detail stays darker. Source transparency is preserved.

Inside Text or TextBox, nested {color:red}…{/color} tags can override the element's whole-text color: for selected words and inline icons without affecting wrapping. See Scoped colors for the syntax and its raw-text failure behavior.

Names only mean colors in color positions#

A bare word is read against the type expected in that position. In a color: property that's the CSS palette; elsewhere it isn't. So an enum case named gold and the color gold can coexist without ambiguity:

Enum: Metal
  case gold      # perfectly legal
  case silver

# ...compared as an enum case here:
color: if [metal] == Metal.gold then gold else silver
#                                    ^^^^ the color   ^^^^^^ the color

Watch out for ##

# starts a comment — except when it's followed by exactly six hex digits, where it's a color literal. Don't open a comment with something like #ff0000.

Printing#

Colors are emitted to PDF as-is in RGB. There's no CMYK conversion, no color management, and no bleed handling yet — for home printing and prototypes that's fine; for a print shop, check with them first. Print specifics are on the roadmap.