Skip to main content
SimilarExport ZIP
100%

Show ASE color palettes from Adobe Photoshop / Adobe Kuler

✓ Published0🌍 Public
GGerHobbelt
Last edited Sep 9, 2012
Created on Jul 24, 2012

This example displays color palettes loaded from Adobe Photoshop ASE files and Adobe Kuler, rendered as a grid of 200 SVG rectangles. It uses the `adobe.ase.load` API to parse binary palette files and convert colors to `#RRGGBB` strings, then feeds the flattened array into `d3.scale.ordinal().range()` for coloring the rectangles. A dropdown menu lets users switch between built-in D3 color scales and various ASE palettes, including LAB and CMYK color space samples.

AI-generated description

Straight from Adobe Photoshop to D3.js �� <a href="http://bl.ocks.org/3173233" title="view this gist via bl.ocks.org">?</a> <a href="http://bl.ocks.org/GerHobbelt" title="view a list of all my gists at bl.ocks.org">8</a>

Showcases the Adobe.ASE.load.js file which can load a Photoshop ASE color palette file from the server and convert it to both a standard JS object hierarchy (which includes the group and color names) and a flattened array which can be fed directly to d3.scale.ordinal().range(...) for quick & easy as a color palette for d3.js visualizations.

Using this JavaScript software, you or your designer can concoct any color palette in tools such as Adobe Photoshop, place the exported Adobe ASE file on any server as a static file and you're Up & Go!

What's the use?

ZERO server-side / developer / tool effort required to convert artist-created color palettes before those are usable in your web projects, particularly when you're using D3.js to visualize your data.

Adobe Photoshop > Swatches > Save Swatches for Exchange > upload to server (static content) > use in any d3 visualization

Any hot tips?

Certainly. Get your derrière over to the Adobe Kuler web site to peruse a zillion color palettes created by the community.

And if that's not enough, there's a lot of color tools out there which produce ASE files for you to download: anyone who exports color templates for use in Photoshop is producing ASE files!

Technology

The code uses the excellent jDataview.js from Christopher Chedeau.

Using this is very simple:

  • make sure you've loaded both the jDataview.js and Adobe.ASE.load.js scripts

  • fetch the ASE file from your web store (server) using the API call: adobe.ase.load(file, callback) where callback can be any function you specify. The callback function will receive up to 3 arguments: (palette, flat_rgb_set, error_msg).

    • palette: the JavaScript object structure which contains all the info, including color and group names, which was contained in the ASE file. See the callback.palette.arg.format.md file for the object hierarchy/format specification.

    • flat_rgb_set: a flat array containing one HTML color string in #RRGGBB format for each color in the palette

    • error_msg: optional 3rd argument which will contain an error message when something went horribly wrong. In case of errors, both palette and flat_rgb_set are set to null.

Similar vizzes

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
71% match
Loading thumbnail…

Colours Page

A gallery of CSS color names rendered as a grid of rounded rectangles, each labeled with its own name. The page reads a CSV file listing color names and displays them grouped by hue families. Using D3 v6 and SVG, the code appends a small `<svg>` per color, fills a rectangle with the named color via the `style` property, and adds a text label with a white shadow for legibility. The layout is a simple vertical list rather than a compact mosaic, and a few colors are omitted from the source data.

Dd3noob
70% 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
69% 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
69% match
Loading thumbnail…

Every ColorBrewer Scale

This gallery displays every ColorBrewer scale as a grid of color swatches grouped by palette name. Each palette, from YlGn to YlOrRd, shows its largest available color scheme as a row of small rectangles. The visualization is rendered using D3 v3, iterating over the embedded `colorbrewer` data structure with `d3.entries` and `d3.values`. Clicking any palette outputs its full set of hexadecimal color values to the browser console via `JSON.stringify`. The swatch colors come directly from Cynthia Brewer’s ColorBrewer data.

Mmbostock
68% match
Loading thumbnail…

d3.scale.category20() randomizer

This example demonstrates a randomizer for D3’s categorical color palette, replacing the standard `d3.scale.category20()` colors with newly generated hexadecimal values. It first shows how the original palette’s colors appear in the page’s SVG elements, then swaps them by iterating over the old color strings. The code uses `d3.scale.category20().range()` to capture the initial palette, maps each color to a random `#`-prefixed hex code via `Math.random`, and updates inline styles and `fill` attributes with `d3.selectAll`. Pressing the up arrow re-runs the script, reassigning the palette each time. The data source is the existing DOM elements’ style and attribute values.

11wheel
68% match
Loading thumbnail…

Colours Page

This example displays a grid of color swatches, each labeled with its corresponding named color value. It uses the d3.csv function to load color names from a CSV file and then creates an SVG for each entry. Each SVG contains a rounded rectangle filled with the color, a text label with a white shadow for readability, and a bold black text overlay showing the color's name.

Dd3noob
68% match
Loading thumbnail…

Colours Page

A gallery of SVG color swatches displays every named CSS/SVG color from a local CSV file. Each color is shown as a rounded rectangle with its name overlaid in bold, shadowed text. The d3.csv method loads the data, and d3 selections append one SVG per color with appended rect and text elements, using white strokes for label legibility. All colors render as individual static tiles in the browser.

Dd3noob
68% match