How to Generate HSB Values from Mobile Photos: Methods, Code, Tips

Published Dec 29, 2025

Learn how to generate HSB values from mobile photos with accurate workflows, code (Swift, JS), and pro tips on lighting, color spaces, and exporting.

How to Generate HSB Values from Mobile Photos: Methods, Code, Tips

Need to generate HSB values from mobile photos quickly and accurately? Whether you are designing a UI, selecting paint for a room, or building a brand palette from a snapshot, having a reliable way to read hue, saturation, and brightness (HSB) from an image on your phone is invaluable. This guide explains what HSB is, how it compares to RGB and HSL, practical capture tips to improve accuracy, step-by-step workflows on iPhone and Android, and code examples in Swift and JavaScript if you want to build your own tool or automate your workflow.

HSB, HSV, HSL, and RGB—What You Need to Know

HSB (Hue, Saturation, Brightness) is functionally equivalent to HSV (Hue, Saturation, Value). Many apps use the terms interchangeably. HSB is often more intuitive than RGB for designers because it separates the “color family” (hue) from intensity (saturation) and lightness (brightness/value).

  • Hue (H): Angle on the color wheel, typically 0–360 degrees (0° red, 120° green, 240° blue).
  • Saturation (S): Color intensity from 0% (gray) to 100% (fully vivid).
  • Brightness/Value (B or V): Luminance from 0% (black) to 100% (full brightness).

HSL (Hue, Saturation, Lightness) is related but not identical to HSB/HSV; its L component behaves differently than B/V. RGB (Red, Green, Blue) is device-oriented and ideal for storage and screens, but less intuitive for picking color relationships.

Model Components Typical Uses Notes
RGB Red, Green, Blue (0–255) Image storage, screens, code Device-dependent; convert for intuitive editing
HSB/HSV Hue (0–360), Sat (0–100%), Bright (0–100%) Design selection, UI theming, palette work Intuitive; same concept under HSV and HSB labels
HSL Hue (0–360), Sat (0–100%), Light (0–100%) CSS, web design, color relationships Lightness differs from Brightness/Value

Before You Sample: Capture for Reliable Color

Even the best sampler can’t fix a poorly captured photo. If you want to generate HSB values from mobile photos that you can trust, optimize your capture:

  • Use neutral, even lighting: Overcast daylight or diffused artificial light reduces color casts. Avoid mixed lighting (e.g., tungsten + daylight).
  • Minimize glare and reflections: Tilt the subject or move the light source to avoid specular highlights that skew brightness and saturation.
  • White balance matters: On iOS and Android, tap to focus/expose and lock AE/AF (auto exposure/focus) if possible to prevent shifts mid-shot.
  • Expose to protect midtones: Overexposure flattens color; underexposure increases noise.
  • Use a neutral reference: A gray card in the frame helps detect casts later.
  • Prefer high-quality files: HEIC/JPEG is fine for speed; RAW/DNG captures more dynamic range if your app supports it.

Good color capture starts with good light. Fixing a cast later is harder than preventing it upfront.

Fast Ways to Generate HSB Values from Mobile Photos

iPhone and iPad workflow

  1. Open a color picker or palette app that supports HSB/HSV readouts.
  2. Load your photo from the library.
  3. Zoom to the area you want to sample and move the loupe over flat, matte regions.
  4. Read the HSB values and copy them (many apps copy as HEX, RGB, and HSB).
  5. Optionally, sample a small region (3×3 or 5×5) and average/median to reduce noise.

Automation tip: You can build an iOS Shortcut that sends the selected photo to a helper script (e.g., in Scriptable or a Web API) that returns a dominant color in HEX, then convert to HSB. This adds repeatability when bulk sampling.

Android workflow

  1. Install a color picker tool that can open images and display HSV/HSB.
  2. Open the photo, zoom in, and sample flat-color areas.
  3. Copy or export the HSB values. Confirm color space (sRGB vs Display P3) if the app offers it.

Browser-based method

  1. Use a web-based color picker that lets you drop an image onto a canvas.
  2. Click to sample pixels; copy HSB/HSV outputs.
  3. If HSB is not provided, copy RGB or HEX and convert using a small script (see code below).

Code Recipes: Swift (iOS) and JavaScript (Web)

If you want full control, the following examples show how to sample pixels and convert to HSB.

Swift: Sample a pixel and convert to HSB

// Swift 5+ (iOS)
import UIKit
import CoreGraphics
import CoreImage

func hsbAtPoint(in image: UIImage, at point: CGPoint) -> (h: CGFloat, s: CGFloat, b: CGFloat)? {
    guard let cgImage = image.cgImage else { return nil }

    // Ensure we're sampling in sRGB 8-bit for consistent math
    let colorSpace = CGColorSpace(name: CGColorSpace.sRGB)!
    let width = cgImage.width
    let height = cgImage.height

    // Clamp point inside bounds
    let x = min(max(Int(point.x), 0), width - 1)
    let y = min(max(Int(point.y), 0), height - 1)

    var pixel: [UInt8] = [0, 0, 0, 0] // RGBA
    let context = CGContext(
        data: &pixel,
        width: 1,
        height: 1,
        bitsPerComponent: 8,
        bytesPerRow: 4,
        space: colorSpace,
        bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue
    )

    guard let ctx = context else { return nil }

    // Translate so the desired pixel lands at (0,0)
    ctx.translateBy(x: CGFloat(-x), y: CGFloat(y - height + 1))
    ctx.draw(cgImage, in: CGRect(x: 0, y: 0, width: width, height: height))

    let r = CGFloat(pixel[0]) / 255.0
    let g = CGFloat(pixel[1]) / 255.0
    let b = CGFloat(pixel[2]) / 255.0

    var h: CGFloat = 0, s: CGFloat = 0, v: CGFloat = 0, a: CGFloat = 0
    UIColor(red: r, green: g, blue: b, alpha: 1.0).getHue(&h, saturation: &s, brightness: &v, alpha: &a)

    // Convert to human-friendly ranges
    return (h: h * 360.0, s: s * 100.0, b: v * 100.0)
}

