Loading…

About Online Color Picker & Converter

Drop an image, paste a color or use the wheel to grab pixel-perfect colors. The tool runs a rich client-side analysis: it normalizes your HEX, computes RGB/HSL/HSV/CMYK, converts to XYZ/LAB/LCH, calculates luminance and WCAG contrast, and generates harmonious palettes. You can then copy any format as a CSS-ready token or use the harmonies to build a cohesive design system.

What This Color Picker Can Do

  • Sample colors from images* or start from a precise color wheel or HEX/RGB input
  • Rich conversions: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
  • Built-in WCAG contrast checker against #000000 and #FFFFFF using relative luminance
  • Web-safe and shorthand HEX suggestions when applicable
  • Color harmonies: complement, triadic, tetradic, analogous, monochrome (computed via hue rotation)
  • Luminance and perceived brightness preview to anticipate contrast issues
  • Approximate Pantone-like matching based on closest RGB distance (with cached dataset)
  • Analysis runs client-side; only minimal data is used when optional Pantone lookup is enabled

🔧 How to Use the Color Picker for color-picker

1

1. Choose or pick a base color

Paste a HEX value, type RGB/HSL, or use the picker to grab a color from an image or the wheel. The tool normalizes it to a safe HEX value internally.

2

2. Fine-tune hue and lightness

Adjust hue, saturation and lightness until the swatch looks right. A large preview shows the color on light and dark surfaces for context.

3

3. Read and copy the formats you need

Copy HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB and LCH in one click. Use them for CSS variables, design tokens or handoff notes.

4

4. Check WCAG contrast

See contrast ratios versus #000000 and #FFFFFF based on sRGB luminance. Use the results to quickly decide if a color works for body text, large titles or UI elements.

5

5. Generate harmonies & build a palette

Explore complementary, triadic, tetradic, analogous and monochrome colors generated via hue rotation. Add your favorites to a palette/history and export them as tokens.

Technical Details

Input Handling & Normalization

The tool accepts hexadecimal color codes and converts them into a normalized 6-digit HEX as the internal reference.

