Skip to main content
100%

CodePen - Wiki Colors

✓ Published0🌍 Public
Aac1714
Last edited Jul 26, 2021
Created on Jul 26, 2021

The visualization displays a grid of named color swatches, each representing a distinct hue with a playful label such as "primary-green" or "witch-cape." It shows the color palette as interactive tiles that darken on hover, revealing alternate shades. The example uses Bootstrap for layout and custom CSS classes to define each color’s base and hover states, with no JavaScript libraries or data sources involved.

AI-generated description

Similar vizzes

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

Fork of HTML Starter

This interactive color generator displays harmonious color palettes based on color theory principles, presenting six color swatches per scheme with HEX, RGB, and HSL values. Using vanilla JavaScript, the application implements HSL-to-RGB conversion through custom mathematical functions and generates monochromatic, analogous, complementary, triadic, and tetradic schemes. Users click buttons to generate random colors or palettes, and click individual cards to copy hex values to the clipboard. The interface uses CSS grid for responsive layout and CSS transitions for hover effects and animations.

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

Javascript Random Color Array

This example displays a static set of fifty distinct hex color swatches arranged in a simple grid, drawn from a hardcoded JavaScript array of color values. The visualization uses plain JavaScript and the Canvas API to render each color as a filled rectangle, with no interactivity or animation. The code defines the color palette directly in the `colorArray` variable, which is then iterated over to produce the visual output.

Aackuser
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