Accent Colour

Highlight colour for important interactions.

html

<div class="ac-wrap">
  <label class="ac-row"><input type="checkbox" class="ac-check" style="accent-color:#E8A020;" checked> Accept terms</label>
  <input type="range" class="ac-range" min="0" max="100" value="60" style="accent-color:#E8A020;" aria-label="Volume">
  <button type="button" class="ac-btn" style="background:#E8A020;">Primary action</button>
  <p class="ac-caption">accent-color: #E8A020 &mdash; the browser tints native controls without extra markup</p>
</div>
<style>
.ac-wrap { font: 14px/1.5 system-ui, sans-serif; color: #241430; width: 280px; }
.ac-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ac-check { width: 18px; height: 18px; }
.ac-range { width: 100%; display: block; margin-bottom: 14px; }
.ac-btn { border: none; padding: 10px 16px; border-radius: 8px; color: #241430; font: 700 13px system-ui, sans-serif; cursor: pointer; }
.ac-caption { margin: 4px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[280px]">
  <label class="flex items-center gap-2 mb-3.5"><input type="checkbox" class="w-[18px] h-[18px]" style="accent-color:#E8A020;" checked> Accept terms</label>
  <input type="range" class="w-full block mb-3.5" min="0" max="100" value="60" style="accent-color:#E8A020;" aria-label="Volume">
  <button type="button" class="border-none px-4 py-2.5 rounded-lg text-[#241430] font-bold text-sm" style="background:#E8A020;">Primary action</button>
  <p class="mt-1 text-xs text-[#241430]/80">accent-color: #E8A020 &mdash; the browser tints native controls without extra markup</p>
</div>

react

export function AccentColour({
  accent = "#E8A020",
  checked = true,
  rangeValue = 60,
  label = "Accept terms",
}) {
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", width: 280 }}>
      <label style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
        <input type="checkbox" style={{ accentColor: accent, width: 18, height: 18 }} checked={checked} readOnly /> {label}
      </label>
      <input type="range" min={0} max={100} value={rangeValue} readOnly style={{ accentColor: accent, width: "100%", display: "block", marginBottom: 14 }} aria-label="Volume" />
      <button type="button" style={{ background: accent, border: "none", padding: "10px 16px", borderRadius: 8, color: "#241430", fontWeight: 700, fontSize: 13 }}>
        Primary action
      </button>
      <p style={{ marginTop: 4, fontSize: 12, color: "#241430cc" }}>accent-color: {accent} &mdash; the browser tints native controls without extra markup</p>
    </div>
  );
}