Color Scheme Generator

Supports generating multiple color schemes, extracting colors from images, generating CSS gradients and shadow effects, with single-color or batch processing.

Bug report

Browser execution mode: Your data is processed in your browser and is not uploaded to the server.

Speed and Stability: Processing speed depends on your device and browser. For large batch work, the desktop version may be more stable.

Loading tool, please wait...

If the online tool fails to load or run, try the desktop tool.https://tools.yikeaigc.com/

Tool Usage

Return to old version

Monochrome Mode

Batch Pick Colors

1Choose Base Color

RGB: 2, 132, 199 HSL: 243°, 75%, 59%

2Choose Color Scheme

Color Count:

Saturation: 0%

Brightness: 0%

3Color Scheme

4CSS Gradient

Gradient Type:

Angle: 90°

5Shadow Effect

Blur Radius: 20px

Spread Radius: 0px

Opacity: 40%

Preview result

6Extract Colors from Image

Click to upload or drag an image here

Supports JPG, PNG, GIF, WebP

1Upload Multiple Images

Click to upload or drag multiple images here

Batch selection supported. Dominant colors are extracted automatically.

Colors per image:

Color scheme:

Copied to clipboard

'; zip.file('preview.html', htmlContent); const content = await zip.generateAsync({ type: 'blob' }); const link = document.createElement('a'); link.href = URL.createObjectURL(content); const timestamp = new Date().toISOString().replace(/[-:.]/g, '').slice(0, 15); link.download = `color-palettes-${timestamp}.zip`; link.click(); downloadBatchZip.disabled = false; batchStatus.textContent = 'ZIP文件已下载'; }); // ========== 导出功能 ========== document.getElementById('exportPaletteBtn').addEventListener('click', function() { if (currentPalette.length === 0) return; const data = { baseColor: baseColorPicker.value, scheme: currentScheme, colors: currentPalette.map(c => ({ hex: c.hex, rgb: `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`, hsl: `hsl(${Math.round(c.hsl.h)}, ${Math.round(c.hsl.s)}%, ${Math.round(c.hsl.l)}%)` })), gradient: gradientCode.textContent, shadow: shadowCode.textContent }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `color-palette-${baseColorPicker.value.replace('#', '')}.json`; link.click(); showCopyToast('配色方案已导出'); }); // ========== 初始化 ========== schemeDescription.textContent = schemeDescriptions['monochromatic']; updateColorDisplay(); updatePalette(); });

Instructions

Software Usage Instructions

Choose a base color: Use the color picker to select a base color, or enter a HEX color value directly (such as #4f46e5). You can also click the "Random Color" button for inspiration. The tool displays RGB and HSL color values in real time.
Choose a color scheme:
- Monochromatic scheme: The same hue, with variations created by changing saturation and lightness
- Analogous scheme: Adjacent colors on the color wheel, natural and soft
- Complementary scheme: Two opposite colors on the color wheel, with strong contrast
- Split complementary scheme: The base color and the colors on both sides of its complementary color
- Triadic scheme: Three colors evenly spaced on the color wheel
- Tetradic square scheme: Four evenly spaced colors
- Tetradic scheme: Two pairs of complementary colors, with clear layering
Adjust parameters:
- Number of colors: Choose to generate 3, 5, 7, or 9 colors
- Saturation adjustment: Drag the slider to increase or decrease overall saturation
- Lightness adjustment: Drag the slider to increase or decrease overall lightness
Generate CSS gradients: Choose a linear or radial gradient type and adjust the angle parameter to generate ready-to-use CSS gradient code.
Generate shadow effects: Adjust the blur radius, spread radius, and opacity parameters to generate shadow CSS code based on the current base color.
Extract colors from an image: After uploading an image, the tool automatically extracts the main colors. You can click anywhere on the image to pick a color precisely and apply the extracted color as the base color.
Batch color extraction mode: Switch to the "Batch Color Extraction" tab, upload multiple images, set the number of colors to extract from each image and the color scheme expansion mode, then click Start Batch Extraction. When complete, you can download a ZIP containing all results.
Copy and export: Click any color card to copy its color value, or click the "Export Color Scheme" button to download a JSON file containing the complete color scheme information.

FAQ

A: Monochromatic schemes are suitable for clean, elegant designs; analogous colors are suitable for natural themes and gradient backgrounds; complementary colors are suitable for standout designs that need strong contrast; triadic colors are suitable for lively children's products and artistic creation; square and tetradic schemes are suitable for complex interfaces and data visualization. Choose the appropriate scheme based on your design goals.

A: Upload an image in the "Extract Colors from Image" section, and the tool will automatically analyze it and extract 8 main color tones. You can click an extracted color to select it, then click the "Use Selected Color as Base Color" button to generate a complete color palette based on that color.

A: Click the "Copy" button in the gradient code area, paste the code into your CSS file, and apply it to the element that needs a gradient background. Both linear gradients and radial gradients are supported, and the angle direction of linear gradients can be customized.

A: The ZIP downloaded after batch processing is complete contains three files: palette-summary.json (a JSON summary of all color palette data), palettes.css (ready-to-use CSS variable definitions), and preview.html (a visual preview page). This makes it easy to use the extracted color palettes in different scenarios.

A: Saturation controls how vivid a color is. Increasing saturation makes colors more vibrant, while decreasing it makes colors softer and grayer; brightness controls how light or dark a color is. Increasing brightness makes colors lighter, while decreasing it makes colors deeper. Adjusting these two parameters lets you fine-tune the overall color palette effect.

Answer: Common image formats such as JPG, JPEG, PNG, GIF, and WebP are supported. We recommend using images with rich colors and high contrast for more accurate dominant color extraction results. Image processing is completed entirely locally and will not be uploaded to the server.

Answer: Click any color card or swatch directly, and the corresponding HEX color value will be automatically copied to the clipboard. A "Copied to clipboard" message will be displayed at the bottom of the page. In batch results, you can also click a color bar to copy the corresponding color value.