Config
Count 8, style Morandi, prefix pastel
Output
--pastel-1: #c9b8a8; ...
Design Tools
Pastel Color Generator — Soft Low-Saturation Palettes
Generate soft pastel and Morandi-style palettes in your browser. Choose count and style, lock swatches you want to keep, and export HEX lists or CSS variables for charts, backgrounds, and gentle UI themes.
PastelPaletteColor
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
Pastel Color Generator
Click generating to harness beautiful low-saturation, high-lightness pastel (Macaron / Morandi) aesthetics suitable for modern background components.
CSS 变量
等待生成调色板。算法思路
Traditional random hex strings produce muddy and stark colors. Pastel algorithms strictly enforce H (0-360 random), S (60-80% saturation), and L (75-90% lightness) in HSL space, then convert explicitly to hex code ensuring safe UI visibility harmony without any design skill prerequisite.
Use cases
- Create a soft series for charts
- Generate low-saturation background and tag colors
- Export prefixed CSS variables for a theme
How to use
- Choose count and style (soft, warm, cool, Morandi, or mono)
- Generate, then lock any swatches you want to keep
- Copy the HEX list or CSS variables
Example input and output
FAQ
How are the colors generated?
Samples are drawn in HSL within a high-lightness, low-saturation range—not fully random hex values.
Can I change the CSS variable prefix?
Yes. Edit the prefix and exported names such as --prefix-1 update to match.
Tools
Related tools
Continue with another translated tool for a nearby task.
Palette Generator
Palette Generator — Rule-Based Color Sets
Generate palettes with monochrome, analogous, complementary, triadic, or fully random rules. Lock individual swatches and keep randomizing the rest for UI exploration and brand-color derivatives.
Palette Color Harmony
Color Harmonizer
Color Harmonizer — Classic Harmony Rules
Pick a base color and generate schemes with complementary, analogous, triadic, tetradic, split-complementary, or monochromatic rules. Preview UI usage and export CSS variables for brand and component work.
Palette Color Harmony
Color Converter
Color Converter — HEX, RGB, HSL Online
Convert colors among HEX, RGB, HSL, HWB, CMYK, and CSS variables in your browser. Includes a color picker and random color helper for design handoff, stylesheet work, and brand-color alignment.
Color HEX RGB