Support

Mastering colors with colors.tools

colors.tools offers a comprehensive suite of online utilities designed to streamline your color selection process and empower your creative endeavors. From crafting personalized palettes to exporting your favorite hues, this versatile platform puts the power of color manipulation at your fingertips.


How to use colors.tools

 

Step 1: Pick your color

 

Navigate to any tool page on colors.tools and embark on your color journey. Here’s how to begin.

  1. Select Your Base Color: Tap on the droplet icon to unveil the color picker dialog. From there, you can pinpoint your preferred shade using a variety of methods:
  • Pure Hues: Choose from a spectrum of twelve primary hues, including Red, Orange, Yellow, and beyond. These fundamental colors serve as the building blocks for your palette.
    List of pure hues available: Red, Orange, Yellow, Chartreuse Green, Green, Spring Green, Cyan, Azure, Blue, Violet, Magenta and Rose.
  • Hues Slider: Expand your color horizons by sliding across the hues spectrum. This feature allows for precise customization, granting you access to an extensive array of shades beyond the basic palette.
    Saturation Control: Fine-tune your selection by adjusting the saturation level. Whether you seek bold vibrancy or subtle tones, method enables you to achieve the perfect balance.
  1. Enter Hexadecimal Values: For those with specific color codes at hand, simply input the hexadecimal value directly into the color input field. This direct method ensures accuracy and efficiency in color selection.
 

Step 2: Unleash Your Creativity

 

Once you’ve pinpointed your desired color, it becomes the focal point of your creative journey. As you navigate tools, your chosen color remains steadfast, providing continuity in the process of picking the right colors for your project.

  1. Configure your tool
  • Harmonies: Both the Harmonies tool and the Wheel tool offer the selection of harmonies. These are a combinations of colors that are aesthetically pleasing when used together. These tools select colors that work well together with your main color selected in terms of contrast, balance and overall cohesion. These are the color harmonies available to you on selected tools:
    1. Complementary: Colors that are opposite each other on the color wheel. Complementary colors create strong contrast and can make each other appear more vibrant when used together.
    2. Analogous: Colors that are adjacent to each other on the color wheel. Analogous color schemes are harmonious and create a sense of unity and flow.
    3. Analogous + Complementary: Combines adjacent colors on the color wheel (analogous) with their respective complementary colors. This results in a balanced yet dynamic color scheme that offers both harmony and contrast.
    4. Triadic: Three colors that are evenly spaced around the color wheel. Triadic color schemes offer a balanced contrast while still providing variety.
    5. Split-Complementary: A variation of the complementary scheme, where instead of using the exact opposite color, two adjacent colors to the complementary are chosen. This provides a similar contrast but with less intensity.
    6. Tetradic: Two pairs of complementary colors. Tetradic schemes offer a high level of contrast and versatility but can be challenging to balance effectively.
    7. Square: Four colors that are evenly spaced around the color wheel, forming a square shape. This arrangement ensures that the colors complement each other while offering a variety of contrasts and visual interest.
  1. Variations: The Mixer tool, the Tones tool, the Tints & Shades tool and Lighten & Darken tool offer the selection of variations. This feature enables you to adjust your tool settings to generate more or fewer color variations. Decreasing the selection of variations yields a smaller range of colors, while increasing it produces a broader spectrum of variations.
 

Step 3: Export Your Selections

 

Each tool offers the capability to export the color selections, generated based on the configured settings, in various formats and shapes including CSS, SCSS, JS, SVG, and PNG. It's also possible to export the color selections as a Theme for your UI libraries such as Chakra UI and MUI. This export is available only for the UI Theme tool.