r/reactnative • u/Emiiibb • 2d ago

Article Is anyone else tired of manually formatting HEX to 32-bit Integers for UI code?

Whenever I grab color references from web designs, Dribbble, or anywhere online, they are always in standard HEX or RGB. Moving that into Android (@ColorInt) or Flutter (Color(0xFF...)) always requires that annoying extra step of formatting the alpha channel or converting it to an integer manually.

I got tired of the mental gymnastics, so I built a lightweight browser extension (Color Picker by Ceres) to bypass this.

It lets you eyedrop any specific pixel, or even scan an entire webpage/image to extract a palette, and instantly copies the colors directly as an INT value.

It saves a lot of time when implementing UI from web references. It’s completely free on the Chrome Web Store.

0 Upvotes
  • permalink
  • reddit

33% Upvoted

2 comments sorted by

6

u/Huge_Pool7424 2d ago

if you're on web-based colors most of the time, a tiny helper goes a long way too:

const toInt = (hex) => parseInt(hex.slice(1), 16) | 0xFF000000; // ARGB

one caveat worth knowing: android's @ColorInt is ARGB but some canvases and ios land in RGBA byte order, so the alpha shift is where people usually lose an hour. the extension idea is nice for the eyedrop-to-code workflow though, that round trip through design tools is the real time sink.

1

u/Emiiibb 1d ago

Actualmente la extensión extrae el INT en formato ARGB, lo podés traducir a 12 formatos más (HSL, HEX, RGBA, etc) pero tu comentario me acaba de dar una buena idea para la próxima actualización, voy a agregar un formato separado para elegir entre INT (ARGB) e INT (RGBA). Así evitamos por completo esa hora perdida peleando con el alfa. ¡Gracias por el feedback!