Skip to main content
100%

Javascript Random Color Array

✓ Published0🌍 Public
Aackuser
Last edited Oct 16, 2012
Created on Nov 15, 2018

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.

AI-generated description

Similar vizzes

Loading thumbnail…

AMD Module Examples

This example displays a grid of 24 colored boxes, each containing placeholder text. It shows how to generate random hexadecimal color values and apply them as background colors. The page uses plain JavaScript with the `insertAdjacentHTML` method to dynamically add the div elements to the DOM. A custom `randomColor` function builds light or dark hex codes by selecting characters from predefined key arrays, then concatenating them into a six-digit string. The result is a colorful, evenly spaced layout created entirely with client-side scripting.

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

Gist ec761bad0f5e7bfb19f46d45ba0b3355

This example defines a small JavaScript utility that converts hexadecimal color codes into their red, green, and blue component values. The code presents the `hexToRgb` function, which first parses the hex string—overlooking an optional leading `#`—into an integer, then extracts the separate color channels using bit shifts and bitwise AND operations. The function returns an array of three numbers, each representing the intensity of a channel. This demonstrates a modular approach to color handling, using only core JavaScript without any external libraries or APIs.

MMAKIO135
70% match
Loading thumbnail…

CodePen - Wiki Colors

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.

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

rainbow palette using p5js

A rainbow palette is displayed as a horizontal gradient strip, with color varying continuously from red to violet across the canvas width. Two HTML range sliders control the saturation and brightness/lightness of the displayed colors in real time. The visualization uses p5.js in HSB color mode, iterating through each pixel column and drawing a vertical line with a stroke color determined by the current slider values. The code relies on the p5.js `createCanvas`, `colorMode`, `stroke`, and `line` functions, alongside standard DOM slider elements.

Aaaizemberg
68% match
Loading thumbnail…

random light or dark HEX color fn

This example demonstrates a utility function that generates random hexadecimal color strings, either light or dark depending on a boolean argument. It shows a simple technique for constraining color brightness by selecting characters only from specific hex ranges—`a` through `f` for light colors and `0` through `5` for dark ones. The function builds a six-character string by repeatedly picking a random index from the appropriate key array using JavaScript’s `Math.random` and `Math.floor`. No external libraries are used; the code relies solely on native JavaScript string concatenation and array indexing to produce the final color value.

Aamoradi
68% match
Loading thumbnail…

30.000 círculos

A canvas displays 30,000 randomly placed circles, each with a random position, radius up to 10 pixels, and a semi-transparent random color. The example uses the HTML5 Canvas API, specifically `getContext("2d")`, `beginPath`, `arc`, and `fill`, to draw every circle individually in a single loop. Each circle’s fill style is set to an `rgba()` string with random red, green, and blue values from a custom `rc()` function and a fixed alpha of 0.5. The data is generated procedurally with `Math.random()`, producing an overlapping, colorful field with no external dataset.

Aaaizemberg
68% match