Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-color-3] HSL examples show incorrect RGB values #3088

Closed
avh4 opened this issue Sep 9, 2018 · 4 comments
Closed

[css-color-3] HSL examples show incorrect RGB values #3088

avh4 opened this issue Sep 9, 2018 · 4 comments

Comments

@avh4
Copy link

@avh4 avh4 commented Sep 9, 2018

Section 4.2.4. HSL color values provides an algorithm for translating HSL to RGB, and states that the tables in section 4.2.4.1. HSL examples are generated using this algorithm.

The algorithm to translate HSL to RGB is simple (here expressed in ABC [ABC] which was used to generate the tables.)

However, the RGB values in the example tables do not match the output of the algorithm.


For example, in the "0° Reds" example table, Saturation=100% and Lightness=88 is shown to have the RGB value #FFBFBF.

However, running the following ABC program (the algorithm from the spec plus the additional line WRITE hsl.to.rgb(0/360, 1.00, 0.88) produces the output (1.00, 0.76, 0.76), which converts to the [0,255] range as (255.0, 193.8, 193.8), which is the hex RGB value #FFC2C2 (if rounded) (or #FFC1C1, if floored).

ABC program
HOW TO RETURN hsl.to.rgb(h, s, l):
    SELECT:
        l<=0.5: PUT l*(s+1) IN m2
        ELSE: PUT l+s-l*s IN m2
    PUT l*2-m2 IN m1
    PUT hue.to.rgb(m1, m2, h+1/3) IN r
    PUT hue.to.rgb(m1, m2, h    ) IN g
    PUT hue.to.rgb(m1, m2, h-1/3) IN b
    RETURN (r, g, b)

HOW TO RETURN hue.to.rgb(m1, m2, h):
    IF h<0: PUT h+1 IN h
    IF h>1: PUT h-1 IN h
    IF h*6<1: RETURN m1+(m2-m1)*h*6
    IF h*2<1: RETURN m2
    IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6
    RETURN m1

WRITE hsl.to.rgb(0/360, 1.00, 0.88)

Of the 540 examples, 251 of them appear not to match the reference algorithm.


I'm assuming the given algorithm is meant to be considered authoritative and the example tables are not--is that a correct assumption?

If so, can the example tables be fixed to have correct RGB values? Or alternatively, at least add a note that the example tables only provide "close" and not accurate values for the purposes of illustration?

@avh4 avh4 mentioned this issue Sep 9, 2018
5 tasks
@svgeesus svgeesus self-assigned this Sep 10, 2018
@svgeesus
Copy link
Contributor

@svgeesus svgeesus commented Sep 10, 2018

How very odd, especially as the tables are supposed to be direct from the program.

You are correct about the hsl(0, 100%, 88%) testcase which should indeed give #FFC2C2

Thanks for the bug report, will check further and issue an erratum.

Meanwhile the algorithm is authoritative over the example tables (which should still be corrected).

@svgeesus
Copy link
Contributor

@svgeesus svgeesus commented Jul 29, 2021

An additional issue is that the original table has lightness values which are rounded off. For example 13% is presumably 12.5% rounded to integer?

@svgeesus
Copy link
Contributor

@svgeesus svgeesus commented Jul 29, 2021

The table in CSS Color 4 has now been replaced with a generated table which is correct.

See workings/hsl-tables-for-color-3-errata/ to regenerate the table
the contents of hslstyle.css are inline in the CSS Color 4 bikeshed document

@svgeesus svgeesus closed this in 86a5e7a Jul 29, 2021
@svgeesus
Copy link
Contributor

@svgeesus svgeesus commented Jul 29, 2021

The same table has been added to CSS Color 3 as a Candidate Correction.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants