"That Blue Isn't Right"
Anyone who's done design work has heard this. A client asks for blue. You deliver sky blue. Too light. You try navy. Too dark. They send a compressed JPEG screenshot: "This blue."
Color is impossible to communicate with words alone. That's why color codes exist.
What Are Color Codes?
Color codes represent exact colors using numbers and letters. The most common formats:
HEX (Hexadecimal)
The web standard. Looks like #FF5733 — a hash followed by six characters. The first two represent red, middle two green, last two blue.
RGB
Mixes Red, Green, and Blue values from 0 to 255. For example, rgb(255, 87, 51) is a warm orange-red.
HSL Describes color using Hue (what color), Saturation (how vivid), and Lightness (how bright or dark). More intuitive for adjusting colors — want a darker version? Just lower the lightness.
These formats all describe the same colors, just from different angles.
Using the Color Picker
Open the tool and you can:
- Click the color palette or drag sliders to find your color
- Enter a known code in any format — the tool converts to all others automatically
- Copy the code and paste it into your CSS, design tool, or presentation
No software to install. Open the page, pick a color, copy the code.
Color Pairing Basics
You don't need a design degree to pick colors that work together. A few established methods go a long way.
Complementary Colors
Opposites on the color wheel. They create strong visual contrast — blue and orange, red and green. Great for buttons and call-to-action elements. Use one as the dominant color and the other as an accent; large areas of both complementary colors can feel harsh.
Analogous Colors
Neighbors on the color wheel. Blue, blue-green, and green sit next to each other and feel harmonious together. The result is calm and cohesive but can lack contrast, so use light/dark variations to create hierarchy.
The 60-30-10 Rule
Borrowed from interior design, this ratio works well on screens too:
- 60% dominant color: backgrounds, large areas. Keep it neutral.
- 30% secondary color: cards, sections, supporting areas.
- 10% accent color: buttons, links, highlights.
Following this distribution naturally creates visual balance.
When in doubt, pick one color and pair it with lighter and darker versions of itself. Monochromatic palettes — using shades and tints of a single hue — almost never look bad.
Practical Applications
Presentations
PowerPoint and Google Slides let you set custom theme colors using HEX codes. Pick your colors, copy the codes, paste them in. Stick to 2-3 colors per presentation for a clean look.
CSS
Front-end developers deal with color codes daily. The picker converts between HEX, RGB, and HSL instantly — no need to memorize conversion formulas.
/* These three lines are the same color */
color: #3B82F6;
color: rgb(59, 130, 246);
color: hsl(217, 91%, 60%);
Brand Identity
Consistent brand colors matter. Use the picker to nail down your exact codes, write them down, and use those same values across every piece of collateral — website, social media, business cards, packaging.
Social Media Graphics
Whether you're using Canva or Figma, entering your brand's exact color codes ensures consistency across all your posts.
Tips for Beginners
1. Less is more. The most common beginner mistake is using too many colors. Three to four (including black, white, and gray) is plenty for a clean design.
2. Prioritize readability. Text needs sufficient contrast against its background. Light gray text on white might look "modern" but it's painful to read — and fails accessibility standards.
3. Study what you like. When you see a website or app with appealing colors, open browser dev tools (F12) and inspect the color values. Over time, your eye for color improves.
4. Don't rely on memory. "I think that blue was something like..." — don't do this. Always record and reference exact codes. It prevents your brand from drifting into ten different shades.
Colors on screen and in print differ. If your design will be printed, use CMYK color values or print a test swatch first. What looks vibrant on a monitor may appear duller on paper.
Wrapping Up
Choosing colors might feel like a purely creative act, but there are practical frameworks that make it much more approachable. With a color picker and basic pairing knowledge, you can create cohesive color schemes without a design background. Next time someone says "that blue isn't right," just send them the hex code.