HTML Color Names (Relative Lightness)

100%

HTML Color Names (Relative Lightness)

✓ Published0🌍 Public

Last edited May 4, 2017

Created on May 4, 2017

This visualization displays all HTML named colors as labeled swatches, using the WCAG relative luminance formula `L = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b` to set text color. The code compares this value against the simpler `hsl.l` luminance, highlighting colors where the two formulas disagree on the optimal black-or-white label contrast. Built with D3.js version 3.5.5, it loads color names from a CSV, renders each as a floating styled div, and dynamically assigns text color. The data originates from the Wikipedia list of web colors.

AI-generated description

Colors that are changed by the new formula L = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b > 0.5 * 255, compared to just hsl.luminance > 0.5.

I wanted a programmatically friendly list of the HTML named colors found here: https://en.wikipedia.org/wiki/Web_colors

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/7c0fe907ba2010fed420'>HTML Color Names (Relative Lightness)</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/f3aa070fd1d937f49ed1560c05220214'>HTML Color Names (Relative Lightness)</a>

mit Licensed

Similar vizzes

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

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

72% match

Loading thumbnail…

colors2

This visualization displays all named CSS colors as large text elements, one per color, with each word rendered in its corresponding hue. The page uses a simple centered layout with an oversized font size to showcase the color names. The code fetches a CSV file of CSS color names and their RGB values from a GitHub gist, then parses it using D3’s `csv` method. The D3 library is loaded via a CDN, and the fetch API retrieves the data asynchronously before rendering the results on the page.

Bbdfee

71% match

Loading thumbnail…

CSS Named Colors

This visualization displays all named CSS colors as a grid of squares, colored according to their RGB hex values, with each square labeled by its color name. The data comes from a CSV file listing colors across CSS Level 1, Level 2.1, and Color Module Level 3 specifications. Using D3.js, the visualization binds the color data to SVG rect elements and applies the fill color from the RGB hex column. The layout arranges colors in a structured grid, making it easy to compare hue, saturation, and lightness across the entire CSS color palette.

CCurran Kelleher

71% match

Loading thumbnail…

CSS Colour List

This example displays a list of all named CSS colours, rendered as a large, centered title on a plain white page. The visualization is minimal, showing only the text “CSS Colours” without any graphical encoding of the colour values themselves. The code fetches a CSV file containing the colour names from a GitHub gist and parses it using `d3.csvParse`, but the parsed data is only logged to the console and not used for any visual output. The page uses D3 v6 for data loading, with the body styled at a font size of 13em to emphasize the title.

PPadoSensei

71% match

Loading thumbnail…

CSS Colours

This example visualizes the named colors of the CSS color specification as a scatterplot-like display. It uses D3 v3 to fetch a CSV file of color names and their corresponding RGB values, then renders each color as a distinct visual element based on its hue and lightness. The code employs D3’s asynchronous data loading and text parsing to process the external dataset. The result is a compact survey of the standard CSS color palette, organized to reveal relationships and distribution across the color space.

Kknmalinski

69% match

Loading thumbnail…

Colours Page

This example displays a grid of named CSS colors, each rendered as a rounded rectangle with its name printed in bold text. The visualization uses a static CSV file (`colours2.csv`) containing color names, and the D3.js library to create an SVG element for each entry. The code places each color swatch and label sequentially, using D3’s `select`, `append`, and `attr` methods to build the layout. It also applies a text-shadow class to improve label legibility, and the resulting page is a reference guide for color names usable in web contexts.

Dd3noob

69% match

Loading thumbnail…

CSS Colours

This example visualizes the 148 named CSS colours by fetching and parsing a CSV file of colour names and values from a remote gist. It uses `fetch` to retrieve the data and `d3.csvParse` to convert the raw text into structured rows, then logs the file size, row count, and column count to the browser console. The page is a minimal HTML document that loads D3 v7 from a CDN and embeds all logic in a script tag, demonstrating a straightforward data-loading pipeline without any graphical rendering.

EEd Hutchinson

69% match