// Start 

   // First section, for hex strings, either:  abc or aabbcc  (or defa or ddeeffaa)
   
/(?:^(?:#|0x|)
 (?:(?:([\da-f])([\da-f])([\da-f])([\da-f])?)(?!\S)|
 (?:([\da-f]{2})(?:([\da-f]{2})([\da-f]{2})([\da-f]{2})?)?))|

   // Second section, for rgb() as number or percentages.
   // Note the conditional with [^\S]*$ which allows the greyscale shortcut
   
(?:(?:^(?:rgba?|)\(? ?
(?:(?:(?:(255|(?:25[0-4]|2[0-4]\d|1?\d{1,2})(?:\.\d{1,24})?)))(?:,[^\S]?$|
(?:(?:, ?| )(255|(?:25[0-4]|2[0-4]\d|1?\d{1,2})(?:\.\d{1,24})?)
(?:, ?| )(255|(?:25[0-4]|2[0-4]\d|1?\d{1,2})(?:\.\d{1,24})?)))|
(100%|\d{1,2}(?:\.\d{1,24})?%)(?:,?[^\S]?$|(?:(?:, ?| )
(?:(100%|\d{1,2}(?:\.\d{1,24})?%)(?:, ?| )
(100%|\d{1,2}(?:\.\d{1,24})?%)))))|

   // Third section, for the CSS4 color tag: color(sRGB 1 1 1 / 1)
   
^(?:color\((srgb|srgb-linear|display-p3|a98-rgb|prophoto-rgb|rec2020|xyz|xyz-d50|xyz-d65) (?:
(100%|\d{1,2}(?:\.\d{1,24})?%|[0 ]\.\d{1,24}|[01])) (?:
(100%|\d{1,2}(?:\.\d{1,24})?%|[0 ]\.\d{1,24}|[01])) (?:
(100%|\d{1,2}(?:\.\d{1,24})?%|[0 ]\.\d{1,24}|[01])))|

   // Fourth section, for hsl, hwb, lch, and anything as in gggggg(1,1,1,1)
   
^(?:((?:r(?!gb)|c(?!olor)|[abd-qs-z])[a-z]{2,5})\( ?
((?:\d{0,3}\.|)\d{1,24}%?)(?:, ?| )
((?:\d{0,3}\.|)\d{1,24}%?)(?:, ?| )
((?:\d{0,3}\.|)\d{1,24}%?))))

   // Fifth section, the alpha for the 2nd thru 4th sections

(?:(?:,| \/| ) ?
(?:(100%|\d{1,2}(?:\.\d{1,24})?%|[0 ]\.\d{1,24}|[01])))?
(?:\)| |))[^\S]?$/

// End

<angle>
The <number> component serialized as per <number> followed by the unit in canonical form as defined in its respective specification.

<color>
- rgb(146.064 107.457 131.223)
is now valid, and equal to
- rgb(57.28% 42.14% 51.46%)
A conformant serialized form for both, is the string "rgb(146.06, 107.46, 131.2)".

<alphavalue>
If the value is internally represented as an integer between 0 and 255 inclusive (i.e. 8-bit unsigned integer), follow these steps:

- Let alpha be the given integer.
- If there exists an integer between 0 and 100 inclusive that, when multiplied with 2.55 and rounded to the closest integer (rounding up if two values are equally close), equals alpha, let rounded be that integer divided by 100.
- Otherwise, let rounded be alpha divided by 0.255 and rounded to the closest integer (rounding up if two values are equally close), divided by 1000.
- Return the result of serializing rounded as a <number>.
- Otherwise, return the result of serializing the given value as a <number>.


14.2 Simple alpha compositing

Graphics elements are blended into the elements already rendered on the canvas using simple alpha compositing, in which the resulting color and opacity at any given pixel on the canvas is the result of the following formulas:

Er, Eg, Eb    - Element color value
Ea            - Element alpha value
Cr, Cg, Cb    - Canvas color value (before blending)
Ca            - Canvas alpha value (before blending)
Cr', Cg', Cb' - Canvas color value (after blending)
Ca'           - Canvas alpha value (after blending)
Ca' = 1 - (1 - Ea) * (1 - Ca)

Premultiplied colors
Cr' = (1 - Ea) * Cr + Er
Cg' = (1 - Ea) * Cg + Eg 
Cb' = (1 - Ea) * Cb + Eb


Straight not Premultiplied
Cr' = (1 - Ea) * Cr*Ca + Er*Ea 
Cg' = (1 - Ea) * Cg*Ca + Eg*Ea 
Cb' = (1 - Ea) * Cb*Ca + Eb*Ea