TL;DR: Pick color in one space, write down the exact value the design needs, and convert only at the end. Hex, RGB, and a named web color are the same color only when the numbers match. Trust the value you copied, not the way it looked in a compressed screenshot.
Start from the value you must match
Color work on a hub like Masters Tool usually starts from a constraint, not from a mood. A brand guide says #1F4E79. A CSS file already uses rgb(31, 78, 121). A stylesheet wants a six-digit hex and will not accept a nickname. Those are the same dark blue when the channels match, and they are different blues when someone “picks something close” by eye. Begin by writing the canonical value in the form the project already uses. Convert to other forms only when a tool or a file format demands it.
The color tools here include generators and web color references. A reference table is how you check a named color or a standard hex. A generator is how you explore. Do not let an exploration overwrite the brand value. Generate on a scratch note. Commit a value only when you can point to where it was specified or to the contrast decision you made on purpose.
Hex and RGB are notations, not opinions
Six-digit hex is three bytes: red, green, blue, each from 00 to FF. rgb(31, 78, 121) is the same three channels in decimal. Converting between them is exact. It is not a design choice. Three-digit hex is a shorthand in which each digit doubles, so #abc means #aabbcc. Typing a three-digit value into a field that stores six digits without doubling will shift the color. If a converter offers both, read which one it emitted before you paste it into CSS.
Alpha is a fourth channel. An eight-digit hex or an rgba() value that is “almost” the brand blue is not the brand blue on every background. If the project does not use transparency, strip the alpha on purpose and say so. If the project does use it, write the alpha down. A later page that only accepts six-digit hex will drop the transparency and the color will look more solid than you designed. That surprise is a format mismatch, not a monitor defect.
A small workflow that stays reversible
- Capture the source as text from the guide or the existing CSS, not from a photograph of a screen.
- Normalize to one working form, usually six-digit hex or 0–255 RGB, and note which.
- Check contrast against the actual background if the text must be readable. Do this with numbers, not with a glance on a bright phone.
- Convert at the boundary to whatever the file needs, once.
- Paste and verify by reading the characters, then by looking at the rendered UI on the target page.
Step five has two checks because both fail differently. A mistaken character is invisible in a quick glance at a large button and obvious in the stylesheet. A correct hex on the wrong element is obvious on the page and invisible in a diff of a different rule. Look at both.
Why screenshots lie about color
Compression, night shift, phone color management, and a photo of a monitor all move colors. If a stakeholder sends a screenshot and says “match this blue,” ask for the hex or sample the original asset. Sampling a JPEG often yields a value a few units off in each channel, and the next person will sample it again and drift further. The web color table is a better anchor than a compressed thumbnail when the color is supposed to be a known standard.
Generators that spin a palette from one seed are useful for exploration and risky for systems that already have a palette. Take one suggested color at a time into the real layout. A five-color scheme that looked balanced on the generator’s white card can fail on your gray sidebar. The generator did its job. The layout is the test.
Handoff notes that prevent a second conversion
Write the chosen value in the ticket or the README in one canonical form, and mention if alpha matters. “Primary blue #1F4E79, no alpha” is enough. Adding three equivalent notations is fine if a converter produced them and you checked they match. Adding three near matches from memory is how the iOS build and the website diverge. If a converter and a design tool disagree by one unit, pick the specified source and re-convert. Do not average channel numbers. Averaged color is a new color nobody specified.
Keep generator experiments in a separate note from production values. Future you will not remember which hex was a toy. Filenames and headings should say “exploration” or “specified.” The specified list should be short.
Where this sits on the hub
Open the color group from the Masters Tool homepage when you have a value to convert or a table to consult. Come back to the stylesheet, not to another generator, once the characters are copied. The next tool in the hub will not know that this blue was supposed to stay still.
