This shows you the differences between two versions of the page.
harlowe:colour [2017/06/19 02:29] l |
harlowe:colour [2017/10/09 20:39] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====Colour data==== | ||
- | Colours are special data values which can be provided to certain styling macros, such as [[harlowe:background|(background:)]] | ||
- | or [[harlowe:text-colour|(text-colour:)]]. You can use built=in named colour values, or create other colours using the | ||
- | [[harlowe:rgb|(rgb:)]] or [[harlowe:hsl|(hsl:)]] macros. | ||
- | |||
- | The built-in values consist of the following: | ||
- | |||
- | ^Value ^ HTML equivalent ^ | ||
- | | ''red'' | ''#e61919'' | ||
- | | ''orange'' | ''#e68019'' | ||
- | | ''yellow'' | ''#e5e619'' | ||
- | | ''lime'' | ''#80e619'' | ||
- | | ''green'' | ''#19e619'' | ||
- | | ''aqua'' or ''cyan'' | ''#19e5e6'' | ||
- | | ''blue'' | ''#197fe6'' | ||
- | | ''navy'' | ''#1919e6'' | ||
- | | ''purple'' | ''#7f19e6'' | ||
- | | ''magenta'' or ''fuchsia'' | ''#e619e5'' | ||
- | | ''white'' | ''#fff'' | ||
- | | ''black'' | ''#000'' | ||
- | | ''grey'' or ''gray'' | ''#888'' | ||
- | |||
- | (These colours were chosen to be visually pleasing when used as both background colours and text colours, without | ||
- | the glaring intensity that certain HTML colours, like pure #f00 red, are known to exhibit.) | ||
- | |||
- | In addition to these values, and the [[harlowe:rgb|(rgb:)]] macro, you can also use HTML hex #xxxxxx and #xxx notation to specify | ||
- | colours, such as ''%%#691212%%'' or ''%%#a4e%%''. (Note that these are //not// [[harlowe:string|strings]], but bare values - ''%%(background: #a4e)%%'' | ||
- | is valid, as is ''%%(background:navy)%%''.) Of course, HTML hex notation is notoriously hard to read and write, so this | ||
- | isn't recommended. | ||
- | |||
- | If you want to quickly obtain a colour which is the blending of two others, you can blend them | ||
- | using the ''%%+%%'' operator: ''%%red + orange + white%%'' produces a blend of red and orange, tinted | ||
- | white. ''%%#a4e + black%%'' is a dim purple. | ||
- | |||
- | Like [[harlowe:datamap|datamaps]], colour values have a few read-only data names, which let you examine the **r**ed, **g**reen and **b**lue | ||
- | components that make up the colour, as well as its **h**ue, **s**aturation and **l**ightness. | ||
- | |||
- | ^Data name^ | ||
- | | ''r'' | ''$colour's r'' | The red component, a whole number from 0 to 255.| | ||
- | | ''g'' | ''$colour's g'' | The green component, a whole number from 0 to 255.| | ||
- | | ''b'' | ''$colour's b'' | The blue component, a whole number from 0 to 255.| | ||
- | | ''h'' | ''$colour's h'' | The hue angle in degrees, a whole number from 0 to 359.| | ||
- | | ''s'' | ''$colour's s'' | The saturation percentage, a fractional number from 0 to 1.| | ||
- | | ''l'' | ''$colour's l'' | The lightness percentage, a fractional number from 0 to 1.| | ||
- | |||
- | These values can be used in the [[harlowe:hsl|(hsl:)]] and [[harlowe:rgb|(rgb:)]] macros to produce further colours. Note that some of these values | ||
- | do not transfer one-to-one between representations! For instance, the hue of a gray is essentially irrelevant, so grays | ||
- | will usually have a ''%%h%%'' value equal to 0, even if you provided a different hue to [[harlowe:hsl|(hsl:)]]. Furthermore, colours with a | ||
- | lightness of 1 are always white, so their saturation and hue are irrelevant. | ||