Help with colors.tools
Choose a starting color, explore the tools, and copy or export the results for your project.
1. Choose a color
On a tool with a color input, enter a HEX value such as #336699. The field already shows the # prefix, so you can also enter 336699.
Select the droplet icon beside the input to open the color picker:
- Pure Hues: choose a preset hue as a starting point.
- Hues: move the slider to change the hue.
- Saturation: move within the color area to adjust saturation and brightness.
The Mixer has two color inputs so you can choose both ends of a blend.
2. Adjust the tool
Use the controls shown on the tool you are using:
- Harmonies: in Harmonies or Color Wheel, choose a color-wheel relationship. Complementary colors sit opposite each other; analogous colors sit nearby; triadic colors are evenly spaced in a group of three. These relationships do not guarantee accessible text contrast. Check the foreground and background combination you plan to use.
- Variations: in Mixer, Tones, Tints & Shades, or Lighten & Darken, choose how many variations to display. Higher counts use smaller intervals between samples; lower counts show fewer intermediate colors.
For a broader set of colors, try UI Theme or Color Style Guide. To start from an image, use Dominant Image Colors.
3. Copy or export your results
Use a result's copy control to copy its color value. Where export controls are available, choose from the formats shown on that tool. Available formats vary by tool and can include CSS, SCSS, JavaScript, SVG, and PNG.
In UI Theme, Theme exports a System UI JavaScript color object. SVG and PNG exports are also available there.
Need more help?
Email help@colors.tools with the tool or page you are using, the steps to reproduce the problem, what you expected, what happened, and your browser name and version.