Color Picker

The built-in Color Picker allows you to extract colors from any element on a webpage, making it easy to maintain consistent color schemes in your projects.

Using the Color Picker

Color Picker Features

Color Formats

The Color Picker supports multiple color formats:

You can switch between formats in the Color Picker interface or in the Settings panel.

Color History

The Color Picker keeps a history of recently picked colors, making it easy to:

• Access recently used colors
• Compare colors from different elements
• Create a palette from multiple selections

Color Palettes

You can save colors to custom palettes for later use:

1. Pick a color using the Color Picker
2. Click the "Add to Palette" button
3. Choose an existing palette or create a new one
4. Access your palettes from the Color Picker interface

Advanced Features

Gradient Detection

The Color Picker can detect and extract gradients from elements:

/* Example gradient */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

When a gradient is detected, you'll have the option to:

• Copy the entire gradient
• Extract individual color stops
• Convert between gradient types (linear, radial, etc.)

Color Accessibility

The Color Picker includes accessibility features to help you create accessible designs:

• Contrast Ratio: See the contrast ratio between text and background colors
• WCAG Compliance: Check if color combinations meet WCAG accessibility guidelines
• Color Blindness Simulation: Preview how colors appear to users with different types of color blindness

Keyboard Shortcuts

Tips and Tricks

• Use the Color Picker to create consistent color schemes across your projects
• Extract colors from popular websites for inspiration
• Create and save color palettes for different projects or clients
• Use the accessibility features to ensure your designs are inclusive