Interactive demos showcasing all color picker features with built-in WCAG contrast checking
The simplest form - select colors from a curated accessible palette. All colors are pre-tested for accessibility.
<!-- Basic color picker -->
<input type="text"
data-rsl-color-picker
placeholder="Click to select color">
<!-- With default value -->
<input type="text"
data-rsl-color-picker
data-value="#6E7BFF"
placeholder="Click to change color">Choose from multiple pre-designed palettes for different use cases - semantic colors for UI, grayscale for text, or vibrant rainbow for creative projects.
<!-- Semantic palette (success, warning, error, info) -->
<input type="text"
data-rsl-color-picker
data-palette="semantic"
placeholder="UI colors">
<!-- Grayscale palette -->
<input type="text"
data-rsl-color-picker
data-palette="grayscale"
placeholder="Neutral tones">
<!-- Rainbow palette -->
<input type="text"
data-rsl-color-picker
data-palette="rainbow"
placeholder="Vibrant colors">
<!-- Minimal palette -->
<input type="text"
data-rsl-color-picker
data-palette="minimal"
placeholder="Essential colors">
<!-- Available palettes: default, semantic, grayscale, rainbow, minimal -->Need precise color control? Custom mode provides intuitive HSL sliders for creating any color. Recent colors are automatically saved.
<!-- Custom mode with HSL sliders -->
<input type="text"
data-rsl-color-picker
data-mode="custom"
placeholder="Use HSL sliders">
<!-- With recent colors (saved to localStorage) -->
<input type="text"
data-rsl-color-picker
data-mode="custom"
data-show-recent="true"
placeholder="Recently used colors saved">Enforce accessibility compliance! Constrained mode only allows colors that meet your specified WCAG contrast ratio against a background color.
<!-- WCAG AA (4.5:1) against white -->
<input type="text"
data-rsl-color-picker
data-mode="constrained"
data-against="#ffffff"
data-min-ratio="4.5"
placeholder="4.5:1 contrast min">
<!-- WCAG AAA (7:1) against dark background -->
<input type="text"
data-rsl-color-picker
data-mode="constrained"
data-against="#1a1a1a"
data-min-ratio="7"
placeholder="7:1 contrast (AAA)">
<!-- Common ratios:
- 3:1 - Large text (AA)
- 4.5:1 - Normal text (AA), Large text (AAA)
- 7:1 - Normal text (AAA)
-->Every color selection includes real-time WCAG contrast ratio feedback. See instantly whether your color choices meet accessibility standards.
<!-- Show contrast ratio in picker -->
<input type="text"
data-rsl-color-picker
data-show-contrast="true"
data-against="#ffffff"
placeholder="Check contrast ratio">
<!-- JavaScript API for contrast checking -->
<script>
// Get contrast ratio between two colors
const ratio = RSL.ColorPicker.getContrastRatio('#333333', '#ffffff');
console.log(ratio); // 12.63
// Get WCAG status
const status = RSL.ColorPicker.getWCAGStatus(ratio);
console.log(status);
// { aa: true, aaLarge: true, aaa: true, aaaLarge: true }
// Get smart suggestion for accessible alternative
const suggestion = RSL.ColorPicker.suggestAccessibleColor('#ff6b6b', '#ffffff', 4.5);
console.log(suggestion); // "#c92020" (darker red that passes AA)
</script>Selected a color that doesn't meet contrast requirements? The picker automatically suggests the closest accessible alternative that maintains your color choice's character.
How it works: When you select a color that fails WCAG contrast requirements, the picker analyzes the color's hue and saturation, then adjusts only the lightness to find the closest accessible variant.
// Get accessible alternative for any color
// Parameters: color, againstColor, targetRatio
// Light pink (#ffc0cb) fails 4.5:1 against white
const suggestion = RSL.ColorPicker.suggestAccessibleColor(
'#ffc0cb', // Original color
'#ffffff', // Background to check against
4.5 // Target ratio (WCAG AA)
);
console.log(suggestion); // "#8f6c72" - Accessible alternative
// For dark backgrounds, it will suggest lighter versions
const darkSuggestion = RSL.ColorPicker.suggestAccessibleColor(
'#333333', // Dark gray
'#1a1a1a', // Dark background
4.5 // Target ratio
);
console.log(darkSuggestion); // "#9e9e9e" - Lighter versionGet color values in the format you need - HEX, RGB, or HSL. Perfect for design systems and CSS variable integration.
<!-- HEX format (default) -->
<input type="text" data-rsl-color-picker data-format="hex">
<!-- Output: #ff5722 -->
<!-- RGB format -->
<input type="text" data-rsl-color-picker data-format="rgb">
<!-- Output: rgb(255, 87, 34) -->
<!-- HSL format -->
<input type="text" data-rsl-color-picker data-format="hsl">
<!-- Output: hsl(14, 100%, 57%) -->Full keyboard support for accessibility! Navigate the color grid with arrow keys, select with Enter, and close with Escape.
<!-- Default: stays open to review contrast info -->
<input type="text"
data-rsl-color-picker
placeholder="Tab here, Enter to open">
<!-- Close immediately on selection -->
<input type="text"
data-rsl-color-picker
data-close-on-select="true"
placeholder="Closes immediately on Enter">
<!-- The color picker automatically handles:
- ARIA roles (dialog, listbox, option)
- Keyboard navigation (arrows, Enter, Escape)
- Focus trapping within the picker
- Screen reader announcements
- Focus management on open/close
- Roving tabindex for swatches
-->A practical example showing color picker in a brand settings form with contrast validation.
<form id="brand-settings">
<!-- Primary color with contrast checking -->
<input type="text"
id="brand-primary"
data-rsl-color-picker
data-show-contrast="true"
data-against="#ffffff"
data-value="#6E7BFF">
<!-- Text color must be accessible -->
<input type="text"
id="brand-text"
data-rsl-color-picker
data-mode="constrained"
data-against="#ffffff"
data-min-ratio="4.5"
data-value="#333333">
</form>
<script>
// Listen for color changes
document.getElementById('brand-primary').addEventListener('rsl-color-change', (e) => {
// Update CSS variable
document.documentElement.style.setProperty('--brand-primary', e.detail.value);
});
</script>Control the color picker programmatically using the JavaScript API.
// Open the picker
RSL.ColorPicker.open('#demo-api');
// Close the picker
RSL.ColorPicker.close('#demo-api');
// Set a color programmatically
RSL.ColorPicker.setValue('#demo-api', '#e53935');
// Get the current value
const value = RSL.ColorPicker.getValue('#demo-api');
console.log(value); // "#e53935"
// Clear selection
RSL.ColorPicker.clear('#demo-api');
// Listen for changes
document.getElementById('demo-api').addEventListener('rsl-color-change', (e) => {
console.log('Selected:', e.detail.value);
console.log('Name:', e.detail.name); // e.g., "Deep Orange"
});
// WCAG Contrast Utilities
const ratio = RSL.ColorPicker.getContrastRatio('#333', '#fff');
const status = RSL.ColorPicker.getWCAGStatus(ratio);
const suggestion = RSL.ColorPicker.suggestAccessibleColor('#ffc0cb', '#fff', 4.5);