Color Matching Recommendation Tool

Professional color palette generator supporting multiple color scheme modes such as monochromatic, complementary, and triadic colors, with batch palette generation and export.

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

Set up first, then process

Choose a main color and rules before generating an exportable palette

Start fast with sample colors, or enter a HEX value for precise picking. Each step has a Next button. After setup, generate, save, and download.

HEX / RGB / HSL / CMYK Monochrome / Complementary / Triadic CSS / SCSS / JSON / PNG Settings can be saved

Current main color Click a color value to copy

HEX

RGB

HSL

Main color settings

Please set a main color first. Use the color picker, HEX input, or HSL sliders. The palette updates in real time.

Base colorSupports 6-digit HEX

HEX color value Example: #0F6FAE

CMYK

HSL fine-tuningFine-tune hue, saturation, and lightness

Hue205°

Saturation78%

Lightness37%

Palette name

Sample colorsClick to keep adjusting

Color rules

Select a color model, then set the color count and light/dark offset. Try generating once with defaults, then fine-tune for your design.

Color modelAnalogous colors suit unified, soft visuals

Generation SettingsSet parameters first, then preview

Color Count

Adjacent Angle24°

Saturation Shift0%

Brightness Shift0%

Neutralize8%

Sort By

Gradient Type

Gradient Angle90°

Preview tweaks

Check each color code, text readability, and UI mockup. Click any color value to copy.

Color Scheme5 colors

UI PreviewQuickly assess visual hierarchy

Gradient CodeCopy directly to CSS

Save & export

Export the current scheme or generate multiple schemes in bulk. Bulk results show only the first 20; downloads include all results.

Bulk OptionsSet the quantity as needed

Scheme Count

Variation

Export ContentFor files and code

HEX RGB HSL CMYK

JSON CSS SCSS PNG

Download ActionsZIP includes all bulk results

Bulk ResultsNo bulk results yet

Set the main color and color rules first, then click “Bulk Generate”.

Saved Schemes0

Saved schemes appear here. You can reapply or delete them.

Instructions

Software Usage Instructions

Set the primary color: In “Primary Color Settings,” use the color picker, HEX input box, or HSL sliders to set the base color. You can also click a sample color to load it quickly.
Choose a color harmony rule:
- Monochromatic: Generates light and dark variations based on the same hue, suitable for unified style designs.
- Analogous: Selects adjacent hues, suitable for soft, layered visual effects.
- Complementary: Uses colors opposite each other on the color wheel, suitable for highlighting buttons, titles, and key content.
- Split Complementary: Adds softer colors to a contrasting relationship, suitable for promotional graphics and campaign visuals.
- Triadic, Tetradic, Square: Suitable for charts, category labels, and multi-module interfaces.
- Neutral: Suitable for business pages, tool interfaces, and document-style designs.
Adjust generation parameters: Set the number of colors, adjacent angle, saturation offset, brightness offset, neutralization ratio, sorting method, and gradient angle.
Preview the color scheme: Go to “Preview & Fine-Tune” to view the HEX, RGB, HSL, and contrast information for each color. Click a color value button to copy it.
Save schemes and settings: Click “Save Current Scheme” to bookmark the color scheme, and click “Save Settings” to save the current parameters for future use.
Batch generation: Go to “Save & Export,” set the number of schemes and variation range, then click “Batch Generate” to create multiple color schemes. The interface displays the first 20 schemes, while downloads include all results.
Export files: You can download JSON, CSS, SCSS, and PNG files separately, or select export content and download it as a ZIP archive.

FAQ

A: Monochromatic is suitable for brand extensions and clean interfaces; Analogous is suitable for soft, unified pages; Complementary is suitable for emphasizing key information; Triadic is suitable for charts and multi-module layouts; Neutral is suitable for business tools and document scenarios.

A: Enter a color code in the HEX input box, such as #0F6FAE, and the tool will synchronously update the color picker, HSL sliders, and color scheme preview. You can also fine-tune it using the hue, saturation, and brightness sliders.

A: The CSS file generates color codes in variable form for use in web page styles; the SCSS file is suitable for Sass projects. Both formats make it easy to reuse colors in design systems, theme switching, and component styles.

A: Batch generation applies reasonable shifts to hue, saturation, and brightness based on the current primary color, color rules, and variation range, producing multiple color schemes that are stylistically related but not repetitive.

A: Saved schemes are recorded in the local storage of the current device. After clearing site data or switching devices, previously saved schemes may no longer be displayed, so we recommend exporting important schemes as files in time.

A: No. Color calculation, scheme saving, and file generation are all completed on the current device. The primary color, schemes, and exported content are not uploaded to the server.

A: In “Preview & Fine-tune,” check the white-text contrast and dark-text contrast for each color. The higher the value, the clearer the text is to read. When used as a body text background, it is recommended to choose a text color with higher contrast.