Pick a color to get HEX, RGB and HSL values, see five harmony palettes, blend two colors, check WCAG contrast and build CSS gradients.
Choose a color with the picker and the page shows its HEX, RGB and HSL values; click any value to copy it. Below that, five palettes are built from the same color by rotating its hue: complementary, split complementary, triad, analogous, and a four-color square scheme. Click a swatch to copy its HEX code.
The page also has three smaller tools. The blender mixes your color with a second one, and a slider sets the share of each, from 0 to 100 percent. The contrast checker shows text on your background color, gives the WCAG 2.1 contrast ratio, and labels it AAA (7:1 or more), AA (4.5:1 or more) or Fail. The gradient builder makes a linear gradient at any angle or a radial one from two colors and copies the CSS background rule. Everything is calculated in your browser.
Each palette keeps the saturation and lightness of your color and rotates the hue. Complementary adds 180 degrees, triad adds 120 and 240, analogous adds 30 and 330, split complementary adds 150 and 210, and the square scheme uses 90-degree steps.
It reports the WCAG 2.1 ratio between the text and background colors. A ratio of 7:1 or higher shows AAA Pass, 4.5:1 or higher shows AA Pass, and anything lower shows Fail.
The page has no RGB text field. You choose colors with the color input, and the page shows the matching HEX, RGB and HSL values.
It writes a single background rule using linear-gradient with your chosen angle, or radial-gradient with a circle shape, between two colors. Click the preview to copy it.