Most bad color choices come from picking five colors you like and hoping they get along. This page does the opposite: one sizing rule that designers have passed around for decades, five ready palettes with hex codes you can copy today, a mood-match table, and four opinions from testing palettes on real screens and paper. The cheat sheet prints on one page, free. The hex codes are ours and generic, with no brand attached. If you want finished colored assets instead of codes, there is a logo pack at the bottom.
How to use this page: read the 60-30-10 section once, then pick a palette from the cheat sheet and copy its five hex codes into your CSS, slide master, or design file. Use the codes in the printed order: background first, accent near the end. Print the sheet with background colors on for your desk or pinboard. The mood table helps you choose between palettes before you commit.
The 60-30-10 rule is public design knowledge with no single owner; interior decorators, web designers, and presentation coaches all teach some version of it. The split: about 60 percent of the surface gets your dominant color, usually the background. About 30 percent gets a secondary color for panels, cards, headers, and furniture. The last 10 percent gets an accent that appears only where you want the eye to land, like buttons, links, or one wall.
Two habits make the rule work. First, decide the dominant color from the room or screen the palette lives in: a dark app needs a dark 60 percent, a printed flyer needs paper-white. Second, spend the accent on one job per project. When the accent shows up in five places, it stops pointing at anything, which is how busy-looking layouts happen even with good colors.
All five palettes follow the same slot order, so they drop into the same five variables: 60 background, 30 support, text, 10 accent, edge. The edge color is for borders, shadows, and footers. Copy the codes in order and the 60-30-10 split is already done for you.
5 palettes, 5 hex codes each. Slot order in every row: background (60), support (30), text, accent (10), edge.
| Palette | Hex codes, in slot order |
|---|---|
| Warm library | #3e2723#795548#d7ccc8#ffb74d#263238 |
| Morning fog | #f2f4f6#d9e2e8#4a5759#7ba0c0#2b3a42 |
| Night market | #0d1117#161b22#e6edf3#ff6b35#38bdf8 |
| Field notes | #f7f5ee#e4e0d0#3a5a40#a68a64#253029 |
| Signal orange | #16161a#242629#dee2e6#ff8906#7f5af0 |
Slots: background carries most of the surface, support separates sections, text goes on backgrounds, accent marks one thing per screen, edge draws borders and shadows. My opinion on all five: they hold up in grayscale printing, which most palettes fail.
Mood matching is judgment, not measurement, so take this table as one person's opinion shaped by watching palettes get used. Match the feeling you want readers or guests to have first, then take the palette family, then adjust the accent.
| Mood you want | Palette family that gets you there |
|---|---|
| Calm and focused | Desaturated neutrals with one muted accent, like the morning fog family. Low saturation reads as quiet; the single accent keeps focus points findable. |
| Energetic, a little loud | Dark base plus one hot accent, like the night market family. Neon on near-black is the loudest combination that still reads as designed rather than messy. |
| Grounded, handmade, cozy | Warm browns with paper cream, like the warm library and field notes families. Earth tones feel worn-in, which is the point. |
| Premium, editorial | Near-black plus cream plus a single rich accent, used sparingly. Premium reads come from restraint: fewer colors, more empty space. |
| Playful | Two or three saturated hues maximum on a light base. More than three and playful tips into chaotic, in my experience. |
Everything above is free and generic: the palettes were generated for this page, the rule is public knowledge, and the hex codes are yours to copy with no attribution. What this page does not include is finished artwork. If you want colored assets already drawn, sized, and licensed, that is the Web3 Logo Mega-Pack. Its contents, quoted from the pack's own listing:
"40 ready-to-use Web3 logos in three styles: 14 flat minimal marks, 13 gradient app-icon badges, 13 neon cyber designs on dark backgrounds."
"Each file is 1024x1024 PNG. The simple geometric shapes cut out cleanly if you need transparent versions, and they upscale to 2-4x for print."
The three logo styles map onto the same color logic as the palettes above: flat minimal marks want a quiet two-color scheme, gradient badges want a light-dark blend, and the neon cyber set wants a dark background with one hot accent. If printable assets are closer to your project, the free printable sticker pages take any of these palettes well.
Web3 Logo Mega-Pack, 40 logos →one-time · 40 PNG files, 1024x1024 · instant download · commercial use, no attribution required