#01
Palette Types and Color Theory
Analogous generates colors based on adjacent hues on the color wheel (approximately ±30°). Characterized by visual harmony, smooth transitions, often used for page backgrounds, card gradients, and other large-area color schemes. The limitation of analogous colors is low contrast, which affects text readability.
Complementary selects two colors directly opposite each other on the color wheel (180° apart). Characterized by strong contrast and visual tension, often used for primary + accent color combinations (e.g., blue primary + orange accent). When pure complementary colors are used adjacent to each other, the visual effect can be too stimulating — it is recommended to use one as the primary color and the other as an accent.
Monochromatic generates schemes based on the same hue, varying saturation and lightness. Characterized by clear hierarchy, visual unity, and high fault tolerance, especially suitable for beginners to quickly generate usable color schemes. A typical monochromatic palette includes: high-saturation primary color + low-saturation background color + lighter/darker auxiliary colors.
Random does not follow specific color rules, randomly generating a set of color combinations. Although lacking theoretical foundation, it is very effective when "seeking inspiration" — you may discover unexpected harmonious combinations. Recommended usage: first find inspiration through random colors, then use HSL fine-tuning to lock the final scheme.
HSL Fine-tuning and Color Locking
The advantage of HSL lies in its alignment with human-perceived color dimensions: Hue determines "what color", Saturation determines "color vividness", Lightness determines "how bright the color is". This makes HSL particularly suitable for color-adjustment workflows "based on one primary color, adjusting other parameters".
Common HSL adjustment tips: for a "brighter hover state", increase Lightness by approximately 10%~15%; for a "darker active state", decrease Lightness by approximately 8%~12%; for a "grayscale disabled state", reduce Saturation to 10%~20%; for "generating background colors", lower Saturation to 5%~20% and increase Lightness to 90%~97%.
Color locking solves the problem of "losing satisfactory colors after repeated generation". When you find a color you like, click the "Lock" button and the color will be preserved when generating new palettes. This means you can define primary, auxiliary, and neutral colors one by one — adjusting only the unlocked parts each time. Recommended workflow: determine primary color and lock → generate auxiliary colors based on primary color and lock → generate remaining neutral colors.
Image Color Extraction and Data Security
Extracting color schemes from images is a commonly used inspiration source method for designers. A photography work often contains carefully composed color palettes (golden dusk, blue coast, green forest) — these naturally occurring color schemes have a high degree of harmony. After uploading an image, the tool uses the K-means clustering algorithm to find "representative colors" in color space, extracting the most frequently appearing colors as your palette.
K-means clustering extraction principle: first collect all pixels in the image (excluding too dark, too bright, and too gray pixels) into a color list; then cluster the color list into a specified number of groups (K groups), with the center value of each group being a "representative color"; finally sort by the number of pixels in each group from most to least. This ensures that the extracted colors both represent the image's main color tone and account for diversity.
Data security: image color extraction involves user-uploaded images — these images may contain unreleased brand visual guidelines, client product design screenshots, etc. The core design principle of this tool is "100% local browser execution". All image reading, pixel analysis, K-means clustering, and color calculations — everything is completed in your own browser. The page itself does not send any backend requests related to input content.
For images containing highly sensitive information (e.g., unreleased product screenshots), we still recommend you operate in a network-disconnected controlled environment, or close the browser tab after tool use. Safety is no trivial matter.