Color Picker Tools — Browser DevTools, VS Code, and Online Pickers

Color picker tools are embedded in browser DevTools, code editors, and available as standalone online utilities. Here’s how to get the most from each one.

Use the Color Picker to convert between HEX, RGB, HSL, and oklch instantly.

Chrome DevTools color picker

The DevTools color picker opens when you click any color value in the Styles panel:

1. Open DevTools (F12)
2. Click the Styles panel
3. Click any color swatch (small colored square next to a color value)

Features:

• Visual picker: click to select hue/saturation/lightness
• Format toggle: click the hex value to cycle through HEX → RGB → HSL → HWB
• Opacity slider: adjust alpha channel
• Eyedropper: click to sample any pixel on screen
• Contrast ratio: shows WCAG compliance against the background
• Color palette: shows Material Design, Custom, Page Colors, CSS Colors tabs

Keyboard shortcut in Styles panel:
Shift+Click on color swatch → cycles through color formats

Firefox DevTools color picker

Similar to Chrome but with a color vision deficiency simulation mode:

1. DevTools → Inspector → Styles panel
2. Click a color swatch
3. Use the accessibility panel to simulate deuteranopia, protanopia, or achromatopsia

VS Code color preview and picker

VS Code shows color swatches inline for recognized color values:

/* A colored dot appears next to these: */
color: #6366f1;
background: rgb(99, 102, 241);
border: 1px solid hsl(239, 84%, 67%);

Clicking the dot opens a color picker with:

• Visual picker
• HEX / RGB / HSL switcher
• Alpha channel

Extensions that add more color tools:

• Color Highlight: highlights ALL color strings (not just CSS)
• Color Info: shows color conversions on hover
• Tailwind CSS IntelliSense: shows Tailwind palette colors inline

The EyeDropper API (browser native)

Sample any color from anywhere on the screen:

// Supported in Chrome 95+, Edge 95+
// Not supported in Firefox or Safari (as of 2026)

async function pickColorFromScreen() {
  if (!window.EyeDropper) {
    alert('EyeDropper not supported in this browser');
    return;
  }
  
  const eyeDropper = new EyeDropper();
  
  try {
    const result = await eyeDropper.open();
    // result.sRGBHex = '#6366f1'
    return result.sRGBHex;
  } catch (err) {
    // User cancelled
    return null;
  }
}

// Build a color picker button:
document.getElementById('pick-color').addEventListener('click', async () => {
  const color = await pickColorFromScreen();
  if (color) {
    document.documentElement.style.setProperty('--accent', color);
  }
});

Online color pickers

For design work:

• coolors.co — palette generation with locking
• paletton.com — complementary and triadic schemes
• color.adobe.com — professional color wheel

For developers:

• The Color Picker on this site — instant HEX/RGB/HSL/oklch conversion
• colornames.org — find the closest named color

System color pickers

// HTML color input (browser's native color picker):
<input type="color" value="#6366f1" id="colorInput">

document.getElementById('colorInput').addEventListener('input', e => {
  document.body.style.setProperty('--accent', e.target.value);
});

The <input type="color"> opens the OS color picker — on macOS this is the full macOS color picker with spectrum, sliders, and eyedropper.

Color format conversion

// HEX to RGB:
function hexToRgb(hex) {
  const clean = hex.replace('#', '');
  return {
    r: parseInt(clean.slice(0, 2), 16),
    g: parseInt(clean.slice(2, 4), 16),
    b: parseInt(clean.slice(4, 6), 16),
  };
}

// RGB to HSL:
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  
  if (max === min) {
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

Related tools

• Color Picker — pick colors and convert formats
• Color Palette Generator — generate color schemes
• HEX, RGB, HSL, oklch Conversion — format conversion guide