<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Lapnito Development studio</title>
    <description>The latest articles on DEV Community by Lapnito Development studio (@lapnitodevelopment).</description>
    <link>https://dev.to/lapnitodevelopment</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3877182%2F4bc2d686-94d1-4e3c-b558-887cd7d588e3.png</url>
      <title>DEV Community: Lapnito Development studio</title>
      <link>https://dev.to/lapnitodevelopment</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/lapnitodevelopment"/>
    <language>en</language>
    <item>
      <title>I Built a Camera Color Picker That Gives You HEX, RGB, HSL &amp; CMYK Instantly</title>
      <dc:creator>Lapnito Development studio</dc:creator>
      <pubDate>Mon, 13 Apr 2026 18:44:18 +0000</pubDate>
      <link>https://dev.to/lapnitodevelopment/i-built-a-camera-color-picker-that-gives-you-hex-rgb-hsl-cmyk-instantly-161o</link>
      <guid>https://dev.to/lapnitodevelopment/i-built-a-camera-color-picker-that-gives-you-hex-rgb-hsl-cmyk-instantly-161o</guid>
      <description>&lt;p&gt;We built &lt;strong&gt;Color Picker: Camera HEX RGB&lt;/strong&gt; — 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.&lt;/p&gt;

&lt;p&gt;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 &lt;em&gt;is&lt;/em&gt; that exactly?" — that's the itch we wanted to scratch.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Does It Do?
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Core features:&lt;/strong&gt;&lt;/p&gt;

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

&lt;p&gt;No ads, no in-app purchases, works completely offline.&lt;/p&gt;

&lt;h2&gt;
  
  
  How It Works Under the Hood
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;The interesting part is the color space conversions. Going from RGB to HEX is trivial — just base-16 encoding:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;R=255 → FF, G=87 → 57, B=51 → 33 → #FF5733
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Lightness = (max + min) / 2
Saturation = (max - min) / (1 - |2L - 1|)  
Hue = 60° × sector adjustment based on which channel is max
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;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)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  The Accuracy Question
&lt;/h3&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Best results tips:&lt;/strong&gt;&lt;/p&gt;

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

&lt;h2&gt;
  
  
  Why We Built This
&lt;/h2&gt;

&lt;p&gt;As a small studio (&lt;a href="https://lapnito.cz" rel="noopener noreferrer"&gt;lapnito.cz&lt;/a&gt;), 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.&lt;/p&gt;

&lt;p&gt;We wanted something minimal: open, point, copy, done. That's what this is.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Palette Export Feature
&lt;/h2&gt;

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

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;JSON&lt;/strong&gt; — structured data for programmatic use&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;CSS variables&lt;/strong&gt; — paste directly into your stylesheet&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;PNG&lt;/strong&gt; — a visual swatch image for sharing in chat or docs&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This makes the handoff from "I found these colors in the real world" to "here they are in my code" as short as possible.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try It Out
&lt;/h2&gt;

&lt;p&gt;Color Picker is free on both platforms:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Android:&lt;/strong&gt; &lt;a href="https://play.google.com/store/apps/details?id=com.tomas.color_picker" rel="noopener noreferrer"&gt;Color Picker: Camera HEX RGB on Google Play&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;iOS:&lt;/strong&gt; &lt;a href="https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237" rel="noopener noreferrer"&gt;Color Picker Camera: HEX RGB on App Store&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Website:&lt;/strong&gt; &lt;a href="https://lapnito.cz/color-picker" rel="noopener noreferrer"&gt;lapnito.cz/color-picker&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href="https://github.com/Lapnito/color-picker" rel="noopener noreferrer"&gt;Lapnito/color-picker&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Support:&lt;/strong&gt; &lt;a href="https://lapnito.cz/color-picker/support.html" rel="noopener noreferrer"&gt;lapnito.cz/color-picker/support.html&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We'd love to hear your feedback — drop a comment or reach us at &lt;a href="mailto:tom@lapnito.cz"&gt;tom@lapnito.cz&lt;/a&gt;.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Built by &lt;a href="https://lapnito.cz" rel="noopener noreferrer"&gt;Lapnito Development Studio&lt;/a&gt; — lightweight tools &amp;amp; utility apps from Czech Republic.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>android</category>
      <category>mobile</category>
      <category>design</category>
    </item>
  </channel>
</rss>
