Which color formats are supported?
It converts HEX, HEX8, RGB, RGBA, and HSL and creates a ready-to-use CSS custom property. Four-digit HEX values are expanded like three-digit values.
Color Picker & Converter
Pick opaque or transparent colors, convert web formats, repair contrast, and build exportable palettes.
Workspace
Pick a color
Click or drag anywhere in the field, then fine-tune the hue.
Color values
Edit any channel. Every format stays in sync.
HEX
#4F5FD6HEX8
#4F5FD6FFRGB
rgb(79, 95, 214)RGBA
rgba(79, 95, 214, 1)HSL
hsl(233, 62%, 57%)CSS
--color: #4F5FD6;Contrast checker
Test the selected color as text against a background.
Foreground
#4F5FD6Contrast ratio5.33:1
Good contrast for normal text
#4F5FD6WCAG AANormal textLarge text
WCAG AAANormal textLarge text
Tints and shades
Select a swatch to continue editing it in the picker.
Color harmony
Build related colors from the selected hue, then export a reusable palette.
GuideHow to use
- Click or drag in the large color field, then adjust the hue slider to choose a color visually.
- Fine-tune HEX, HEX8, RGB, RGBA, HSL, opacity, or individual channels; every format updates immediately.
- Check composited text contrast, choose an accessibility target, and use the nearest passing colour when needed.
- Save useful colours for the current session, select tints, shades, or hue harmonies, and export harmony palettes as CSS or JSON.
HelpFrequently asked questions
How is transparency handled in the contrast checker?
The foreground is composited over the selected background at the chosen opacity before the WCAG contrast ratio is calculated.
What does the closest passing colour change?
It keeps the current hue and saturation where possible, then finds the smallest lightness change that reaches your selected contrast target. For transparent colours, the suggestion becomes opaque so its result is predictable.
Does Pick from screen work on every device?
No. Screen sampling is not available on every browser or device. The visual picker and system colour control remain available when it is unsupported.
Can I use the picker with a keyboard?
Yes. Focus the color field and use the arrow keys to adjust saturation and brightness. Hold Shift for larger steps.
Keep working
Related tools
Images & VideoImage Resizer
Resize, fit, crop, or pad images with exact dimensions, scale shortcuts, and safe output limits.
Images & VideoImage Format Converter
Convert PNG, JPEG, WebP, HEIC, or HEIF images into PNG, JPEG, or WebP with live estimates.
Images & VideoSocial Media Image Resizer
Preview, crop, and batch-export profiles, posts, thumbnails, stories, and banners.