Colors in SVG graphics
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:
- Basic color names
- Extended color names
- 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
fopin 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. - Any RGB or Hex value.
We prefer '50 shades of blue'.
