Design tool
Color Palette Generator
Create harmonic color palettes by converting a base HEX color to HSL and applying geometric hue offsets.
Generated palette
#1F6B45 · #6B1F45
How base color and harmony modes work
The generator accepts a six-digit HEX color beginning with # and converts it to HSL (hue, saturation, lightness). This intermediate format makes color harmony simple: the tool applies mathematical offsets to the hue value to generate companion colors while preserving saturation and lightness. A complementary palette shifts the hue by 180 degrees, placing opposite colors on the color wheel. An analogous palette shifts by ±30 degrees, grouping nearby hues. A triadic palette creates three colors spaced 120 degrees apart. A split-complementary palette generates two colors at +150 and +210 degrees from the base, widening the complementary contrast while reducing intensity. Monochromatic mode ignores the hue offset and instead varies lightness across five fixed stops (20%, 35%, 50%, 65%, 80%), keeping the base hue and saturation constant.
The output lists each generated color as a HEX string alongside its rgb() equivalent for immediate use in CSS. The copy button collects all palette HEX values as a comma-separated list, suitable for pasting into a design system or color variable file.
Converting #1F6B45 through the complementary harmony
The tool parses #1F6B45 as rgb(31, 107, 69). Dividing by 255 normalizes these to decimal fractions. The maximum of 0.4196 belongs to the green channel, and the chroma calculation (difference between max and min) equals 0.2980. Lightness at 0.2706 falls toward the dark end of the spectrum. Saturation of 0.5506 indicates moderate color intensity. Since green is the dominant channel, the hue formula uses the blue-to-red difference: (0.2706 − 0.1216) ÷ 0.2980 = 0.5, plus 2 (the green sector offset), then multiplied by 60 to convert from a hue wheel sector to degrees, yielding 150 degrees.
The complementary harmony places the new color at 330 degrees, exactly 180 degrees from the base hue. Converting hsl(330°, 0.5506, 0.2706) back to HEX proceeds through chroma C = (1 − |2 × 0.2706 − 1|) × 0.5506 = 0.2980, then an intermediate value X and final RGB channel values, each multiplied by 255 and rounded. The result is #6B1F45, a deep magenta that pairs with the original teal for high contrast.
Practical palette composition and design intent
Complementary palettes offer maximum contrast and visual tension, suitable for call-to-action buttons or highlighting important content against neutral backgrounds. They risk appearing chaotic if overused in large areas. Analogous palettes feel harmonious and calm, sharing a range of adjacent hues; they work well for backgrounds, gradients, and thematic color schemes where subtle variation preserves cohesion. Triadic palettes distribute three equally spaced hues, creating balanced variety without complementary punch; they suit playful or multifaceted interfaces where three distinct sections need visual equality.
Split-complementary mode adds complexity: the two secondary colors are adjacent to the complement, preserving contrast while softening the jarring quality of a pure complementary pair. Monochromatic mode generates five tints and shades of a single hue, essential for building depth with a single color family in brand systems, grayscale contexts, or wherever hue variety is undesirable. All harmony outputs remain starting points: verify contrast ratios (especially for text) and test perceived brightness across your specific medium before deployment.
Harmony modes and their color wheel geometry
- Complementary: two colors 180 degrees apart, delivering maximum visual opposition and contrast energy.
- Analogous: three colors spanning 60 degrees total (−30°, 0°, +30°), grouped for visual harmony and coherent appearance.
- Triadic: three colors evenly spaced at 120-degree intervals, creating balanced contrast without the starkness of pure opposition.
- Split-complementary: the base hue plus two colors at +150° and +210°, offering contrast softer than complementary while maintaining visual interest.
- Monochromatic: a single hue across five lightness stops (20%, 35%, 50%, 65%, 80%), generating tonal depth and hierarchy within one color family.
Frequently asked questions
What HEX color format does this require?
The base color must be a valid six-digit HEX code preceded by a # symbol, such as #1F6B45 or #000000. Each pair of digits represents the red, green, and blue channels in hexadecimal (0–9, A–F). Colors with shortened three-digit notation (e.g., #FFF) must be expanded to six digits (#FFFFFF) before entering.
Why does the same hue sometimes look darker or lighter in the palette?
The generator preserves lightness exactly as it appears in the base color for most harmonic modes, but monochromatic mode intentionally varies lightness across five fixed steps. This intentional variation is what makes monochromatic mode useful for creating tonal depth from a single hue.
Can I use these palette colors directly for text contrast?
Not automatically. The generator produces colors based on hue, saturation, and lightness relationships, which do not guarantee sufficient contrast for readable text. Always measure the contrast ratio between text and background colors using the WCAG guidelines (4.5:1 for normal text, 3:1 for large text) before deployment.
How does monochromatic mode differ from the other harmonies?
Monochromatic mode ignores hue offsets entirely, keeping the base hue and saturation constant while generating five colors at fixed lightness values: 20%, 35%, 50%, 65%, and 80%. This creates a single-color family suitable for hierarchical or tonal designs, whereas other modes add hue diversity.
What does the RGB output next to each color mean?
Each HEX color is converted to its rgb(red, green, blue) equivalent using 0–255 integer values. For example, HEX #FF0000 equals rgb(255, 0, 0). Both formats represent the same color; use whichever your design tool or CSS document prefers.
Why are split-complementary colors placed at +150° and +210° instead of equal spacing?
Split-complementary specifically offsets from the 180-degree complement point. Rather than using the exact opposite color, it shifts ±30 degrees from that opposite point, creating two flanking colors that provide contrast while avoiding the intensity of a pure 180-degree opposition.