The brand guide says #1F6FEB. The CSS file has rgb(31, 111, 235). The designer’s Figma inspect panel shows hsl(212, 84%, 52%). Someone asks if they are the same color. The meeting continues.
They might be the same. They might be off by a rounding error that you will not see on a laptop and will see on a product photo. A color converter exists so you stop eyeballing it.
Nicxro’s color tools should convert HEX, RGB, and HSL in both directions, and help you copy the form your code actually wants. This is how to keep a brand color identical across design, CSS, email, and social images.
Why three systems exist
HEX is compact and common in CSS and design tools: #1f6feb. Three or six hex digits. Sometimes eight with alpha: #1f6febcc.
RGB is how screens mix light: rgb(31, 111, 235). Also rgba with alpha 0–1 or 0–255 depending on the era of the snippet you copied.
HSL is closer to how people talk: hue, saturation, lightness. Adjusting lightness to make a hover state is easier in HSL than in HEX.
They can represent the same sRGB color. Converting should not be a creative act. It should be math. Use a converter, not a screenshot eyedropper on a compressed JPEG of the logo.
HEX pitfalls
Case does not matter. #FFF and #ffffff are white. Three-digit HEX expands by doubling: #1F6 is #11FF66, not #1F6000. People shorten wrong.
#1f6feb vs #1F6FEB is the same. Git diffs that only change case are noise. Pick a convention. Lowercase is common in modern CSS.
Alpha in eight-digit HEX is not supported in the oldest browsers. If you need a translucent overlay, know your target. rgba() is clearer for many teams.
Do not copy HEX from a photo of a billboard. Lighting lies. Copy from the brand file.
RGB pitfalls
Spaces and commas: rgb(31,111,235) vs rgb(31 111 235 / 0.8) (modern CSS). A converter that only understands commas still covers most paste jobs.
Values outside 0–255 are invalid. Some tools clamp. Clamping is a change. If you see 270, someone used a bug as a color.
rgba(31, 111, 235, 1) and rgb(31, 111, 235) should match at full opacity. Mixing a 0–255 alpha with a 0–1 alpha is a classic: rgba(0,0,0,50) is not 50% black in CSS. It is invalid or interpreted in surprising ways. CSS alpha is 0–1 in rgba().
HSL pitfalls
Hue wraps at 360. hsl(212, 84%, 52%) and hsl(572, 84%, 52%) can be the same hue. Converters should normalize.
Saturation and lightness are percentages. hsl(212, 0.84, 0.52) might be what a programmer invents and not what CSS wants. CSS wants %.
HSL lightness is not perceived brightness in a simple way. Two colors with the same HSL lightness can feel different. For accessible contrast, do not assume a +10% lightness hover is readable. Check contrast on the actual pair.
hsl and hsla follow the same alpha story as rgb.
The conversion you actually need in CSS
Modern CSS accepts HEX, RGB, HSL, and more (oklch, lab). Teams still standardize.
A practical standard for Nicxro-style sites:
- Store the brand token as HEX in the design doc, because designers paste HEX.
- In CSS, use custom properties:
--color-brand: #1f6feb; - Derive hover in HSL or
color-mixif you can, instead of a second magic HEX that drifted.
When a tool needs RGB for a canvas or an email client that is stuck in 2012, convert from the token. Do not keep a third source of truth.
Emails: many clients are happier with HEX. Test. Some strip rgba and you lose the overlay.
Eyedroppers and the lie of “close enough”
Picking from a PNG of the website can pick antialiased edge pixels, compressed artifacts, or a color that already went through a profile conversion. You will get #1e6ee8 instead of #1f6feb. On a button you might not notice. On a logo next to the real SVG you will.
Convert from the specified value. If you must sample, sample a large flat area from a lossless file in sRGB.
Contrast, not just matching
A brand blue on white may fail WCAG for small text even if it is “correct.” Conversion will not save you. You may need a darker token for text and the bright token for large buttons.
Keep two tokens if you must: --brand and --brand-text. Do not darken by eyeball in HSL until you check a contrast tool. If Nicxro includes one, use it. If not, check elsewhere before you ship text.
A workflow for a new brand color
- Get the official HEX from the brand owner, in writing.
- Convert to RGB and HSL on Nicxro. Save all three in the token doc so nobody converts again by hand.
- Put HEX in CSS variables.
- Generate hover/focus with a documented method (HSL lightness or
color-mixwith black). - Recheck the derived HEX. Store it if the pipeline cannot compute at runtime.
- Use the same HEX in OG images, QR palettes, and charts.
When someone asks “is this the right blue?” paste both HEXes into the converter and compare RGB. If RGB matches, it is the same sRGB color. If not, it is not, even if they look close on one monitor.
Monitors, profiles, and “it looks different on my Mac”
Two HEX-identical colors can look different on two screens. That is not a converter bug. Calibrate if you are a design shop. For a tools site, sRGB HEX is the contract. Do not chase a client’s uncalibrated laptop with a new HEX.
Wide-gamut colors in Figma (Display P3) can look richer than the HEX you export for the web. Confirm the export is sRGB for CSS. Otherwise the “brand color” on the marketing site will look dull next to the Figma frame, and people will “fix” it by picking a new HEX that is wrong for print and email.
Transparency
A brand color at 16% overlay is not a new brand color. It is the same RGB with alpha. Convert HEX to RGB, then add alpha. If you flatten it onto white, you get a new HEX. Flattening onto a photo gives many HEXes. Do not put a flattened-on-white HEX into the brand guide as the primary.
Keep a tiny palette file
Five colors: background, text, brand, success, danger. HEX only, plus notes. Convert when a platform demands RGB. Nicxro is the calculator.
When the palette drifts, diffs of CSS variables should show intentional changes. If every file has a slightly different blue, convert them all back to the official HEX and replace. That cleanup is a better afternoon than arguing about which blue “feels more tech.”
Charts, maps, and “the same blue”
Data viz libraries often want RGB arrays. Maps want HEX. Tailwind wants tokens. Convert once from the brand HEX. If a chart looks slightly off, the library may be applying opacity or a theme filter, not a bad conversion. Check the computed style in DevTools, then convert that computed RGB back to HEX on Nicxro. If it is not the brand HEX, the library changed it.
Print and CMYK, briefly
Brand guides sometimes list CMYK for print and HEX for web. Those are different color models. A converter that only does HEX/RGB/HSL will not magically match a business card. Do not “fix” print by changing the website HEX. Ask a designer for both specs. For Nicxro’s on-screen tools, sRGB HEX is the job.
Matching brand color is a consistency problem. The converter removes the excuse that the formats were different. They were not. Someone rounded, sampled, or guessed. Use the tool, lock the token, and let HSL do the hover if you want a hover. The brand stays one color, written three ways, not three colors that almost agree.