Wide-gamut displays render saturated colors differently; test on average hardware.

Use RGBA/HSLA when layering shadows and glass effects.

Convert to CMYK in print tooling; screen hex is not ink-accurate.

Color Picker

Pick colors and copy them in HEX, RGB, HSL, and other formats. Create beautiful color palettes.

Color Picker

Click on the color wheel or use the sliders to pick a color

Click to pick color

Hue: 0°

Saturation: 100%

Lightness: 50%

Alpha: 100%

Selected Color

Color Formats

Copy the color in your preferred format

HEX

RGB

HSL

RGBA

Color Palette

Click to select

Recent Colors

Quick Actions

All Tools

Tips

• Click on the color wheel to pick colors
• Use sliders for precise color control
• Copy colors in multiple formats
• Access recent colors from history
• Perfect for web design and development

Color picker: accessible palettes and design systems

Choosing colors is more than aesthetics—contrast ratios affect readability for low-vision users, and brand palettes keep marketing cohesive. A picker that outputs HEX, RGB, and HSL speeds handoff between design and code.

Validate contrast with WCAG checkers after picking foreground/background pairs.

Practical tips

Document tokens (primary, surface, danger) instead of one-off hexes.
Test dark mode variants, not only light backgrounds.
Export consistent ramps (50–900) for component libraries.
Remember color-blind simulations for status colors.

Common questions

P3 vs sRGB?: Wide-gamut displays render saturated colors differently; test on average hardware.
Alpha channel?: Use RGBA/HSLA when layering shadows and glass effects.
Print colors?: Convert to CMYK in print tooling; screen hex is not ink-accurate.

Related tools on Toolfex

Toolfex provides free online utilities for individuals and teams. Use these guides alongside each tool’s on-page controls. For privacy and data handling, see our Privacy Policy.