AspectBehaviorNotes
HEX normalization3-digit and 6-digit HEX, optional leading #Short HEX (e.g. #0f8) is expanded to #00ff88; non-hex characters are stripped.
HEX8 supportRGBA via #RRGGBBAAAlpha channel is converted to 0–255 and appended as the 4th byte.
Web-safe suggestionSnap to nearest 51-step per channelValues are rounded to the nearest multiple of 51 (0, 51, 102, 153, 204, 255).
Shorthand HEX suggestionOnly when compressibleShown when each pair of HEX digits is repeated (e.g. #112233 → #123).

Color Spaces & Conversions

All computations are based on sRGB with a D65 reference white.

SpaceComputationUsage
RGBFrom normalized HEX (0–255 per channel)Base representation for conversions.
HSL / HSVStandard cylindrical transforms from sRGBUsed for intuitive edits and harmony calculations.
CMYKDevice-independent approximationComputed as 1−max(R,G,B) with 0–100% components; not tied to ICC profiles.
XYZLinearized sRGB → XYZ using D65 matrixIntermediate space for LAB/LCH and deeper analysis.
LABCIE L*a*b* from XYZPerceptually more uniform metric space.
LCHCIE L*C*h° from LABUseful for hue/chroma/lightness adjustments and perceptual palette design.

Luminance & WCAG Contrast

Contrast is computed using the standard WCAG relative luminance formula.

AspectDetailsNotes
Relative luminanceComputed from linearized sRGB (Y component)Uses coefficients 0.2126R + 0.7152G + 0.0722B.
Contrast ratio(L1 + 0.05) / (L2 + 0.05)The tool reports contrast vs #000000 and #FFFFFF.
WCAG thresholdsAA/AAA for normal and large textTypical thresholds: 4.5:1 (AA normal), 3:1 (AA large), 7:1 (AAA normal), 4.5:1 (AAA large).

Harmonies & Derived Colors

Harmonies are generated as simple hue rotations in HSL, preserving saturation and lightness.

HarmonyRuleExample
Complement+180° hueOpposite point on the color wheel.
Triadic±120° hueThree evenly spaced colors.
Tetradic+90°, +180°, +270° hueFour colors forming a rectangle on the wheel.
Analogous−30° / +30° hueNeighbors around the base color.
MonochromeLighten/darken in LBrighter and darker versions of the same hue.

Pantone-Like Matching (Approximate)

When the Pantone dataset is available, the tool computes a closest match in RGB space.

AspectBehaviorNotes
Dataset loadingCached + async loading via getPantoneColors / getPantoneColorsCachedUI can show a match instantly when cache is warm, or after a short async load.
Match metricSquared Euclidean distance on RGB (0–255)Fast, simple approximation; not a perceptual ΔE* metric.
OutputPantone-like ID and nameDisplayed as guidance only; not an official Pantone mapping.

Performance & Privacy

Conversions, luminance, contrast and harmonies are computed entirely client-side. Pantone lookup may consult a local or remote dataset depending on configuration, but raw colors remain simple HEX strings unless you explicitly share or export them.

Popular Use Cases

UI/UX & Front-End

  • Create accessible foreground/background pairs for buttons, links and text.
  • Export CSS variables and design tokens directly from chosen colors.
  • Check contrast for light/dark modes before implementing a theme switcher.
/* CSS color tokens */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

Branding & Visual Identity

  • Derive a primary/secondary/accents palette from a single hero color.
  • Explore complementary or triadic options for a logo or product line.
  • Get approximate Pantone-like naming before preparing a brand guideline.

Data Visualization & Dashboards

  • Define series colors that stay distinguishable on both light and dark backgrounds.
  • Use LAB/LCH to design palettes with controlled perceptual steps.
  • Quickly check whether chart colors meet contrast expectations in legend and labels.

❓ Frequently Asked Questions

What’s the difference between HEX, RGB, HSL and HSV?

HEX is just a compact way of writing RGB values in base 16. RGB describes the red/green/blue components in sRGB. HSL and HSV are more intuitive cylindrical models: H is hue on the color wheel, S is saturation, and L/V controls brightness or lightness.

Why do CMYK values look approximate?

Real CMYK output depends on printer profiles, ink, paper and calibration. This tool shows a device-independent approximation that is useful for early design decisions, but final print work should be checked with your print provider’s ICC profiles.

What are LAB and LCH useful for?

LAB and LCH are more perceptually uniform than raw RGB. Equal numeric steps in L or C tend to look more consistent to the eye, which makes them great for generating tints, shades and balanced palettes or for measuring visual distance between colors.

How is contrast calculated?

We compute relative luminance from sRGB using the WCAG formula, then derive the contrast ratio (L1 + 0.05) / (L2 + 0.05). The result is compared against common thresholds such as 4.5:1 (AA normal text) and 7:1 (AAA normal text).

Are Pantone names exact?

No. Any Pantone-like label is an approximate nearest-neighbor match in RGB space and is provided for guidance only. For production-critical work, always validate with official Pantone libraries and tools.

Do you store my images or colors?

Color computations (formats, contrast, harmonies) are performed client-side. Depending on configuration, image uploads and Pantone datasets may involve a server, but the tool is designed for transient processing, not long-term storage. For highly confidential assets, prefer local/offline tools.

Pro Tips

Best Practice

Always preview colors on both light and dark surfaces; perceived saturation and contrast can change dramatically with context.

Best Practice

Use LAB or LCH when generating tints and shades so that brightness changes feel more uniform to human eyes.

Best Practice

Check AA/AAA contrast for all interactive states (hover, active, disabled), not just the default button color.

Best Practice

Export CSS variables or design tokens from the formats tab to keep colors consistent across your components.

Best Practice

When sampling from images, average over a small area instead of a single pixel to reduce noise from compression and anti-aliasing.

Additional Resources

WCAG 2.2 – Contrast (Minimum)
Documentation
CSS Color Module Level 4
Documentation
MDN – <color> Values
Reference
CIE Colorimetry (XYZ/LAB)
Documentation

Other Tools