Try Color Designer

I’ve put together a website where you can try a demo version of the color generator to see how it works. Color Designer

Soon, you will also be able to try the demo version inside Blocs

2 Likes

Going to need some instruction on how to utilize what you have created.

Thanks

Rich the Weather Guy

1 Like

I hope this guide will help you to understand and use the color generator

Primary Color Options
The generator starts with a default Automatic Mode, which randomly selects a primary color for you.

  • You can switch to Manual Mode to choose your own primary color using the color input field. This gives you full control over the foundation of your palette.

Generate a Palette

  • Click “Generate Colors” to create a color palette based on your selected primary color and the chosen design settings.

Adjust Colors

  • Use sliders for Tint (lighter), Shade (darker), and Tone (more/less saturation) to fine-tune your palette to your liking.

Optimize Readability

  • Use the Contrast Slider to adjust contrast levels for text and background colors, ensuring your design is accessible and visually clear.

Lock Color

  • Click on a color box to lock it.

Locked colors will not change when you generate a new palette, allowing you to preserve key elements of your design. Locked colors are visually marked for easy identification.

Design Standards

Choose from one of three design standards to adjust your palette for specific styles:

  • Flat Design Crisp, vibrant colors with minimal saturation changes.
  • Material Design Dynamic, slightly saturated colors brightened for modern UI design.
  • Pastel Design Soft, muted tones for a gentle and approachable aesthetic.

Understanding Color Schemes

The generator uses established color schemes from color theory to ensure your palette is cohesive and balanced:

  1. Analogous

    • Uses colors adjacent to the primary color on the color wheel (e.g., blue, teal, and green).
    • Produces a harmonious, unified look, ideal for calm and pleasing designs.
  2. Complementary

    • Combines the primary color with its direct opposite on the color wheel (e.g., blue and orange).

    • Creates high contrast and vibrant palettes, perfect for highlighting key elements.

  3. Triadic

    • Distributes colors evenly across the color wheel, forming a triangle (e.g., red, yellow, and blue).

    • Balances contrast and harmony, offering vibrant yet controlled designs.

  4. Monochromatic

    • Focuses on variations of a single hue (tints, shades, and tones).

    • Provides a clean, cohesive look, ideal for minimalist or elegant designs.

Each scheme is applied dynamically to your primary color, creating a visually appealing and effective palette.

“Saving” and “Exporting”

Palettes are saved automatically in the tool’s history (local storage). Use the “Prev” and “Next” buttons to navigate through them.

Click “Copy :root CSS to clipboard” to copy the palette as CSS variables, making it easy to integrate into your project.

Freddy

Thank you

Rich the Weather Guy

This is really good, I’d sign up for this, the amount of time I spend viewing colour palettes or working out palettes, not just for web, but for wider design work, this would be a really helpful timesaving tool to use. Like a kid playing a video game, I’ve just been generating, and generating, and generating palettes with your demo making sounds such “oooh!” and “ah!”.

Thank you so much for your kind feedback! I’m really glad to hear that you find the color generator useful and enjoyable to use. If you have any suggestions for improvements or new features, please feel free to share.

1 Like

Since you ask… :grinning: When a final colour palette has been decided on and implemented it would be good if that palette (along with the fonts used also if possible?) could be exported as PDF or similar to create a printable style guide that can be given to customers or collaborators with a sample of the colours, their hex code for RGB and CMYK if possible. Creating style guides for projects are a real chore, if it could be an automated export feature that would be fantastic.

Don’t know how complicated this would be, whether possible, but it would also be good if fonts not currently used in the project could be tested out with colours for choosing typefaces as well as colours to use in the design work, see what they may look like with the colour scheme to then install.

I love a tool like this, it doesn’t have all the front end wizz bam that people see, but is an essential real timesaving process in the workflow.

Thank you so much for your great suggestions and support! I agree that an automated export feature for generating style guides would be very useful. It’s definitely possible to implement a function that exports the final color palette as a style guide in PDF.

I’ve already been experimenting with generating font combinations along with the color generator…

The features for the next version have been decided :slight_smile:

1 Like

Superb! It’s great being new to Blocs to see third-party Brics being developed. When you release V1, I’ll be in for getting this. Thanks again.

1 Like