- Home
- Color Tools
Color Tools
Pick the perfect colors for your designs. Convert between HEX, RGB, HSL and CMYK, generate shades and tints, mix two colors, create harmonious palettes and check WCAG contrast for accessible text.
Color Converter
Convert colors between HEX, RGB, HSL, HSV and CMYK.
Color Shades Generator
Generate tints and shades (50–900 scale) from any base color.
Color Mixer
Blend two colors together and get the in-between steps.
Color Palette Generator
Create harmonious color palettes with color theory rules.
Color Contrast Checker
Check WCAG contrast ratio between text and background colors.
Find, convert and test colors
Convert any color between HEX, RGB and HSL, mix two colors, or build a full set of lighter and darker shades for a design system. The palette generator suggests color schemes that work together, and the contrast checker tells you whether text and background colors meet the WCAG accessibility levels, so your pages stay readable for everyone. To grab a color from a photo or a screenshot, use the image color picker in the image tools.
Frequently asked questions
What contrast ratio do I need?
WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text. AAA asks for 7:1 for normal text.
What is the difference between HEX, RGB and HSL?
They describe the same colors in different ways. HEX and RGB set red, green and blue amounts, while HSL uses hue, saturation and lightness, which is easier to adjust by hand.
Can I export a palette?
Yes. Copy each color code with one click and paste it into your design tool or stylesheet.
Building a colour scheme in four steps
- Start from one colour, such as your logo colour. Pick it from an image with the Image Color Picker if you only have a picture.
- Generate a palette with the Color Palette Generator and choose a calm background colour, a secondary colour and one strong accent.
- Create lighter and darker shades of each colour with the Color Shades Generator for hover states, borders and backgrounds.
- Check text contrast for every text and background pair with the Contrast Checker before you publish.
Tip: use the Color Converter to give your printer CMYK values and your developer HEX or RGB codes for the same colours.