Tip: If your images are in Display P3, convert to sRGB first using Core Image to avoid gamut surprises before you compute HSB.

JavaScript: Canvas sampling and RGB → HSB conversion

// Draw an image to a canvas and sample a pixel
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d', { willReadFrequently: true });

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = url;
  });
}

function rgbToHsv(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  const d = max - min;
  let h = 0, s = max === 0 ? 0 : d / max, v = max;
  if (d !== 0) {
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), b: Math.round(v * 100) };
}

async function sampleHSB(imageUrl, x, y) {
  const img = await loadImage(imageUrl);
  canvas.width = img.width; canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const data = ctx.getImageData(x, y, 1, 1).data; // [r,g,b,a]
  return rgbToHsv(data[0], data[1], data[2]);
}

To reduce noise, sample a small region and compute the median or average. Median is robust against specular highlights and pixel-level artifacts.

Better Sampling: Average or Median of a Region

Real-world surfaces aren’t perfectly uniform. Instead of sampling a single pixel, compute a statistic over a window (e.g., 5×5):

  • Average (mean): Easy to compute; can be skewed by highlights or shadows.
  • Median: More robust against outliers; preferred for matte surfaces.
// JS: median of a 5x5 window around (x, y)
function medianWindowHSB(ctx, x, y, size = 5) {
  const half = Math.floor(size / 2);
  const hs = [], ss = [], bs = [];
  for (let j = -half; j <= half; j++) {
    for (let i = -half; i <= half; i++) {
      const data = ctx.getImageData(x + i, y + j, 1, 1).data;
      const { h, s, b } = rgbToHsv(data[0], data[1], data[2]);
      hs.push(h); ss.push(s); bs.push(b);
    }
  }
  const m = arr => arr.sort((a,b) => a - b)[Math.floor(arr.length / 2)];
  return { h: m(hs), s: m(ss), b: m(bs) };
}

When precision matters, sample multiple windows and take the median again—that reduces the influence of local variation and lighting gradients.

Color Space and Accuracy Pitfalls

To generate HSB values from mobile photos that remain consistent across tools, consider these technical factors:

  • Color space (sRGB vs Display P3): Many modern phones capture/display in Display P3. If one app assumes sRGB and another uses the embedded profile, HSB outputs may differ. Normalize to sRGB before converting to HSB unless your full pipeline is wide-gamut aware.
  • Gamma and profiles: Respect embedded ICC profiles when reading pixels. Stripping profiles can shift hue/saturation.
  • HDR photos and live images: Tone mapping can cause different values between the live preview and the saved frame. Export a SDR version when sampling if your tool shows HDR highlights.
  • Screen appearance vs numeric values: Trust the numbers over on-screen appearance, as your display brightness and color temperature can deceive.
  • Noise and compression: Low light increases noise; JPEG compression introduces block artifacts. Sample larger windows or denoise first for stable HSB readings.

Exporting and Using HSB Values in Design Tools

Most design tools accept multiple color models. If you capture RGB or HEX on mobile, you can convert to HSB within the app or in your desktop tool.

Tool How to use HSB Notes
Figma / Sketch Enter values in the color picker; switch tabs between HEX/RGB/HSB. Ensure the same color profile as your export target.
Adobe Illustrator / Photoshop Use the Color panel; select HSB and paste numbers. Document color mode and profile can affect appearance.
Procreate Color panel supports HSB; create swatches from HSB or HEX. Import swatches as .swatches or ASE.
CSS / Web Use hsl() or oklch(); convert HSB→RGB→HSL if needed. Modern CSS supports wide gamut via color() with P3.

For team workflows, always share both HSB and HEX (and optionally RGB) to avoid ambiguity across tools.

Troubleshooting: Why Do Values Vary?

  • “HSB vs HSV—why are names different?” They are conceptually the same model with different names for the third component: Brightness vs Value. Minor numeric differences can appear based on conversion algorithm and rounding.
  • “Two apps, two results.” Check for color space handling, sampling window size, rounding to integers, and whether the app averages pixels.
  • “Hue jumps when I move one pixel.” Surfaces have texture; use a 5×5 median or average. Also avoid edges and shadows.
  • “My paint swatch looks different at home.” Light changes color. Measure under the lighting where the color will live, or calibrate with a reference card.

Pro Tips for Consistent HSB Readouts

  • Sample multiple regions and record the median HSB to represent the surface.
  • Normalize to sRGB before conversion to keep cross-app consistency.
  • Document conditions: note lighting type, time of day, and camera settings alongside the captured values.
  • Round responsibly: Keep internal values in floats, round only at presentation to avoid compounding errors.
  • Lock exposure and white balance when capturing a series to avoid drift.

Putting It All Together

To generate HSB values from mobile photos with confidence, pair solid capture practices with a reliable sampling workflow. Keep an eye on color spaces, use windowed sampling to avoid noise, and convert carefully if your tools disagree. If you prefer a streamlined experience on iPhone or iPad, an app like Color Viewfinder can extract colors from photos and present RGB, HEX, HSL, and HSB values, along with flexible palette exports for your design tools.

Promotional banner