AI-Generated Colors

100%

AI-Generated Colors

✓ Published1🌍 Public

Last edited Aug 4, 2023

Created on Aug 4, 2023

Three flat, solid-color boxes display the hexadecimal values #00B8D4, #7ED957, and #FEBD00. The boxes are ordinary HTML `div` elements styled with fixed width and height via CSS. The example demonstrates how a minimal static layout can present color swatches without any JavaScript libraries or data processing, relying solely on inline `style` attributes for background colors.

AI-generated description

This code was generated by ChatGPT in response to the prompt:

"Please generate an HTML snippet that will show me these colors as boxes: #00B8D4, #7ED957, and #FEBD00.

MIT Licensed

Similar vizzes

Loading thumbnail…

AI-Generated Colors with D3

Three colored boxes display the hex colors #00B8D4, #7ED957, and #FEBD00 in a row. The example demonstrates a minimal D3.js workflow: using `d3.select` on the body, `selectAll('div')` with a data join, and `enter().append('div')` to create boxes styled via `.style('background-color', ...)`. The data array holds the color strings directly, and the styling is applied per datum, showing how D3 maps data to visual elements. The code is generated by ChatGPT and uses D3 v6.

CCurran Kelleher

82% match

Loading thumbnail…

HTML Color Names (Relative Lightness)

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.

PPhilippe Rivière

66% match

Loading thumbnail…

N Colors

Sixteen vertical rectangles fill the viewport, each displaying a distinct color generated in HCL color space. Hue cycles evenly around the color wheel while chroma stays fixed at 50, and luminance varies randomly following a normal distribution centered at 30 with a standard deviation of 10. The example uses d3.scaleBand for layout, d3.scaleOrdinal for color assignment, and d3.hcl to construct colors with random luminance from d3.randomNormal and d3.randomLcg.

CCurran Kelleher

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

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

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

65% match

Loading thumbnail…

CSS Colors

This example displays the text “CSS Colors” in a massive, centered font using CSS styling on a minimal HTML page. It fetches a CSV file of named color values from a GitHub gist via the Fetch API, then logs the raw text response to the browser console. The visualization is a simple demonstration of loading external data with JavaScript and rendering styled HTML, without any data-binding or charting library. The page relies entirely on native browser APIs and CSS for its presentation.

KKoundinya

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

63% match