Black, White, Gray, Silver & Rainbow (30363 colors)

Named Colors

Rainbow — 30363 Hex Color Codes

Count Total: 0

:root { --bg: #fafafa; --card: #ffffff; --muted: #666; --accent: #2b7cff; --mono: #111; } html, body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); color: var(--mono); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .site-header { padding: 28px 20px; text-align: center; background: linear-gradient(180deg, #fff 0%, #f7f8fb 100%); border-bottom: 1px solid #e6e9ee; } .site-header h1 { margin: 0 0 8px 0; font-size: 20px; } .lead { margin: 0; color: var(--muted); font-size: 13px; } main { max-width: 980px; margin: 28px auto; padding: 0 16px; } h2 { margin: 0 0 12px 0; font-size: 16px; } .swatch-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .swatch-list li { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--card); border: 1px solid #eceff3; border-radius: 8px; } .swatch { width: 56px; height: 42px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); flex: 0 0 56px; } .meta { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .meta .hex { color: var(--muted); font-size: 13px; } .rainbow-section { margin-top: 20px; } .controls { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .controls input[type="number"] { width: 120px; padding: 6px 8px; border-radius: 6px; border: 1px solid #dfe6ee; } button { background: var(--accent); color: #fff; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; } button:hover { filter: brightness(0.95); } .status { margin-left: auto; color: var(--muted); font-size: 13px; } canvas { display: block; width: 100%; max-width: 900px; height: 60px; margin-bottom: 12px; border: 1px solid #e6e9ee; border-radius: 6px; background: linear-gradient(90deg,#fff 0,#fff 100%); } .actions { display: flex; gap: 8px; margin-bottom: 12px; } textarea { width: 100%; box-sizing: border-box; padding: 12px; border-radius: 8px; border: 1px solid #e6e9ee; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size: 12px; resize: vertical; background: #fff; color: #111; } .site-footer { max-width: 980px; margin: 26px auto; padding: 10px 16px; color: var(--muted); font-size: 13px; } @media (max-width: 560px) { .controls { flex-direction: column; align-items: stretch; } .status { margin-left: 0; } } export function hslToHex(h, s, l) { // h in [0,360), s and l in [0,1] s = Math.max(0, Math.min(1, s)); l = Math.max(0, Math.min(1, l)); const c = (1 - Math.abs(2 * l - 1)) * s; const hh = h / 60; const x = c * (1 - Math.abs((hh % 2) - 1)); let r1 = 0, g1 = 0, b1 = 0; if (hh >= 0 && hh < 1) { r1 = c; g1 = x; b1 = 0; } else if (hh >= 1 && hh < 2) { r1 = x; g1 = c; b1 = 0; } else if (hh >= 2 && hh < 3) { r1 = 0; g1 = c; b1 = x; } else if (hh >= 3 && hh < 4) { r1 = 0; g1 = x; b1 = c; } else if (hh >= 4 && hh < 5) { r1 = x; g1 = 0; b1 = c; } else if (hh >= 5 && hh < 6) { r1 = c; g1 = 0; b1 = x; } const m = l - c / 2; const r = Math.round((r1 + m) * 255); const g = Math.round((g1 + m) * 255); const b = Math.round((b1 + m) * 255); return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase(); } export function generateRainbow(count, options = {}) { // options: {s: 1, l: 0.5, direction: 'hue'|'sweep'} const s = options.s ?? 1; const l = options.l ?? 0.5; const colors = new Array(count); for (let i = 0; i < count; i++) { // distribute hues across a slightly extended range for smoother loop const hue = (i / count) * 360; colors[i] = hslToHex(hue, s, l); } return colors; } import { generateRainbow } from './colorGenerator.js'; const DEFAULT_COUNT = 30363; const countInput = document.getElementById('count'); const generateBtn = document.getElementById('generate'); const totalCountEl = document.getElementById('totalCount'); const previewCanvas = document.getElementById('preview'); const paletteArea = document.getElementById('palette'); const showPreviewBtn = document.getElementById('showPreviewPalette'); const downloadBtn = document.getElementById('downloadAll'); const copyBtn = document.getElementById('copyAll'); let currentColors = []; function drawPreview(colors) { const canvas = previewCanvas; const ctx = canvas.getContext('2d'); const w = canvas.width; const h = canvas.height; // clear ctx.clearRect(0, 0, w, h); // for performance, map each canvas x column to a color index for (let x = 0; x < w; x++) { const idx = Math.floor((x / w) * colors.length); ctx.fillStyle = colors[idx]; ctx.fillRect(x, 0, 1, h); } // add subtle overlay for clarity ctx.globalCompositeOperation = 'destination-over'; } function updateUI(colors) { currentColors = colors; totalCountEl.textContent = String(colors.length); drawPreview(colors); // show first 200 by default const previewCount = Math.min(200, colors.length); paletteArea.value = colors.slice(0, previewCount).join('\n'); paletteArea.scrollTop = 0; } async function generateAndShow(n) { // ensure integer and positive n = Math.max(1, Math.floor(Number(n) || DEFAULT_COUNT)); // generate const colors = generateRainbow(n, { s: 1, l: 0.5 }); updateUI(colors); } generateBtn.addEventListener('click', () => { generateAndShow(countInput.value); }); showPreviewBtn.addEventListener('click', () => { if (!currentColors.length) return; paletteArea.value = currentColors.slice(0, 200).join('\n'); }); downloadBtn.addEventListener('click', () => { if (!currentColors.length) return; const blob = new Blob([currentColors.join('\n')], { type: 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `rainbow-${currentColors.length}.txt`; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); }); copyBtn.addEventListener('click', async () => { if (!currentColors.length) return; try { await navigator.clipboard.writeText(currentColors.join('\n')); copyBtn.textContent = 'Copied!'; setTimeout(() => (copyBtn.textContent = 'Copy all to clipboard'), 1500); } catch (e) { console.error('Copy failed', e); } }); // initialize on load with default 30363 document.addEventListener('DOMContentLoaded', () => { countInput.value = String(DEFAULT_COUNT); generateAndShow(DEFAULT_COUNT); });