Color & Convert Tools
Colour notation is the same information written two ways. A HEX string such as #1D4ED8 is three pairs of base-16 digits, each pair holding one channel in the range 0–255; the RGB form writes those same three numbers in decimal. Converting between them is exact arithmetic with nothing lost in either direction, which is why these two pages are quick utilities rather than image processors. Why both notations survive is a practical matter: HEX is compact and is what design tools hand you, while CSS needs decimal channels the moment you want transparency, because rgba() takes numbers rather than a hex string. Android, Flutter, iOS and most charting libraries each prefer one form or the other, so a colour that starts life as a hex code from a brand guideline usually has to be restated several times before it reaches production. Both tools work entirely in the browser and neither needs a network connection.
Recommended Workflows in Color & Convert Tools
⚡ Turning brand colours into CSS tokens
Collect the HEX values from the brand sheet -> convert each to RGB so translucent variants can be written with rgba() -> define both forms as custom properties so a component can pick whichever it needs.
⚡ Matching a colour you can only see in a screenshot
Sample the exact pixel with the colour picker -> take the HEX it reports -> convert to RGB if the target platform wants decimal channels.
⚡ Checking a colour pair is readable
Convert both foreground and background to RGB -> compute the contrast ratio from those channel values -> adjust the lighter colour until the pair clears 4.5:1 for body text.
How to Choose the Right Tool
| If Your Task Is... | Recommended Tool | Action |
|---|---|---|
| A design file gives you #RRGGBB and the code needs decimal channels | HEX to RGB | Open Tool |
| A colour picker or screenshot tool reports RGB and the stylesheet wants HEX | RGB to HEX | Open Tool |
| You need the colour of a specific pixel in an image or logo | Image Color Picker | Open Tool |
| The colour has to be applied to an image rather than to code | Image Border Adder | Open Tool |
Best Practices & Practical Tips
- ✓Store one canonical form per colour and derive the rest. A palette maintained twice, by hand, in two notations drifts within a few months.
- ✓Use RGB when you need transparency. rgba(29, 78, 216, 0.4) is unambiguous everywhere, while eight-digit hex with an alpha pair is still inconsistently supported outside modern browsers.
- ✓Check contrast rather than trusting your eye. WCAG asks for 4.5:1 between body text and its background, and 3:1 for large or bold text — pairs that look fine on a bright laptop often fail on a phone outdoors.
- ✓Expand three-digit shorthand before comparing values. #abc and #aabbcc are the same colour, and string comparison will tell you they are not.
- ✓Keep hex uppercase or lowercase consistently across a codebase. It changes nothing about the rendered colour and everything about how readable a diff is.
Common Mistakes to Avoid
- ⚠️Dropping the leading # in CSS. Without it the value is not a colour at all, and the browser silently ignores the declaration rather than reporting an error.
- ⚠️Writing RGB channels as percentages when the target expects 0–255. Both notations are legal CSS but they are not interchangeable — rgb(100, 0, 0) is dark red, rgb(100%, 0%, 0%) is bright red.
- ⚠️Assuming a hex code guarantees an identical appearance everywhere. The same sRGB triple renders differently on an uncalibrated monitor, in a wide-gamut display's default mode, and in CMYK print.
- ⚠️Picking a colour off a JPEG and treating it as exact. Lossy compression shifts individual pixels, so sampling one pixel of a flat brand area can be a few values away from the real colour — sample from a PNG or the source file where possible.
Frequently Asked Questions
Are HEX and RGB conversions exact?
Yes, in both directions. Each hex pair is a base-16 representation of one 8-bit channel, so #FF is 255 and #1D is 29 — there is no rounding, no colour profile involved, and no information lost. Converting a colour back and forth any number of times returns exactly the same values.
What does the fourth value in rgba() do?
It sets alpha, the opacity of the colour, from 0 for fully transparent to 1 for fully opaque. It is not part of the colour itself, which is why it has no equivalent in a standard six-digit hex string. Eight-digit hex encodes it as a fourth pair, but the rgba() form is understood more widely and is easier to read at a glance.
What is the difference between #abc and #aabbcc?
Nothing — they are the same colour. Three-digit shorthand duplicates each digit, so #abc expands to #aabbcc. The shorthand only exists for colours where both digits in each channel happen to match, which is why most real palette values cannot be written that way.
How do I work out whether text will be readable on a background?
Compute the contrast ratio from the two colours' relative luminance, which is derived from their RGB channels after removing the sRGB gamma curve. The result runs from 1:1 for identical colours to 21:1 for black on white. WCAG AA asks for at least 4.5:1 for normal body text and 3:1 for text at 18pt or bold 14pt and above.
Is anything sent to a server when I convert a colour?
No. Both conversions are a few lines of arithmetic that run in the page as you type, with no request of any kind. The tools work with the network disconnected, and nothing you enter is logged or transmitted.
Why does my brand colour look different in print?
Because screens emit light and paper reflects it. Screen colour is additive RGB with a backlight behind it; print is subtractive CMYK ink, and the gamut of ink is smaller — saturated blues and bright greens in particular have no exact equivalent. A printer converts your RGB to CMYK using a profile, and for anything brand-critical you should ask them for the CMYK or Pantone values rather than converting yourself.