Using Color Pickers and Tools

Choosing effective colors for a website involves more than picking shades you like. Browser DevTools include a built-in color picker that appears when you click any color swatch in the Styles panel — you can switch between hex, RGB, and HSL views and use an eyedropper to sample any pixel on the screen.

Color Palettes and Accessibility Tools

Online tools like Coolors, Adobe Color, and Paletton generate harmonious color schemes based on color theory rules: complementary, analogous, triadic, and split-complementary schemes. The HTML <input type="color"> element renders a native OS color picker that returns a hex value — useful for user-facing color customisation features in web apps.

DevTools color picker — built into Chrome/Firefox/Safari
Coolors.co — palette generator
WebAIM Contrast Checker — accessibility auditing
<input type="color"> — native browser color picker widget

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color Picker</title>
  <style>
    .preview {
      width: 100%; height: 120px;
      border-radius: 8px;
      border: 1px solid #ccc;
      margin: 16px 0;
      transition: background 0.2s;
    }
    label { font-weight: bold; }
    output { font-family: monospace; margin-left: 8px; }
  </style>
</head>
<body>
  <h1>Pick a Background Color</h1>

  <label for="bg">Choose color:
    <input type="color" id="bg" value="#3498db">
    <output id="hex">#3498db</output>
  </label>

  <div class="preview" id="preview"
       style="background:#3498db;"></div>

  <script>
    const picker  = document.getElementById('bg');
    const preview = document.getElementById('preview');
    const hex     = document.getElementById('hex');
    picker.addEventListener('input', e => {
      preview.style.background = e.target.value;
      hex.textContent = e.target.value;
    });
  </script>
</body>
</html>

HTML

Full Editor

Pro Tip

Save your project's color palette as CSS custom properties (variables) at the top of your stylesheet: :root { --primary: #3498db; --accent: #e74c3c; }. Referencing var(--primary) everywhere means a brand color change requires editing just one line.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned