Skip to main content
SimilarExport ZIP
100%

colorPalettes

✓ Published1🌍 Public
GGabriel Ing
Last edited Feb 17, 2025
Created on Feb 15, 2025

This interactive visualization showcases color palettes generated by rotating the hue of a base color. The view displays six columns, each containing nine shades that transition from light to dark via a linear scale, alongside a row of original base colors. Users can click any color square to copy its hex value to the clipboard, which triggers a temporary tooltip confirming the action. Built with d3.v7, the SVG graphic uses d3.hsl to manipulate hue, d3.scaleLinear to interpolate lightness and saturation, and d3.select for DOM interactions.

AI-generated description

Creates a scale of colors.

The finished product for this piece can be found on my website

MIT Licensed

Similar vizzes

Loading thumbnail…

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Ssdarsi2404@gmail.com
80% match
Loading thumbnail…

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Ssdarsi2404@gmail.com
80% match
Loading thumbnail…

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Ssdarsi2404@gmail.com
80% match
Loading thumbnail…

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Ssdarsi2404@gmail.com
80% match
Loading thumbnail…

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Ssdarsi2404@gmail.com
80% match
Loading thumbnail…

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Ssdarsi2404@gmail.com
80% match
Loading thumbnail…

TODO

This interactive tool visualizes color scales by plotting Bézier curves through multiple color spaces, including RGB, HSL, HCL, Lab, and Cubehelix. Users can edit input colors, adjust the number of output stops, and click to switch between basis and linear curve interpolation across each space’s channels. The page renders using SVG and includes animated draggable points on channel charts, with the current state shared via the URL. Forked from d3-based code by 1wheel, it addresses issues in Gregor Aisch’s Color Palette Helper for diverging scales.

11wheel
78% 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
77% match