DEV Community

Lapnito Development studio
Lapnito Development studio

Posted on

I Built a Camera Color Picker That Gives You HEX, RGB, HSL & CMYK Instantly

#showdev #android #mobile #design

We built Color Picker: Camera HEX RGB — a free, lightweight app that turns your phone camera into a real-time color identification tool. Point, pick, and get instant color codes in HEX, RGB, HSL, or CMYK. Available on both Android and iOS.

If you've ever tried to match a paint color from a wall, grab a HEX code from a physical product, or just wondered "what color is that exactly?" — that's the itch we wanted to scratch.

What Does It Do?

Color Picker uses your phone's camera to identify colors in real time. A precision crosshair lets you select the exact pixel you want, and the app instantly shows the color value in your preferred format. You can also load any photo from your gallery and tap anywhere to extract colors.

Core features:

  • Live camera color picker — real-time crosshair targeting with pixel-level accuracy
  • Photo color extraction — pick colors from any image in your gallery
  • Four color formats — HEX (#FF5733), RGB (255, 87, 51), HSL (11°, 100%, 60%), CMYK (0%, 66%, 80%, 0%)
  • Color library — save individual colors for later use
  • Palette builder — create, organize, and manage color palette collections
  • Export — share palettes as JSON, CSS variables, or PNG images
  • Dark mode with full backup & restore support

No ads, no in-app purchases, works completely offline.

How It Works Under the Hood

The camera preview feeds a continuous stream of pixel data. Each pixel is stored as three 8-bit channels (red, green, blue), giving us values from 0–255. The crosshair maps to a coordinate on the preview frame, and we read the RGB triplet at that exact position.

The interesting part is the color space conversions. Going from RGB to HEX is trivial — just base-16 encoding:

R=255 → FF, G=87 → 57, B=51 → 33 → #FF5733
Enter fullscreen mode Exit fullscreen mode

HSL conversion is more involved. We first normalize RGB to [0, 1], find the min/max channel values, then:

Lightness = (max + min) / 2
Saturation = (max - min) / (1 - |2L - 1|)  
Hue = 60° × sector adjustment based on which channel is max
Enter fullscreen mode Exit fullscreen mode

CMYK converts to the subtractive model used in print. The key (K) channel is 1 - max(R', G', B'), and C/M/Y are derived from that:

K = 1 - max(R/255, G/255, B/255)
C = (1 - R/255 - K) / (1 - K)
M = (1 - G/255 - K) / (1 - K)  
Y = (1 - B/255 - K) / (1 - K)
Enter fullscreen mode Exit fullscreen mode

The Accuracy Question

Camera sensors don't give you raw light data — they apply white balance, auto-exposure, and gamma correction before the pixel reaches your app. This means captured colors are an approximation of reality, not a spectrophotometric measurement.

In practice, for typical use cases (design reference, paint matching, palette building), the results are very close to what you see. For critical color work in print production or brand compliance, you'd still want a hardware colorimeter. But for "I need the hex code of this wall color" or "what's the closest CSS color to this fabric?" — the camera does the job.

Best results tips:

  • Use natural daylight when possible
  • Avoid shadows and reflections on the target surface
  • Hold steady — the crosshair reads a single pixel, so small movements matter
  • Calibrate your screen brightness to a consistent level

Why We Built This

As a small studio (lapnito.cz), we bounce between development and design constantly. We kept needing to grab color references from the physical world — a client's business card, a competitor's packaging, the exact shade of a sunset for a splash screen background. Existing color picker apps were either bloated with features we didn't need, covered in ads, or required permissions they shouldn't.

We wanted something minimal: open, point, copy, done. That's what this is.

The Palette Export Feature

One thing we're particularly happy with is the export system. Once you've built a palette, you can export it as:

  • JSON — structured data for programmatic use
  • CSS variables — paste directly into your stylesheet
  • PNG — a visual swatch image for sharing in chat or docs

This makes the handoff from "I found these colors in the real world" to "here they are in my code" as short as possible.

Try It Out

Color Picker is free on both platforms:

We'd love to hear your feedback — drop a comment or reach us at tom@lapnito.cz.

Built by Lapnito Development Studio — lightweight tools & utility apps from Czech Republic.

Top comments (0)