How to create a color reference for a freelancer

A client sends a logo, a screenshot, and a few notes about the colors they want. You need to turn that into something clear enough to use in a design and hand back without guesswork.

Make a short color reference with a sample, its color values, and the job it should do. TooLab's Color Picker can sample a color from your screen and show values such as HEX, RGB, and HSL.

Create the color reference

1. Open the Color Picker on a computer in Chrome or Edge. The screen-picking feature works in those browsers; other browsers may offer a reduced version or no screen picking.
2. Gather the material you are using as a source, such as a client-approved logo, a design mockup, or a brand guide. If several files disagree, ask the client which one takes priority before treating any color as final.
3. Use the Color Picker's screen-picking action and select a flat area of the color you need. Avoid text edges, shadows, gradients, and tiny details, because nearby pixels can have different values.
4. Record the displayed HEX and RGB values, along with a short name and where the color appears. For example: Primary green, #2F6B5A, RGB 47, 107, 90, logo and main buttons.
5. Repeat for each distinct color, then put the entries into a simple document or spreadsheet. Include the source file or screen, the date, and any note about whether the value is approved or only a visual estimate.

Do not rely on color alone to identify entries. Add a plain-language label such as “background,” “body text,” or “highlight.” That makes the reference easier to discuss in an email and helps avoid mixing up two similar swatches.

Choose what to include

Brand colors

Start with colors the client has explicitly approved, such as a logo color or a value listed in a brand guide. Keep the original value if one is provided, and label a sampled value as a screen estimate rather than silently replacing the specification. A screenshot can display a color differently from the original design file.

Functional colors

List colors by purpose, not only by appearance. Common roles include page background, primary text, links, buttons, borders, and warnings. If a color is used for more than one purpose, note that. A dark green for a button may need a different text color on top of it than the same green used as a small decorative accent.

Variations and states

Include a lighter or darker variation only when the project needs one, such as a hover state or a subtle background tint. Label it as a variation and keep it separate from the approved base color. Do not invent extra shades and present them as part of the client's brand palette.

Values for different workflows

HEX values are convenient for web design and are easy to paste into many design tools. RGB describes red, green, and blue channel values, and is useful when a workflow asks for those numbers. HSL describes hue, saturation, and lightness, which can make it easier to discuss whether a color should look more muted or brighter. These values describe the same sampled screen color in different formats, not separate colors.

Make samples you can trust

Pick from a broad, flat part of a color rather than an edge. Text, curved shapes, and small icons often have blended pixels around their outlines. Those pixels are called anti-aliased pixels: they soften an edge by mixing its color with the background. Sampling one can give you a value that does not match the solid fill.

Be cautious with photos, compressed images, and gradients. A photograph contains many nearby shades, and compression can change individual pixels. A gradient is meant to change across its area, so record where you sampled it if you need a particular point. For a logo or other artwork, ask for the original file or its approved color values when precision matters.

A color picker reads what is displayed on the screen. It cannot recover an original design value from a screenshot or account for every display setting, color profile, or visual adjustment on your computer. Night mode, HDR, and monitor calibration can affect how a color looks to you, even when its numeric value is unchanged. Treat a sampled value as a useful reference, not proof that two screens or printed pages will look identical.

Prepare the handoff

Keep the reference brief enough that a client can check it quickly. One entry per color is usually enough. For each entry, include the label, HEX value, RGB value, intended use, and source. Add HSL if it helps the project or the client asks for it. A small swatch next to each entry can help, but keep the written values so the reference is usable without judging colors by eye.

• Approved: The client supplied or confirmed this value.
• Sampled: You picked it from an on-screen source and it still needs confirmation.
• Proposed: You selected it as part of the design and are asking the client to review it.

When you send the reference, mention any differences between the source materials and ask the client to confirm the final values before you apply them across the project. That small check can prevent a color sampled from an old screenshot from becoming the standard for new work.