javascript 58 lines · 9 steps

Building a two-way color picker in JS

Convert between hex and RGB, then wire both representations to stay in sync as the user edits either one.

Explained by highlit

Intermediate bitwise dom-events data-conversion state-sync validation

1function hexToRgb(hex) {
const normalized = hex.replace(/^#/, '');
const full = normalized.length === 3
  ? normalized.split('').map((c) => c + c).join('')
  : normalized;
6 
if (!/^[0-9a-f]{6}$/i.test(full)) {
  throw new Error(`Invalid hex color: ${hex}`);
}
10 
const int = parseInt(full, 16);
return {
  r: (int >> 16) & 255,
  g: (int >> 8) & 255,
  b: int & 255,
};
17}
18 
19function rgbToHex({ r, g, b }) {
const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
const toHex = (n) => clamp(n).toString(16).padStart(2, '0');
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
23}
24 
25function initColorPicker(root) {
const swatch = root.querySelector('[data-swatch]');
const hexInput = root.querySelector('[data-hex]');
const channels = ['r', 'g', 'b'].map((key) => ({
  key,
  el: root.querySelector(`[data-channel="${key}"]`),
}));
32 
const render = (rgb) => {
  swatch.style.backgroundColor = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
  hexInput.value = rgbToHex(rgb);
  channels.forEach(({ key, el }) => { el.value = rgb[key]; });
};
38 
channels.forEach(({ el }) => {
  el.addEventListener('input', () => {
    const rgb = channels.reduce(
      (acc, { key, el }) => ({ ...acc, [key]: Number(el.value) }),
      {},
    );
    render(rgb);
  });
});
48 
hexInput.addEventListener('change', () => {
  try {
    render(hexToRgb(hexInput.value));
  } catch {
    hexInput.classList.add('invalid');
  }
});
56 
render(hexToRgb(hexInput.value || '#3b82f6'));
58}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Packing RGB into a single integer lets bit shifts and masks pull each channel back out cleanly.
2A single render function fed by conversions keeps multiple UI representations of one value in sync.
3Validating and clamping at the conversion boundary keeps malformed input from corrupting the shared state.

Related explainers

php

<?php
 
namespace App\Services\Checkout;

Validating coupons with Laravel's Pipeline

pipeline chain of responsibility transactions

Intermediate 7 steps

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

php

<?php
 
namespace App\Services;

How a password strength validator works in PHP

validation regular-expressions data-driven

Intermediate 8 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

rust

use chrono::{Duration, NaiveDate};
 
#[derive(Debug)]
pub struct DateRange {

Parsing and iterating date ranges in Rust

error-handling iterators parsing

Intermediate 7 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);