Build a Color Picker with CSS and JavaScript in 100 Lines

The Color Conundrum: Why We Need a Better Color Picker

We've all been there - scrolling through endless color palettes, trying to find the perfect shade for our design. But what if we told you there's a better way? With a custom color picker built using CSS and JavaScript, you can simplify your design process and improve your workflow.

Table of Contents

• Creating the Color Picker UI
• Understanding the HSL Color Wheel
• Converting Between Color Formats
• Adding a Preview Swatch and Clipboard Copy
• Bringing it all Together
• Key Takeaways
• FAQ

Creating the Color Picker UI

Let's start with the basics. We'll use HTML and CSS to create the color picker UI. We'll use a simple input element with a type attribute set to color. This will give us a basic color picker that we can customize later.

<!-- Color picker input element -->
<input id="color-picker" type="color" value="#ffffff">

We'll also add some basic styling to make our color picker look more visually appealing.

/* Color picker styles */
#color-picker {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

Understanding the HSL Color Wheel

The HSL (Hue, Saturation, Lightness) color wheel is a more intuitive way of selecting colors compared to the traditional RGB (Red, Green, Blue) model. We'll use the HSL color wheel to power our color picker. The HSL color wheel consists of three components:

• Hue: The actual color (0-360 degrees)
• Saturation: The intensity of the color (0-100%)
• Lightness: The brightness of the color (0-100%)

We'll use these components to generate a color palette that our users can interact with.

Converting Between Color Formats

To make our color picker more versatile, we'll need to convert between different color formats. We'll use JavaScript functions to convert between HSL, RGB, and HEX color formats.

// HSL to RGB conversion function
function hslToRgb(h, s, l) {
  h /= 360;
  s /= 100;
  l /= 100;
  let r, g, b;
  if (s === 0) {
    r = g = b = l; // achromatic
  } else {
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1/6) return p + (q - p) * 6 * t;
      if (t < 1/2) return q;
      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    };
    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }
  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

Adding a Preview Swatch and Clipboard Copy

To make our color picker more user-friendly, we'll add a preview swatch that displays the currently selected color. We'll also add a clipboard copy feature that allows users to copy the selected color to their clipboard.

// Add preview swatch and clipboard copy functionality
const colorPicker = document.getElementById('color-picker');
const previewSwatch = document.getElementById('preview-swatch');

colorPicker.addEventListener('input', (e) => {
  const color = e.target.value;
  previewSwatch.style.backgroundColor = color;
});

// Add clipboard copy functionality
const copyButton = document.getElementById('copy-button');
copyButton.addEventListener('click', () => {
  navigator.clipboard.writeText(colorPicker.value);
});

Bringing it all Together

Now that we've created the individual components of our color picker, let's bring them all together. We'll use JavaScript to tie everything together and create a fully functional color picker.

// Bring everything together
const colorPicker = document.getElementById('color-picker');
const previewSwatch = document.getElementById('preview-swatch');
const copyButton = document.getElementById('copy-button');

// Initialize color picker
colorPicker.value = '#ffffff';

// Add event listeners
colorPicker.addEventListener('input', (e) => {
  const color = e.target.value;
  previewSwatch.style.backgroundColor = color;
});

copyButton.addEventListener('click', () => {
  navigator.clipboard.writeText(colorPicker.value);
});

Key Takeaways

• Use the HSL color wheel for a more intuitive color selection experience
• Convert between different color formats using JavaScript functions
• Add a preview swatch and clipboard copy feature for a more user-friendly experience
• Use CSS to style your color picker and make it visually appealing

FAQ

Q: What is the HSL color wheel?

A: The HSL color wheel is a color model that consists of three components: Hue, Saturation, and Lightness. It's a more intuitive way of selecting colors compared to the traditional RGB model.

Q: How do I convert between different color formats?

A: You can use JavaScript functions to convert between different color formats, such as HSL to RGB or HEX.

Q: How do I add a preview swatch and clipboard copy feature to my color picker?

A: You can use JavaScript to add a preview swatch and clipboard copy feature to your color picker. Simply add an event listener to the color picker input element and update the preview swatch and clipboard copy text accordingly.