(0, 1)
(1, 1)
(0, 0)
(0, 1)
Resolution X
Resolution Y
Left X
Bottom Y
Right X
Top Y
Interpolate values
Square aspect ratio
About this tool

This is a tool for creating color graphs given two input axes. It was created by Sophie Kirschner in March 2019.

You can contact Sophie by email at sophiek@pineapplemachine.com or on twitter at @PineMach.

You can click the help button "?" at any time to display this message again.

Click the settings button "⚙" beside the help button "?" to change the coordinates at the corners of the graph, to configure the number of samples, and to toggle linear interpolation between samples on or off.

Write a JavaScript function in the code box toward the bottom of the page and click the "Go ►" button to execute it for each sample in the graph. The function should return an object with "red", "green", and/or "blue" attributes within the range [0, 1] inclusive. (Values outside this range are clamped for display on the graph.)

To get more information about the content of the graph, you can move your mouse over the graph area. The data for a location in the graph will appear on the top of the page. If you click on the graph, it will add a cursor there. When the mouse is not over the graph area, the data at the cursor is shown.

Note that you can add attributes to your data object besides just "red", "green", and "blue". Other attributes cannot be represented visually on the graph, but they will show on the top of the page when moving the mouse over the graph.