Ghola

Palette Generator

Ghola allows you to design a palette in two steps: 1) choose one or more base colors, and 2) see different shades of those colors, from very dark to very light. The idea is that for any given base color, you will want lighter and darker shades for use. Ghola provides three darker and three lighter shades, attempting to make sure that the darkest can be used instead of black and the lightest can be used instead of white.

By default, Ghola shows one color, and this is called the primary color. This should be whatever is the most important color to what you are doing. Maybe it's your favorite color, or the so-called “brand” color. Use the color picker to select this color, and you'll see three darker and three lighter shades, like so:

You can preview them on some text to see how they look together and examine the contrast ratios of various combinations. After that, you can add as many colors as you like and they will work the same way.

Deriving from the Primary Color

Ghola has the concept of color deriving or linking: you can add the complement of the primary color and Ghola will compute that. The complement is the color opposite the chosen one on the color wheel. This is the complement of the color above:   (). When you change your primary color, the linked complement will change to match.

You can also link split-complement (   ()   () ), analogous (   ()   () ), and triads (   ()   () ) of the primary color. They can all be present and will update when you change the primary color. This can allow you to find a color combination that works well. Click here to randomize my color and see how it works.

Unlinked Colors

Of course, you can add unlinked colors that you can change as needed, and you can even unlink linked colors. If you like the complement, but want to change the primary, unlink the complement.

The color also has a system-designated name that you keep or change. Mine is (note that this value changes if you clicked “Randomize my Color” :).

To change it, modify the value in the text field. To restore the system-generated name, delete your custom name from the text field. The name is relevant because you can export your palette to use in your app, and the names are used for that export.

Sharing Your Palette

You can share your palette by downloading it as CSS, JavaScript, or CSV. Ghola supports the following formats:

• CSS will export your palette as CSS variables.
• Melange CSS Variables will export CSS variables that can be used with my CSS library, MelangeCSS. Melange uses particular names and the output will let you know what names are not supported.
• Melange Config will export JavaScript configuration that can be used to build a custom version of MelangeCSS.
• Tailwind will export JavaScript configuration to be used with TailwindCSS.
• CSV is the Internet's best and most scaleable format and is enterprise ready for any need.

You can also share the current URL of your palette. You will notice that the URL changes as you modify your palette. You can save that URL and come back to your exact same palette or share it with others. Using the Back button should work if you make a mistake.

Box Shadow Generator

Ghola allows you to create five box shadows, each “higher” than the previous. This should give you a few options for creating depth in your design without having to make a lot of decisions. You can also create inset box-shadows to give inner depth.

Ghola assumes you are using a box shadow for depth, so you can only use a grayscale shadow. You can control the spread, mblur, and offset of a base shadow, assumed to be the “lowest” in your app. Four “higher” shadows will be generated. You can change the gradient at which the “height” increases (or decreases, for inset shadows).

How is this built?

Ghola is built without any framework. It uses the Web Components API built into modern browsers. It makes heavy use of custom elements and you can view the source of this page or others to see. I wrote an extensive blog post on how it works if you want to check it out. It's kinda long, but tells you everything you need to know. The source code is also available for you to examine. You can also play around with the individual components directly.

The approach I took was to wrap regular elements in custom elements, and have those custom elements bestow behavior on the wrapped elements. While the app will generate HTML and modify the DOM, it does not render everything. The HTML file you downloaded when you first got here was from the server.

I can say that it was very nice to have very few dependencies during development and pretty much none to run the actual app! I can be pretty confident that if I don't touch this for a year, it'll still work great and I can still add features to it then.

This isn't to say that Web Components is an amazing API free of trade-offs or complexity. There were some bumps along the way, and any overview you have read about Web Components is probably oversimplifying what is required to actually use them. But, it was still fun, and I liked it! I feel like I can continue to meet my personal goal of never using React or the like on purpose.

What is a “ghola”?

A ghola is an artificial person from the Dune series of books. They are constructed from the cells of a real person and—mostly—don't have any memories. They are sort of like a clone.

This palette generator is like a very basic clone of a designer who has no experience or memories. It can produce some colors for you, but it's not the same as the real thing. The name seemed apt.