Create color palettes from a base color, then copy HEX, RGB, HSL, and CSS variables directly in the browser.
The generator creates sRGB/HSL palettes from a base color. It shows HEX, RGB, and HSL values, plus an option to copy CSS variables.
Enter a HEX color or use the picker, choose the harmony mode, and adjust the number of colors. The shared link recreates the same palette with color, mode, and quantity, without saving history or favorites.
The palette is calculated in sRGB/HSL in the browser from the provided color.
Accepts #RRGGBB, RRGGBB, #RGB, or RGB.
Uses nearby colors on the HSL wheel for a softer combination.
Summary
5 colors from #2F80ED, using Analogous mode.
Each card shows HEX, RGB, and HSL values. Labels stay outside the color area to avoid poor readability.
Color 1
#2F80ED
#2F80EDrgb(47, 128, 237)hsl(214, 84%, 56%)Color 2
#28EAD8
#28EAD8rgb(40, 234, 216)hsl(174, 82%, 54%)Color 3
#3ED3F2
#3ED3F2rgb(62, 211, 242)hsl(190, 87%, 60%)Color 4
#1C91D8
#1C91D8rgb(28, 145, 216)hsl(203, 77%, 48%)Color 5
#4A6FF1
#4A6FF1rgb(74, 111, 241)hsl(227, 86%, 62%)Analogous, complementary, and triadic modes rotate hue around the HSL wheel and adjust saturation or lightness.
Tones mostly vary lightness; monochrome keeps the hue and combines saturation and lightness variations.
The tool uses only color, mode, and quantity in the URL. It does not save palettes to favorites, localStorage, or the server.
Start with a color that already represents the project, such as a brand color, image color, or visual preference. The random button helps when you want to explore.
HEX is compact for CSS and design; RGB shows red, green, and blue channels; HSL separates hue, saturation, and lightness, which makes variations easier.
Not necessarily. This tool suggests visual combinations and does not perform contrast, WCAG, or text readability audits.
No. The palette is generated in the browser. A shared link stores only the base color, mode, and quantity.
Yes. Copy individual values or the CSS variable block and adjust names for your project.