How to describe colors and proportions in an AI design prompt
Color codes and roles give a clearer direction than “make it feel purple.” Start with one line from 631 color, then explain which colors belong to the background, structure, and buttons.
What does Copy for AI copy?
- 60%
#EEE7F3 - 30%
#5F4B30 - 10%
#4BCE97
Open this palette on the main page and select “Copy for AI” below “Copy CSS.” It copies this string:
#EEE7F3 60%, #5F4B30 30%, #4BCE97 10%The order is base, secondary, then accent. If you rotate the colors in the preview, the copied string follows the current order. First decide which color you want as the broad foundation.
A prompt you can use for a website
Design a portfolio landing page using this palette.
#EEE7F3 60%, #5F4B30 30%, #4BCE97 10%
- #EEE7F3: overall background and broad open areas
- #5F4B30: main content areas and headings
- #4BCE97: primary buttons and selected states
- Interpret the proportions as approximate visual weight across the page.
- Do not divide the screen into three columns at 60:30:10 widths.
- Prioritize readable contrast for body text and button labels.
- Use black or white for text where needed.
- Keep the same color roles on mobile.Replace “portfolio landing page” with the screen you actually need. Add one primary action, such as contact, sign up, or purchase.
Why include roles as well as HEX codes?
Given the same three colors, an AI might use the darkest one across the background or reserve the lightest for cards. Naming background, structure, and accent roles after each code makes your intention more specific.
A bare “60%” might also be interpreted as screen width. Explain that you mean visual weight, and say whether you are designing a physical space or a webpage. The 60:30:10 guide explains the ratio itself.
How is this different from Copy CSS?
| Action | What you get | When to use it |
|---|---|---|
| Copy for AI | Three HEX codes with 60%, 30%, and 10% | Describing a palette in a prompt |
| Copy CSS | Color variables and text colors for each surface | Applying colors directly in web code |
| Click a color | One HEX code | Taking a single color into an editor or prompt |
CSS variables define colors. Copying them alone does not distribute color areas at 60:30:10; you still need to assign those variables to actual elements in your styles.
What if the result looks different?
Describe the element to change rather than saying “the colors look wrong.” For example: “Keep #EEE7F3 as the background, and use the mint only on the contact button.”
Instead of changing several colors and the layout together, check the foundation, then the structure, then the accent. Generated images can also vary with lighting and texture. If exact HEX values matter for a website, inspect the final CSS values.
The mood descriptions in 631 color are editorial impressions. Judge the result with your actual typography, images, and content in place.
Start with another combination
If you have not chosen a palette, compare the six website color directions first. In Combinations, try searching for words such as “natural,” “dark,” or “warm.”
If this example fits, open Violet Picnic in the tool and copy it straight into your prompt.