How to use Color Toolkit
- 1Pick a color visually or enter a HEX, RGB, or HSL value.
- 2Review converted values, contrast information, and palette suggestions.
- 3Copy a color or export the palette in the format your project needs.
Color Toolkit
A comprehensive toolkit for working with colors, creating palettes, and converting between formats.
Color Picker
Pick a color or use the eyedropper tool to sample from your screen
Color Values
View and edit color in different formats to update the selected color
WCAG Contrast Ratios
Sample Text
Fail
0.00:1Selected color on white background
Sample Text
Fail
0.00:1Selected color on black background
WCAG recommends a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
Color Palette
Create, save, and export your color palettes
Current Palette
Add colors to your palette using the color picker
Save Palette
About the Color Toolkit
Choose a color visually or enter a value, then work with synchronized HEX, RGB, and HSL formats. Build a coordinated palette, review accessibility contrast, and copy the result as individual values, CSS, or JSON.
Common uses
- Convert colors between CSS-friendly formats.
- Check foreground and background contrast while designing interfaces.
- Create and export a reusable palette for a site or application.
Color Toolkit questions
Do HEX, RGB, and HSL describe different colors?
They are different notations for color values. The toolkit keeps them synchronized so equivalent values represent the same selected color.
Why should I check color contrast?
Adequate contrast makes text and controls easier to read, particularly for people with low vision or color-vision differences.