Color ramp maker

100%

Color ramp maker

✓ Published0🌍 Public

Last edited Feb 22, 2017

Created on Feb 22, 2017

This tool generates color ramps by interpolating between two user-selected hex colors. A linear gradient bar is rendered as a series of divs, each showing the computed intermediate color and its hex code. Users adjust the start and end colors via jscolor pickers, set the number of entries, and click build; d3.scaleLinear performs the color interpolation. Clicking a swatch copies its hex code to the clipboard.

AI-generated description

Easy tool for extract linear gradients. It uses d3.scaleLinear and jscolor for pickers.
Choose the colors and click on build to watch the color ramp.
If you want to copy the hexadecimal code just click on the color and the code will be copy to your clipboard.

Similar vizzes

Loading thumbnail…

Cubehelix II

Six color ramps illustrate variations of the Cubehelix color scheme, including reversed, hue-shifted, diverging, and a perceptual rainbow approximation. Each ramp renders as a horizontal gradient on individual Canvas elements, with pixel colors computed via the `d3.scale.cubehelix` plugin and `d3.interpolateCubehelix`. A polylinear scale with multiple domain points creates the diverging ramps. The labels and layout are positioned absolutely via D3 selections and ordinal scales.

Mmbostock

77% 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

76% 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

74% match

Loading thumbnail…

colorPalettes

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.

GGabriel Ing

72% 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

72% match

Loading thumbnail…

Cubehelix

This example displays a single horizontal strip of continuously varying colors, demonstrating the default cubehelix color scheme. The gradient runs from one color to another across the canvas width, showing the perceptual characteristics of the ramp. The code defines a custom d3.scale.cubehelix using d3.interpolateCubehelix and applies it via a canvas element. It generates pixel data with createImageData and writes the color values directly into the image buffer, which is then rendered with putImageData.

Mmbostock

71% 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

71% 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

70% match