Enter one hex color and instantly generate harmonious palettes: complementary, analogous, triadic, tetradic, and monochromatic shades/tints. Click any swatch to copy the hex code.
Complementary —colors 180° apart on the color wheel. High contrast, vibrant pairings. Good for call-to-action buttons on neutral backgrounds. The classic example: blue (#2563EB) with orange (#EA580C). When designing with complementary colors, use one as the dominant color (60–70% of the visual area) and the other as an accent. A 50/50 split creates visual vibration that strains the eyes. For backgrounds, desaturate both colors by 20–30% to reduce the intensity while preserving the hue relationship.
Analogous —colors 30° apart. Low contrast, harmonious, often found in nature. Great for gradients and UI backgrounds. Analogous palettes are the safest choice for full-page designs: the colors sit next to each other on the wheel and create a natural flow from one section to the next. A cyan-teal-green palette feels organic and is widely used in SaaS dashboards. The risk: without enough lightness variation, analogous layouts look flat. Add a dark shade or a light tint of one color to create depth.
Triadic —three colors 120° apart. Balanced vibrancy. Best used with one dominant color and two accents. The classic web triadic palette: a primary brand blue for headers and buttons, a red-coral accent for warnings and highlights, and a yellow-gold accent for success states and ratings. Triadic palettes work well for data visualizations because the three hues are perceptually distinct — viewers can easily distinguish three data series at a glance. Avoid using all three at full saturation; mute two of the three to let one command attention.
Tetradic (Square) —four colors 90° apart. Rich and complex. Let one color dominate, use others as accents. Tetradic palettes are the hardest to balance — four fully saturated competing hues create chaos. The standard technique: pick one color as the 60% background/foundation, use a second at 30% for primary UI elements, and reserve the remaining two at 10% combined for small accents like icons, badges, and link underlines. Testing on a gray background first helps: if the four-color palette works in grayscale (distinct lightness levels), it will work in color.
Monochromatic —variations in lightness and saturation of a single hue. Clean, professional look. Tints = add white, shades = add black, tones = add gray. Monochromatic design is the default for high-end editorial and luxury brand sites — it communicates restraint and lets photography or typography carry the visual interest. For developer tools and dashboards, a blue monochromatic palette (from near-white #F0F4FF to deep navy #1E3A5F) creates a calm, focused environment that doesn't compete with code or data. The key: generate at least 7 stops — 3 for backgrounds (page, card, hover), 2 for text (body, muted), 1 for borders, and 1 for the accent. Fewer than 5 stops in a monochromatic system and you will reach for another color out of necessity.
See also: Color Converter · CSS Gradient Editor · Box Shadow Generator