Drag on the interactive HSL color wheel to pick a base color, then get every classic color harmony — complementary, split-complementary, analogous, triadic, tetradic, and square — with copyable hex codes and live UI previews. Free, in your browser.
Drag on the wheel to pick a base color
Complementary colors sit directly opposite each other on the color wheel — blue and orange, red and green. They create the strongest possible contrast and vibrancy, which makes designs feel energetic and makes calls to action pop. Use one color as dominant and its complement sparingly as an accent to avoid visual tension.
Split-complementary takes a base color plus the two colors adjacent to its complement. You keep the high contrast of a complementary scheme but soften the tension, making it much harder to get wrong. It is a great starter scheme: one dominant hue, two supporting accents, and a naturally balanced result.
Analogous schemes use three neighboring colors on the wheel, such as yellow, yellow-green, and green. Because neighbors share an undertone, the result feels serene, harmonious, and natural — think sunsets and forests. Choose one dominant color, use the neighbors for support, and add a neutral for contrast.
A triadic scheme picks three colors evenly spaced 120 degrees apart, like red, yellow, and blue. It stays vibrant even when you use pale or muted versions, and it remains balanced because no hue dominates by proximity. Let one color lead and reserve the other two for accents and highlights.
Tetradic (rectangle) schemes use four colors arranged as two complementary pairs, spaced 60 degrees apart. They offer the richest variety of any classic harmony, but they are also the hardest to balance — pick one dominant color, mute the others, and watch the ratio of warm to cool hues carefully.
A square scheme spaces four colors evenly, 90 degrees apart around the wheel. Like tetradic, it pairs two complementary duos, but the even spacing gives a punchier, more playful balance of warm and cool. It works best when one color clearly dominates and the rest appear as small accents.
为您精选与 Color Wheel 搭配得当的工具。无需丢失文件，继续操作。
Generate, lock, and share 3-8 color palettes with harmony modes. Export as PNG, CSS variables, or JSON — free, right in your browser.
立即试用Explore the psychology, symbolism, and cultural meaning of any color — plus famous brand usage and suggested pairings with hex codes.
立即试用从照片中拾取任意像素颜色（HEX / RGB / HSL），或自动提取主色调配色方案。可导出为 JSON 或 CSS 变量。
立即试用用 23 多种专业效果变换照片：艺术风格、复古滤镜、现代效果和特殊变换。
立即试用从单张图片生成所有尺寸的 favicon（16、32、48、Apple 180、Android 192 和 512），并附带 site.webmanifest。打包为 ZIP 下载。
立即试用为 JPG、PNG、SVG、WEBP 或 GIF 图片添加自定义文字。支持多个文本框，可自定义字体、颜色和位置。
立即试用A color wheel arranges hues in a circle in spectral order — red through yellow, green, blue, and back to red. Colors that harmonize sit in predictable geometric positions on it. On this page, drag anywhere on the wheel (or type a hex code) to set your base color, and all six classic harmonies are computed instantly with copyable hex codes.
basicsComplementary colors sit directly opposite each other — blue and orange, red and green, yellow and purple. Because they are as different in hue as two colors can be, they create maximum contrast and vibrancy. Designers usually let one color dominate and use its complement sparingly for accents and calls to action.
color theoryTriadic uses three colors spaced 120 degrees apart, giving a vivid but balanced trio. Tetradic (rectangle) uses four colors as two complementary pairs spaced 60 degrees apart, offering the most variety but the hardest balance. Square also uses four colors but spaces them evenly at 90 degrees, which splits warm and cool hues more evenly.
color theoryStart from a color you already have — type its hex code into the wheel. For a safe, professional look use the analogous scheme; for a bold, high-contrast look use complementary or split-complementary. Each scheme on this page includes a small sample interface so you can judge how the combination feels in a real layout before committing.
usageYes. The wheel controls hue (around the circle) and saturation (distance from the center), and a separate slider controls lightness. Harmonies preserve your chosen saturation and lightness while rotating the hue, so a soft pastel base produces soft pastel harmonies and a deep base produces deep ones.
usage它每天都在解决真实的问题——服务企业、创作者和日常任务。找到适合您的用例，几秒即可开始。
See every classic harmony computed live from a base color you choose, with a plain-English explanation of when and why each scheme works.
Type your brand hex into the wheel and use split-complementary or triadic schemes to find accent colors that contrast without clashing.
Each harmony is applied to a small sample card — header, body, button, and dots — so you can judge combinations in context instead of as abstract swatches.
Use analogous harmonies for natural, serene scenes and complementary ones for dramatic focal points, copying exact hex codes into your painting app.
Pixoate