Render the color triangle for a given hue

[masakudamatsu]

Each color is located at

• x-axis: how much pure hue is mixed with grey (0-100%)
• y-axis: the WCAG luminance contrast ratio to pure black (1-21)

Clicking a particular point of the triangle shows the RGB color code and copy it onto the user's clipboard

[masakudamatsu]

Initial implementation plan

• Create element to represent each particular color as 1px square
• It takes four props
  • red
  • green
  • blue
  • intensity
  • luminance
• The first three props specify the fill color (the fill property in the style attribute)
• The last two specify location (x and y attributes)

[masakudamatsu]

Next up:

• Install Prettier to make Jest snapshot tests work
• Once the snapshot test is done, commit Color.js and Color.test.js

[masakudamatsu]

Initial implementation plan #2

Create ColorTriangel component as <svg>

• viewBox = "0 0 100 100"
• Outer-loop over x-axis value (the ratio of pure hue in %)
• Inner-loop over 0–255 (the greyscale value)
• red, green, blue values are obtained as a convex combination of pure hue and the grey

e.g. If the pure hue is red (rgb(255, 0, 0))

const red = (255x + y(100-x))/100;
const green = y(100-x)/100
const blue = y(100-x)/100

• Check if the current red/green/blue values are the same as the previous step in the inner loop, and if so, return
• Set the current rgb values are the previous values
• return Color component with rgb values, x, and the luminance derived from rgb values.

[masakudamatsu]

Change in the implementation

Calculate luminance as percentage in the ColorTriangle component and pass it as luminance props to Color component.

• This way, if the luminance value is the same as the previous color pixel, we skip the rendering of it.

[masakudamatsu]

Change in the implementation #2

We do not nest the loop

• Otherwise the snapshot test result will be too long.

Instead, we create Colors component, which loops over the y value for a given x value (as prop)

• It wraps Color components with <g> element

Then we create ColorTriangle component which loops over the x value to render Colors components

[masakudamatsu]

We do not have a component test for ColorTriangle

• Too long to run as it renders about half of 10,000 square pixels

[masakudamatsu]

Hovering over a color pixel now shows its RGB code.

• But we need to refactor the code to avoid prop drilling: delegated to #2

Next: Clicking it copies the RGB code into clipboard.

[masakudamatsu]

HTML5 Canvas appears to be the standard method of creating a color picker.

• See my note: https://www.notion.so/Color-picker-a7848634449c412fba251d35b202bdc6

We will explore this possibility in #4