도구 가이드
Design 무료 회원가입 불필요

Random Color Generator

Generate random single colors or harmony-aware palettes with HSL constraints, locked colors, export to CSS/HEX/RGB/HSL, and palette history.

도구를 불러오는 중…

이 도구에 대해

Generate beautiful random colors and palettes with precision control over the randomness. Single Color mode generates one random color and displays it as a large full-width swatch with its HEX, RGB, and HSL values. Palette mode generates 2–10 colors at once, each shown as a tall swatch column. Set HSL constraints — hue range (0–360°), saturation range (0–100%), and lightness range (0–100%) — to limit generation to specific tones, such as pastel colors (high lightness, low-mid saturation) or earthy tones (hue 20–60°). Harmony-aware generation creates palettes where the colors are mathematically related: complementary (opposite hues), analogous (adjacent hues), triadic, split-complementary, or tetradic. Lock individual swatches by clicking the padlock icon — locked colors stay fixed while unlocked ones regenerate on each shuffle. The history panel remembers your last 20 generated palettes as mini thumbnail strips you can click to restore. Export the current palette as a CSS hex list, a JavaScript/TypeScript array of hex values, an array of RGB objects, an HSL string list, or as CSS custom properties. Press Space or click Shuffle to generate a fresh palette instantly.

사용 방법

  1. 1 Choose Single Color or Palette mode and set the desired palette size (2–10 colors).
  2. 2 Optionally restrict the hue, saturation, and lightness ranges using the sliders.
  3. 3 Select a harmony type (Random, Complementary, Analogous, Triadic, etc.).
  4. 4 Press the Shuffle button or hit the Space key to generate new colors.
  5. 5 Click the padlock icon on any swatch to lock it before the next shuffle.
  6. 6 Choose an export format and click Copy to get CSS, JS array, or HSL values.

자주 묻는 질문

{# Alpine.js — self-hosted. (The previous jsdelivr CDN tag had a stale SRI integrity hash, so the browser refused to run it and window.Alpine was never defined — silently breaking every FAQ accordion and Alpine tool.) #}