Ghola is a palette generator aimed at developers who need some reasonable colors for building an app or prototyping. Ghola works great if you don't have a designer to choose the right shades, but you want something reasonable. Ghola is built using Web Components and no framework.
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:
You can also link split-complement
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
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
- 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.
- 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.
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.
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.