CSS-Only

Color Input

Native color picker input with size variants and consistent styling. Pure CSS enhancement of the HTML5 color input.

Example

<input type="color" class="omni-color-input" value="#3b82f6" aria-label="Choose primary color">
<input type="color" class="omni-color-input" value="#10b981" aria-label="Choose success color">
<input type="color" class="omni-color-input" value="#ef4444" aria-label="Choose danger color">

Sizes

Use data-size to adjust the color picker dimensions. Default size is medium (3rem).

Small

<input type="color" class="omni-color-input" data-size="sm" value="#f59e0b" aria-label="Choose color (small)">

Medium (default)

<input type="color" class="omni-color-input" value="#8b5cf6" aria-label="Choose color (medium)">

Large

<input type="color" class="omni-color-input" data-size="lg" value="#ec4899" aria-label="Choose color (large)">

States

Default

Disabled

<input type="color" class="omni-color-input" value="#06b6d4" disabled aria-label="Choose color (disabled)">

With Label

Use semantic labels for better accessibility and user experience:

<div>
  <label for="brand-color">Brand Color</label>
  <input type="color" id="brand-color" class="omni-color-input" value="#3b82f6">
</div>

Inline Usage

Color inputs work well inline with other form controls and text:

Background: #f3f4f6
Foreground: #111827 
<div style="display: flex; align-items: center; gap: 0.75rem;">
  <span>Background:</span>
  <input type="color" class="omni-color-input" data-size="sm" value="#f3f4f6" aria-label="Background color">
  <span>#f3f4f6</span>
</div>

API Reference

Attribute Values Default Description
data-size sm, md, lg md Input dimensions (sm: 2rem, md: 3rem, lg: 4rem)
value Hex color (#rrggbb) #000000 Initial color value (must be 7-character hex format)
disabled — — Prevents interaction and shows disabled state

Browser Support

The native <input type="color"> is supported in all modern browsers:

  • Chrome/Edge: Full support with custom swatch styling
  • Firefox: Full support with custom swatch styling
  • Safari: Full support (iOS 12.2+, macOS)
  • Fallback: Browsers without support render as text input

Accessibility

  • Always include aria-label or associate with a <label> element
  • Full keyboard navigation support (Tab, Enter, Space, Arrow keys)
  • Focus visible indicators with primary color ring
  • Disabled state prevents interaction and reduces opacity
  • Native color picker dialog is keyboard accessible
  • Color value can be announced by screen readers when changed
  • Respects prefers-reduced-motion for transitions

Best Practices

  • Always use labels: Associate each color input with a descriptive label or aria-label
  • Show hex values: Display the current color value as text for users who need specific hex codes
  • Hex format only: The value attribute must be a 7-character hex color (e.g., #ff0000)
  • Consider contrast: Ensure selected colors meet WCAG contrast requirements for text
  • Provide defaults: Set sensible default values rather than #000000
  • Group related inputs: When selecting multiple colors (e.g., theme colors), group them logically