Colors in SVG graphics

From PostgreSQL wiki
Jump to navigationJump to search

Colors in SVG graphics for PostgreSQL's documentation

In the universe of 16 million colors there are some with an individual color name. In the past such color names were defined by various organisations or standards: X11, HTML, CSS, SVG, which leads to some confusion. SVG ended the attempt to define its own color names with version 1.1 (1.2 never gets an official standard), HTML with version 4.2.. HTML 5 as well as the current Candidate Recommendation for SVG 2.0 (04 October 2018) shift the responsibility of this issue to CSS [1].

We show some of these CSS color names, their values in hsl and rgb hex notation, both with opacity (alpha) of 1. If someone wants to change the opacity, he has different opportunities: SVG attribute opacity, hsla syntax, or rgba syntax, e.g.: rgba(255, 0, 0, 0.5). The use of an 8-digit-hex value is not recommended because it is not defined in CSS (and it seems to be implemented inconsistently: alpha-channel first or last?).

red hsl(0, 100%, 50%)
#ff0000
yellow hsl(60, 100%, 50%)
#ffff00
green / lime hsl(120, 100%, 25%)
#008000
hsl(120, 100%, 50%)
#00ff00
aqua hsl(180, 100%, 50%)
#00ffff
navy / blue hsl(240, 100%, 25%)
#000080
hsl(240, 100%, 50%)
#0000ff
black / gray / silver / white hsl(0, 0%, 0%)
#000000
hsl(0, 0%, 50%)
#808080
hsl(0, 0%, 75%)
#c0c0c0
hsl(0, 0%, 100%)
#ffffff


For the use of colors within PG's SVGs we suggest to restrict them to a small number and - if you prefer color names instead of numeric values - the use of CSS names defined in the CSS standard.

Please select the colors of your graphics in the following order:

  1. Basic color names
  2. Extended color names
  3. HSL examples. HSL, RGB and Hex are equivalent notations to express color values (it's nothing but 'syntactical suggar' and there are many converters). For the generation of PDF documents we currently use fop in version 2.1. Unfortunatelly it does not support the HSL syntax. Therefor we are restricted to use RGB or Hex, though HSL is more intuitive.
  4. Any RGB or Hex value.

We prefer '50 shades of blue'.