Skip to main content
SimilarExport ZIP
100%

Compare Colors

✓ Published0🌍 Public
CCurran Kelleher
Last edited Feb 7, 2018
Created on Apr 8, 2017

This tool lets users compare two colors side-by-side in both small, separated rectangles and large, adjacent areas, with a grayscale filter below to isolate luminance. The D3.js visualization (version 4) renders SVG rectangles, while jQuery MiniColors provides the color pickers. Each picker’s change event updates all matching rectangles via a `change` function, and the initial values are set from the inputs’ HTML attributes.

AI-generated description

A design tool for comparing colors.

In data visualizations, sometimes the visual marks appear far apart (e.g. scatter plots), and sometimes they are adjacent (e.g. heatmaps, choropleths). This tool allows you to compare colors while designing a color palette for data visualizations, such that you can see how colors visually compare to one another when they are both far apart and close together.

Intended to complement other tools for color scheme design, including:

Built with blockbuilder.org

<!-- Start of SimpleHitCounter Code --> <div align="center"><img src="http://simplehitcounter.com/hit.php?uid=2240183&f=16777215&b=0" border="0" height="18" width="83"></a></div> <!-- End of SimpleHitCounter Code -->
mit Licensed

Similar vizzes

Loading thumbnail…

D3.UNCONF Submission

This interactive tool visualizes how Hue, Saturation, and Brightness determine color contrast between a button background and its text, enforcing a minimum AA contrast ratio of 4.5. Users adjust numeric inputs for both colors, with the main canvas and SVG displaying a saturation-brightness space while a separate hue channel canvas shows the hue gradient. The code uses d3.v4 for SVG rendering, Canvas 2D for the color spaces, and math.js for color calculations, updating the contrast value and warning in real time.

KKevinGutowski
70% match
Loading thumbnail…

Cubehelix Color Picker

The Cubehelix Color Picker displays three horizontal channels—hue, saturation, and lightness—as gradient strips, each paired with an axis. It uses D3.js to render the axes and SVG structure, while Canvas draws the color gradients. The visualization demonstrates the cubehelix color space by letting viewers compare how each channel varies independently, with the final color resulting from the combination of all three channels.

CCaged
69% match
Loading thumbnail…

color palette generator

This example presents a simple color palette generator using D3.js (v7) within an HTML page. It displays a circle and a series of five rectangles, each filled with a color interpolated along a linear scale from orange to black, using a gamma-corrected RGB interpolation with a value of 1.5. The visualization is rendered as SVG, with shapes positioned and colored based on the numeric scale values, demonstrating D3's `scaleLinear` and `interpolateRgb` APIs.

Ssukumardunn
68% match
Loading thumbnail…

RGB Color Picker

This interactive RGB color picker displays three horizontal channel strips (red, green, blue) as Canvas gradients, each with a draggable marker. The current color is composed from the selected values in all three channels, shown as a white/black marker line. The visualization uses D3 v3 with `d3.scale.linear`, `d3.interpolateRound`, `d3.svg.axis`, and the `d3.behavior.drag` interaction. Each strip is rendered with `createImageData` and `putImageData` on the Canvas, while SVG axes provide tick labels.

Mmbostock
68% match
Loading thumbnail…

Cubehelix Color Picker

This example presents an interactive Cubehelix color picker with three horizontal channel strips for hue, saturation, and lightness. Each strip renders a gradient swatch on a canvas element with an SVG axis below it, using d3.svg.axis to label the value ranges. The code relies on d3-color’s `cubehelix` and `hsl` functions to convert channel values into displayable colors, drawing the gradient bars programmatically via canvas `getImageData`. The interface allows direct manipulation of each channel to explore the three-dimensional color space.

Mmbostock
68% match
Loading thumbnail…

HCL Color Picker

This example presents an interactive HCL color picker with three horizontal channel strips for hue, chroma, and lightness. Each strip displays a gradient of colors, and the user can drag a marker along any channel to adjust that component, with the current color shown as a white pixel and its predecessor as black. The visualization uses D3 v3 with SVG axes for channel scales and Canvas `createImageData` and `putImageData` to render the per-pixel gradients. The HCL color is converted to RGB via `d3.rgb`, and dragging is handled with `d3.behavior.drag`.

Mmbostock
67% match
Loading thumbnail…

Colours Page

This gallery page displays a catalog of named CSS colors in D3.js, with similar hues grouped together. Each color name is rendered as a labeled, rounded rectangle using SVG. The code loads color names from `colours2.csv` via `d3.csv`, then uses `container.append("svg")` and `.append("rect")` and `.append("text")` to build each swatch, applying a white text shadow for legibility. The example highlights the range of available web colors and offers a practical reference for selecting fill values.

Dd3noob
67% match
Loading thumbnail…

HSL Color Picker

Three horizontal color-gradient strips display the hue, saturation, and lightness channels of an HSL color model. Dragging any strip updates the selected color value, and each strip re-renders to show the resulting color variation. The visualization uses D3.js for axis rendering and drag behavior, while Canvas `putImageData` writes per-pixel RGB values for the gradients.

Mmbostock
67% match