When deciding a page's colors, describing the colors you like in words is surprisingly hard. Even if you say "a calm green," the green in your head and the green Claude picks may not be the same.
At the same time, working out a color combination from scratch yourself is tough. When you're starting from zero, it's hard to know which colors go together.
That's where Coolors, a free site that shows you one color combination after another, comes in handy. Let's look at what it can do, what gets easier when you use it with Claude, and how to get started.
Contents
What it does: every press of the spacebar brings up a 5-color combination
Open Coolors' palette screen and you'll see a combination of 5 colors side by side. Each time you press the spacebar on your keyboard, it switches to a new combination.
If you find a color you like, press the lock icon in that color's column to lock it. Locked colors stay put, and when you press the spacebar, only the remaining colors are replaced with ones that match the locked colors.
You don't need to work out combinations in your head. Press the spacebar and lock only the colors you like, keeping them as you go.
With Claude: hand over colors as codes, not words
Each color in Coolors has a 6-character code starting with "#", like "#3B6FB6". This code works like a name that pins down exactly one color; clicking it opens a detailed view of the color where you can copy the code.
Hand this code to Claude, and the exact color you picked by eye comes across without describing it in words like "a calm green." The color you chose with your own eyes is used on the page as is.
Don't describe colors in words; hand over the codes you picked in Coolors.
Getting started: lock the colors you like and give their codes to Claude
To begin, it's a good idea to keep pressing the spacebar until a color close to the feel of the page you want appears, then lock it. The remaining colors will change to match the one you locked.
Once you have 5 colors, copy their codes, give them to Claude, and work out together which color goes where. For example, the exchange might go like this.
You: I picked colors for my pottery class page in Coolors: #F4EFE6, #D9A77A, #8C5A3C, #4A6B5D, #2E2A26. I want it to feel like even beginners can drop in casually. How do you think I should use them? Claude: Using the brightest, #F4EFE6, as the background and #2E2A26 for the text will make it easy to read. For the sign-up button, the warm #D9A77A looks like a good fit. You: Nice. I'd like to use the green #4A6B5D just a little, for headings.
With codes, mix-ups like "not that brown" are less likely to happen. Split the work: Coolors for picking colors, Claude for deciding where to use them.
Summary
Pick colors in Coolors and hand them to Claude as codes, and the "that's not the color I meant" mix-up goes away. The colors you chose with your own eyes become the page's colors as they are.
This pairing of "pick by eye with a dedicated tool, then talk with Claude about how to use it" also comes up when choosing photos or the look of your lettering. The flow of picking with a tool and handing it to Claude is one you can use again and again.
Next time you decide a page's colors, press the spacebar in Coolors and give Claude the codes of the colors you like.