A clear HSL rule
Equal spacing refers to hue angles, not equal brightness, prominence or accessibility. The companions share the base saturation and lightness, which can still create very different luminance values.
ONELESS / COLOR
Triadic Color Palette Generator
A triadic palette places three hues evenly around the HSL circle. This generator keeps the base exact and adds companions at 120 and 240 degrees. Compare the full trio, inspect individual values and take the set into a design where one color can lead and the others can support it.
Open Triadic Color Palette Generator. JavaScript powers the workspace; the full guide is available below.
UNDERSTAND THE RESULT
Color, with a little context.
The base is preserved
The first result is your exact normalized HEX. Companion colors are calculated from HSL and rounded once to 8-bit RGB. Alpha is outside this view; use an opaque 3- or 6-digit code.
Harmony is not a contrast guarantee
At zero saturation every companion can become the same gray. Black and white endpoints also collapse. Select any swatch to inspect black/white text ratios, and assess actual pairs with WCAG Contrast Checker.
HOW TO USE IT
From a starting point to a usable result.
- Enter the Base HEX to update the palette immediately.
- Compare the base and its companions using the 120° equal spacing relationship.
- Select a swatch to inspect and copy its HEX, or choose CSS to copy every color as a numbered variable.
A WORKED EXAMPLE
Three primaries on the digital circle
#FF0000 at hue 0° produces #00FF00 at 120° and #0000FF at 240°. Their hue spacing is equal but their relative luminance and text contrast are not.
EVERYDAY USES
Make the next small decision easier.
Explore a three-part composition
Use the trio as a starting point for a primary color and two accents. Adjust how much space each occupies instead of assuming they must have equal visual weight.
Keep a reusable starting set
Copy the palette into a draft stylesheet or mood board. Name roles only after checking the colors in their actual composition and text context.
LOCAL WORKSPACE
Your work stays in this browser.
The tool processes color values locally. It does not upload the input to a processing server or save it in browser storage. Leaving or reloading the page clears the working state. Copying places the selected result on your clipboard; sharing sends only the page address without your working values.
These tools describe sRGB colors. Browser decoding, color management and the display can affect what you see; they are not an ICC proofing workflow or a print-color guarantee. Read the site privacy policy for information about the surrounding website.
KEEP IT NEARBY
One less search next time.
Press Ctrl + D on Windows or Command + D on Mac to bookmark this page. Your browser may also offer Create shortcut or Add to Home Screen. Shortcuts open the tool; they do not include your colors or images.
Choose a shortcut icon
Soft Coral
Warm Peach
Sunset Orange
OneLess Blue
Rose PinkQUESTIONS, ANSWERED
A few useful details.
Is this an artist paint wheel?
No. These relationships use digital HSL hue angles in sRGB, not an RYB paint model.
Why do some swatches look the same?
Hue changes have no visible effect on zero-saturation gray or on pure black and white. The tool reports the mathematical relationship without inventing extra saturation.
Can I edit each companion independently?
This focused generator keeps a fixed hue relationship and shared saturation/lightness. Use Color Picker or Color Palette Generator to refine individual outputs afterward.
Is the palette automatically accessible?
No. A hue relationship does not guarantee any required contrast ratio. Check the actual text/background or meaningful graphic pair separately.
How are the three hues positioned?
The base and its two partners are spaced 120 degrees apart on the digital HSL hue circle.
Can I choose the starting color myself?
Yes. Enter a base HEX to generate the other two hues around it. The relationship stays triadic as you change the starting point.
Do I need to use all three colors in equal amounts?
No. A dominant color and two smaller accents can be easier to organize. The tool supplies a hue relationship; you choose roles and proportions in the design.
REFERENCES
ANOTHER SMALL STEP
Keep the next tool close.
Ready for a little more color?
Three hues. Equal spacing. A balanced starting point.
Return to Triadic Color Palette Generator ↑